1.定义描述列表标签<dl>
和 '<figure>'
标签的显示效果比较
<figure>
<img src="../../img/timg.jpg" alt="">
<p>真的很喜欢你</p>
</figure>
<dl>
<dt>
<img src="../../img/timg.jpg" alt="">
</dt>
<dd>真的很喜欢你</dd>
</dl>
以上的图片顺序是按照代码顺序显示的,不难看出,用<figure
>显示的图片和文本都有缩进,而用<dl>
显示的只是文本有缩进
2.文本单行显示white-space: nowrap;
无论此行文本有多长都不会换行显示
3.后代选择器和子代选择器的区别
从语法:后代用空格符,子代用>符号
从作用:后代的范围更大,子代的范围小,仅限于子辈
<body>
<ul id="first">
<li>儿子一
<ul>
<li>孙子1</li>
</ul>
</li>
<li>儿子二
<ul>
<li>孙子二</li>
</ul>
</li>
</ul>
</body>
#first li{
border:1px solid red;
}
以上此为后代选择器样式
first>li{
border:1px solid red;
}
以上为子代选择器样式
当使用子代选择器时只有儿子一和儿子二会有红色边框,而使用后代选择器孙子1和孙子2也会带有边框
4.超链接状态:
a:link 未访问
a:visited 已访问
a:hover 鼠标移上
a:active 激活状态
以上的顺序不能改变,否则在一些浏览器中会出问题
(快速记忆:LV好)
5.文本阴影:text-shadow:x轴偏移量 y轴偏移量 模糊程度 阴影的颜色
-webkit-text-stroke:文本描边的宽度 文本描边颜色
6.雪碧图
在一张图片上有许多的小图片,用一张图就可以获得多个小图标,可减小图片所占内容和多次引用图片的代码量,例如
用background-position:x轴偏移量 y轴偏移量来定位各个小图标的位置,可用工具测量出各图片的位置,再利用浏览器检查元素的方法找到对应的代码双击选中后利用上下方向键可以微调图标的位置得到最合适的数据。