css
就不能找个大点的碗吗
这个作者很懒,什么都没留下…
展开
-
css基础(一)--边框
1.边框 圆角效果border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 可以使用百分比或者em,但兼容性不太好实现实心整个圆:div.circle{ height:100px;/*与width设置一致*/ width:100...原创 2018-07-10 20:35:37 · 1384 阅读 · 0 评论 -
css基础(十三)--媒体类型
37.Media Queries——媒体类型让一个页面适应不同终端screen all print 最为常见 媒体类型的引入方法:1.link方法:<link rel="stylesheet" type="text/css" href="style.css" media="screen" /><link rel="stylesheet" t原创 2018-08-20 15:27:36 · 1650 阅读 · 0 评论 -
css基础(十二)--伸缩布局
36.伸缩布局css3引入新的布局模式--flexbox 主要功能: 第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 第四,可以指定如何将垂直于元素布局轴的...原创 2018-08-20 15:25:03 · 1400 阅读 · 0 评论 -
css基础(十一)--盒子模型
35.盒子模型分为两种:w3c标准模型 ie的传统模型相同之处:都是对元素计算尺寸模型不同之处:计算方法不同 1.w3c标准盒模型 外盒尺寸计算(元素空间尺寸) element空间高度=内容高度+内距+边框+外距 element空间宽度=内容宽度+内距+边框+外距 内盒尺寸计算(元素大小) element高度=内容高度+内距+边框(hei...原创 2018-08-20 15:22:34 · 1471 阅读 · 0 评论 -
css基础(十)--多列布局
34.多列布局columns:<column-width> || <column-count>例如:要显示2栏显示,每栏宽度为200px,代码为:columns: 200px 2; column-width:在定义属性列宽的时候能够单独使用或者和多列属性中其他属性配合使用column-width: auto | <length>...原创 2018-08-20 15:21:37 · 1423 阅读 · 0 评论 -
css基础(九)--keyframe
33.keyframe关键帧,类似于flash中的关键帧,以@keyframes开头紧跟着动画名称加上花括号{。。。},括号中表示不同时间段样式规则@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 样式规则中可以创建多个百分比,分别给每个...原创 2018-08-20 15:20:18 · 13134 阅读 · 0 评论 -
css基础(八)--动画transition
32.过渡属性 transition-propertycss中新增的模块transition 通过鼠标单击,获取焦点,被点击,或者对任何元素改变时触发,并平滑的以动画效果改变css的属性值创建简单的过渡效果步骤:1.在默认样式中生命初始状态样式2.生命过度元素的最终状态,比如悬浮状态3.在默认样式中通过添加过度函数,添加一些不同的样式 transition是一个...原创 2018-08-20 15:17:50 · 1419 阅读 · 0 评论 -
css基础(七)--动画效果
26.rotate()函数指定的角度参数使元素相对原点进行旋转,设置一个角度值,指定旋转的幅度,如果是正值,相对圆点中心顺时针,负值相对于圆点中心逆时针-ms-transform:rotate(7deg); //-ms代表ie内核识别码-moz-transform:rotate(7deg); //-moz代表火狐内核识别码-webkit-transform:rotate(7deg)...原创 2018-08-20 15:15:24 · 1413 阅读 · 0 评论 -
css基础(六)--接上文剩余一些选择器
20.:enable选择器与disabled属性input[type="submit"] :disabled在后面直接添加:disabled21.:checked属性:checked表示选中状态的复选框或者单选框22.::selection表示用鼠标选中的文本,可以设置其样式比如:默认是背景为蓝色,字体为白色换一种样式:换成字体为白色,背景为橘色::se...原创 2018-08-20 15:13:20 · 1349 阅读 · 0 评论 -
css基础(五)--选择器
5.属性选择器1)^表示以val开头,att表示属性[比如title,class之类的]2)$表示以val结尾的3) *表示含有val字符串的例如; a[class^="column"]{ background:red; } a[href$="doc"]{ background:green; ...原创 2018-08-20 15:11:45 · 1417 阅读 · 0 评论 -
css基础(四)--背景
1.背景位置background-originbackground-origin : border-box|padding-box|content-box表示图片从边框还是内边框(默认),或者内容区域开始显示 如果背景图片不是no-repeat,属性无效,直接从边框开始显示2.背景是否裁剪 background-clipbackground-clip : border-b...原创 2018-08-20 15:05:41 · 1371 阅读 · 0 评论 -
css基础(三)--字体控制
3.字体1.text-overflow 与 word-wraptext-overflow用来设置是否使用一个省略标记(。。。)标示文本内溢出 但是只能说明溢出时用什么方式显示,要实现省略号效果,必须定义一行内显示(white-space:nowrap)以及溢出内容隐藏(overflow:hidden)代码如下:如果要溢出时省略号显示text-overflow:ellipsis; overflow:...原创 2018-07-10 20:38:40 · 1398 阅读 · 0 评论 -
css基础(二)--颜色控制
2.css颜色1.普通color:rgba(R,G,B,A)R,G,B都可以为0-255的正数,以及百分比0-100,超出范围使用最接近的极限值,并非所有浏览器都支持百分数值,a为透明参数,取值在0-1之间例如:background-color:rgba(100,120,60,0.5);2.渐变分为线性渐变和径向渐变线性渐变:第一个参数为渐变方向,可以用角度或是英文单词表示 第二,第三个参数表示起...原创 2018-07-10 20:37:31 · 1447 阅读 · 0 评论 -
css基础(十四)--生成内容
40.css生成内容使用content配合伪类选择器一般可以做以下四种事情:例如:css中有一个清除浮动的方法“clearfix”就是用了 content,只不过这里插入了一个空格.clearfix:before, .clearfix:after { content:””; display:table; } ....原创 2018-08-21 09:52:06 · 1448 阅读 · 0 评论