慕课网电商网站开发实例（16）

详细页设计

1.<dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。

<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。

如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。

2，用法： <dl>

<dt>列表标题</dt>

<dd>列表内容</dd>

<dd>列表内容</dd> ...

</dl>

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

3.内嵌元素代码换行产生空格解决：父元素font-size:0，设置一个固定字体，再分别对内嵌元素设置字号

比如：

结构： <div class="span-wrap">

<span>字符产生间距</span>

<span>字符产生间距</span>

<span>字符产生间距</span>

<span>字符产生间距</span>

<span>字符产生间距</span>

<span>字符产生间距</span>

</div>

样式： html{ 　　

-webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */

}

.span-wrap {

font-size:0;/* 所有浏览器 */

*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */

}

.span-wrap span{ font-size: 12px;

letter-spacing: normal;/* 设置字母、字间距为0 */

word-spacing: normal; /* 设置单词、字段间距为0 */ }

4.两元素border重叠变成2px，可使用margin-left：-1px来减去重叠边框 position可改变元素的优先级，优先显示

5.内嵌元素代码换行产生空格解决：父元素font-size:0，设置一个固定字体，再分别对内嵌元素设置字号

各分页转换背景颜色，在body中放一个class，在css中根据需求设置颜色background-color