详细页设计
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