一.今日完成的内容和收获：

（一）HTML中dl、ul、ol用哪个比较好？

1.dl标签：定义列表，与dt（定义列表中的项目）和dd（描述列表中的项目）结合使用

（1）语法

<dl>

    <dt>计算机</dt>

    <dd>用来计算的仪器 ... ...</dd>

    <dt>显示器</dt>

    <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

2.ul标签：定义无序列表，与li结合使用（li的前面有小黑点·）

（1）语法：

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

（2）如何去除黑点：list-style-type:none;

（3）ul经常用来实现轮播的小按钮，下拉菜单的各种要用来排列的列表，多个a标签排列等，实用范围非常广。

3.ol标签：有序列表，与li结合使用（li的前面会有123...）

（1）语法：

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

（2）ol因为它的有序属性，用的范围就比较小了，不是一定要用有序来排列的情况下，一般都是用ul

（二）background-position 和雪碧图（CSS sprites）用法

1.background-position

（1）定义：设置背景图像的起始位置；前提必须设置背景图像background-image

（2）可能的值：background-position： x | y；

也可以单独对一个属性使用background-position-x 和 background-position-y

方向值： x轴反向： left | right | center   y轴方向： top | bottom | center

百分比：x轴，y轴方向：  x%    计算公式：（容器自身的宽度/高度-图片自身的宽度/高度）*百分比

数值： x轴，y轴方向：  x px

注：x轴 和 y轴的属性值可以混用，若只设置其中一个值，那么另外一个默认是center

2.雪碧图：是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

（1）background-position属性在雪碧图中的用法：在使用雪碧图之前，我们需要知道雪碧图中各个图标的位置，然后通过background-position来实现要出现的图标

（2）雪碧图的制作：https://www.toptal.com/developers/css/sprite-generator 在该网站下选择想要的图标，然后再进行下载

一.今日完成的内容和收获：

（一）HTML中dl、ul、ol用哪个比较好？

1.dl标签：定义列表，与dt（定义列表中的项目）和dd（描述列表中的项目）结合使用

（1）语法

<dl>

    <dt>计算机</dt>

    <dd>用来计算的仪器 ... ...</dd>

    <dt>显示器</dt>

    <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

2.ul标签：定义无序列表，与li结合使用（li的前面有小黑点·）

（1）语法：

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

（2）如何去除黑点：list-style-type:none;

（3）ul经常用来实现轮播的小按钮，下拉菜单的各种要用来排列的列表，多个a标签排列等，实用范围非常广。

3.ol标签：有序列表，与li结合使用（li的前面会有123...）

（1）语法：

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

（2）ol因为它的有序属性，用的范围就比较小了，不是一定要用有序来排列的情况下，一般都是用ul

（二）background-position 和雪碧图（CSS sprites）用法

1.background-position

（1）定义：设置背景图像的起始位置；前提必须设置背景图像background-image

（2）可能的值：background-position： x | y；

也可以单独对一个属性使用background-position-x 和 background-position-y

方向值： x轴反向： left | right | center   y轴方向： top | bottom | center

百分比：x轴，y轴方向：  x%    计算公式：（容器自身的宽度/高度-图片自身的宽度/高度）*百分比

数值： x轴，y轴方向：  x px

注：x轴 和 y轴的属性值可以混用，若只设置其中一个值，那么另外一个默认是center

2.雪碧图：是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

（1）background-position属性在雪碧图中的用法：在使用雪碧图之前，我们需要知道雪碧图中各个图标的位置，然后通过background-position来实现要出现的图标

（2）雪碧图的制作：https://www.toptal.com/developers/css/sprite-generator 在该网站下选择想要的图标，然后再进行下载

/*background: url('css_sprites.png') -49px -10px;*/等同于下列两行的写法

background-image: url(css_sprites.png);

background-position: -49px -10px;

transform: scale(0.8);/*对图片进行缩放或扩大*/

二.遇到的问题

三.明天的计划安排

 1.布局header和footer

 2.用css模拟下拉框