-
8.Flex项目实现自动伸缩 您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }查看全部
-
5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } 6.Flex项目移动右边 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; } 7.水平垂直居中 在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。查看全部
-
Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 1.创建一个flex容器 任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部 如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }查看全部
-
box_shadow阴影 inset内部阴影查看全部
-
border-radius 左上 右上 右下 左下查看全部
-
在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit 取值说明 属性值 属性值说明 content-box 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。 inherit 使元素继承父元素的盒模型模式查看全部
-
nice查看全部
-
/*使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; position:absolute; top:15px; right:0px; width:1px; height:15px; background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87); } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child:after{ width:0px; height:0px; } css中的.nav li:after表明了在每一个li后面添加一个元素，正是content内容（制作渐变时，不需要有内容被添加，所以为空）。 background:linear-gradient(to bottom ,#f82f87,#bo363f,#f82f87) //css3中的渐变样式 对每一个li后面添加了一个渐变后，需要清除最后一个li的。 这里面使用了.nav li:last-child:after的伪类，将其宽高设置为0。查看全部
-
} /*使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; position:absolute; top:15px; right:0px; width:1px; height:15px; background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87); } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child:after{ width:0px; height:0px; } .nav a, .nav a:hover{ color:#fff; text-decoration: none; }查看全部
-
E:first-of-type选择器，E容器中的第一个p元素（p不一定是容器中的第一个子元素； E:nth-last-child(x)选择器，E容器中的倒数第x个元素； E:nth-child(2n)选择器，E容器中的偶数项； E:nth-child(2n+1)选择器，E容器中的奇数项； E:last-child选择器，E容器中最后一项； E:first-child选择器，E容器中第一项；查看全部
-
div:empty { border: 1px solid green; }查看全部
-
E[att^="val"]选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串 E[att&="val"]选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串 E[att*="val"]选择匹配元素E,且元素定义了属性att,其属性值任意位置包含了"val"查看全部
-
<li><a href="">Home</a></li> <li>|</li> <li><a href="">About Me</a></li> <li>|</li> <li><a href="">Portfolio</a></li> <li>|</li> <li><a href="">Blog</a></li> <li>|</li> <li><a href="">Resources</a></li> <li>|</li> <li><a href="">Contact Me</a></li>这样比较简单些查看全部
-
<style> a[class^=column]{background:red;} a[href$=doc]{background:green;} a[title*=box]{background:blue;} </style> ^开始 $结尾 *包含查看全部
-
制作3D旋转视频展示区查看全部
举报
0/150
提交
取消