零碎知识总结(1)

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轴偏移量来定位各个小图标的位置,可用工具测量出各图片的位置,再利用浏览器检查元素的方法找到对应的代码双击选中后利用上下方向键可以微调图标的位置得到最合适的数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值