/*使用伪元素制作导航列表项分隔线*/
.nav li::before{
content:" ";
width:1px;
height:13px;
/*保持跟字体等高*/
background-image:linear-gradient(to bottom,#999,#000,#999);
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
}
.nav li::before{
content:" ";
width:1px;
height:13px;
/*保持跟字体等高*/
background-image:linear-gradient(to bottom,#999,#000,#999);
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
}
2016-04-22
:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。
2016-04-21
div:not([id="footer"]){
background:orange;
}
background:orange;
}
2016-04-21
background-size:cover;覆盖
background-size:contain;容纳
background-size:contain;容纳
2016-04-21
background-size
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
2016-04-21
background-origin:content-box;
background-clip:content-box;
background-clip:content-box;
2016-04-21
background-origin
设置元素背景图片的原始起始位置。
语法:
background-origin : border-box | padding-box | content-box;
参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
设置元素背景图片的原始起始位置。
语法:
background-origin : border-box | padding-box | content-box;
参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
2016-04-21
@font-face {
font-family:"DYB Font";
src:url("http://www.imooc.com/Amaranth-BoldItalic.otf");
} @font-face嵌入字体
font-family:"DYB Font";
src:url("http://www.imooc.com/Amaranth-BoldItalic.otf");
} @font-face嵌入字体
2016-04-21
text-overflow:ellipsis;用来设置是否使用一个省略标记(...)标示对象内文本的溢出。
word-wrap:normal|break-word;也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
word-wrap:normal|break-word;也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
2016-04-21