
HTML+css
HTML+css
w_t_y_y
个人在线笔记~,其他博客:https://www.zhihu.com/people/wtyy666
展开
-
文本类样式
1、字体大小:浏览器不支持字体大小小于12px的设置,可以使用以下方法放缩:font-size: 7px; -webkit-text-size-adjust: none;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.6);但是该放缩会同步放缩div的大小,所以需要把css写在具体的非布局性元素上...原创 2021-04-29 09:07:46 · 116 阅读 · 0 评论 -
table表格
1、列数不定,宽度自动平均分配: table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }原创 2021-04-23 16:47:22 · 336 阅读 · 0 评论 -
图片img
一、图片大小自适应问题:1、图片自适应div大小:图片自适应div大小主要是控制图片的宽度,可以通过设置css里面的width属性来解决问题。img{ width:100%; height:auto}注意:这里是指图片自动放大或者是缩小,以填充完div的宽度,如果图片太小,那么放大后就会变得模糊。所以,尽量设置max-width比较好,如果div宽度不固定:img{ max-width:100%; height:auto}如果div宽度固定:img { border: no原创 2021-01-25 16:53:45 · 174 阅读 · 0 评论 -
animation动画
一、方法:分两步:1、首先注册动画,如:.mydiv{ -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}animation 属性是一个简写属性,用于设置六个动画属性:animation: name duration timing-function delay iteration-count direction;2、实现动画:如:@-webkit-keyframes myfirst /* Safari原创 2021-01-15 11:27:11 · 268 阅读 · 0 评论 -
边框css
一、边框上加文字:<div class="body"> <fieldset class="list-field"> <legend class="list-legend">标题</legend> <div class="list-div"> 内容 </div> </fieldset> </div>.body { width:原创 2021-01-13 15:13:48 · 675 阅读 · 0 评论 -
css选择第n个元素
一、nth-child(n)二、nth-of-type(n)用于根据类名筛选,如:/deep/ .el-tabs__item:nth-of-type(3) { border-left: 1px solid red !important; }原创 2020-09-21 15:59:30 · 1677 阅读 · 0 评论 -
div水平垂直居中
一、水平居中二、垂直居中三、水平垂直居中:<div class="parent"> <div class="child">DEMO</div> </div>.parent{ width:200px;height:300px; background:#ddd; }.child{ background:#666; color:#fff; }1、方法一:设置margin自动适应,然后设置定位的上下...原创 2020-09-14 16:14:17 · 401 阅读 · 0 评论 -
弹框时背景变暗特效
<html> <head> <meta charset="UTF-8"> <title></title> <title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title> <meta http-equiv="content-Type&原创 2018-03-15 14:08:30 · 1778 阅读 · 0 评论 -
body标签
appendChild方法:这是一个通用的方法,为 某个标签对象追加一个子标签对象,body属性如下:text:用于设置整个网页中的文字颜色bgsound:设置整个网页的背景色background:用来设置背景图片bgProperties:设置背景图片是否随着的屏幕的滚动而滚动text属性:用于设置和返回网页文档的显示颜色bottomMarg原创 2017-03-25 11:52:50 · 506 阅读 · 0 评论 -
超链接<a>标签
一、标签的特殊用法:用于本地内跳转:如: 顶部 abvnkfdjgrfnhrabvnkfdjgrfnhrabvnkfdjgrfnhrabvnkfdjgrfnhr abvnkfdjgrfnhrabvnkfdjgrfnhrabvnkfdjgrfnhrabvnkfdjgrfnhr abvnkfdjgrfnhrabvnkfdjgrfnhrabvnkfd原创 2017-10-17 09:17:43 · 335 阅读 · 0 评论 -
BootStrap响应式布局
详见官网http://www.bootcss.com/原创 2017-10-29 14:40:59 · 443 阅读 · 0 评论 -
CSS+DIV布局
css+div可以实现很多复杂的布局,下面来看其中一个比较经典的布局:我们可以把整个布局当做一个大的div,里面套着四个div,一个是头部,一个是导航栏,一个是主体(里面再分为两个div,利用浮动排成水平方向),一个是尾部。代码如下: body{ margin: 0;/*清除浏览器自带的margin,使后面设置container的margi原创 2017-10-18 16:43:31 · 1417 阅读 · 0 评论 -
css概述
一、css语法:选择器{属性:值;属性:值;}选择器有三种:1、id选择器,一般留给js使用;2、元素选择器(即标签名),一般用于初始化页面给所有的同名元素一个初始化的样式;3、类选择器,一般将共同样式定义在同一个class里面复用。id只能唯一标识,而元素和类都可以多重标识,一个元素还可以加多个class,如:选择器样式优先级:行内样式>ID选择器 > 类选择器原创 2017-10-17 19:20:15 · 523 阅读 · 0 评论 -
css transform属性
1.旋转的方向3D transform中有下面这三个方法:rotateX( angle )rotateY( angle )rotateZ( angle )rotate旋转的意思是:rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴,angle为角度,单位为beg,如360beg表示旋转360度。2.perspectiv原创 2017-03-28 15:59:52 · 2294 阅读 · 0 评论