html⾃定义列表⼀⾏排列,WEB前端设计完美的⾃定义列表
dl，dt，dd
经常会在⽹页上看见类似这样的页⾯效果：
下⾯就应⽤⽆懈可击的WEB设计⽅案来实现它：(HTML代码添加在BODY之中，CSS代码添加在之间，⼀定要编辑在
之间)
HTML代码：
class="box-left">
href="images/moon1.jpg"
target="_blank">
src="images/suo-moon1.jpg" width="200" height="200"
/>
class="box-text">明⽉⼏时有
class="box-shuoming">明⽉⼏时有，把酒问青天，不知天上宫阙，今⼣是何年；我欲乘风归去，⼜恐琼楼⽟宇，⾼处不胜寒。明⽉⼏时有，把酒问青天，不知天上宫阙，今⼣是何年；我欲乘风归去，⼜恐琼楼⽟宇，⾼处不胜寒。
href="images/fanbb.jpg"
target="_blank">
src="images/suo-fanbb.jpg" width="200" height="200"
/>
class="box-text">时尚界⼀
class="box-shuoming">范冰冰引领着中国时尚界的潮流，可谓是时尚界的⼀。就连早已成名的杨幂也在追随者范冰冰，诚然，范冰冰确实有着过⼈之处，她⾝上那种⾃然⽽然散发出来的⽓质不是常⼈所能匹及。⼈们说，⽓质是由内⽽外，从⼀个⼈的⾻⼦⾥往外散发出来的，并不是学出来的，也不是装模作样就能装出来的。范冰冰就是这样⼀个⼈，她有着与众不同的⽓质，再加上她的天⽣丽质，为⽆数万千影迷拥护着。
href="images/renxiang.jpg"
target="_blank">
src="images/suo-renxiang.jpg" width="200" height="200"
/>
class="box-text">⼈体肖像
class="box-shuoming">这个⼈是谁已经忘了，因为没有⽹络只好随便来⼀张图稍作修改就放在⽹页⾥了。只能⽤作⽹页的⼀个⼩⼩的点缀，为完成⾃定义列表的完美功能⽽临时的⼀个素材罢了。
其实上⾯的⽂档结构⾮常简单：
id="box">
src="images/suo-moon1.jpg" width="200" height="200"
/>
class="box-text">图⽚标题
class="box-shuoming">图⽚描述
src="images/suo-fanbb.jpg" width="200" height="200"
/>
class="box-text">图⽚标题
class="box-shuoming">图⽚描述
src="images/suo-renxiang.jpg" width="200" height="200"
/>
class="box-text">图⽚标题
class="box-shuoming">图⽚描述
仅仅是⼀个外层DIV包围了三个⾃定义列表，如果没有CSS，这篇⽂档结构⼀样具有可读性，不存在⽂档内容的缺失，这是⽆懈可击⽅案之⼀；
来看CSS样式：(下⾯的红⾊字是对每⼀⾏CSS语句的解释，也叫“注释”，在运⾏代码时要将其注释，应⽤
padding是外边距还是内边距⽤这个注释把所有的红字都注释掉，浏览器就不会解释执⾏这些⽂字了；或者将这些⽂字⼲脆删除)
* {
这个声明初始化了页⾯中所有元素的外边界和内边界同意为“0”
margin:0;
padding:0;
}
#box { 初始化“盒模型”，设置宽度，因为不确定⾼度所以不设⾼度
width: 500px;
border: 2px solid #E6E6E6;
font-size:15px;
font-family:"微软雅⿊";
color:#414141;
margin:20px;
display:inline; 这条声明可以处理IE6浏览器双倍MARGIN的问题(BUG),“例如：同时存在MARGIN-LEFT:20PX;FLOAT:LEFT;
，那么IE6浏览器会出现左侧外边距40px⽽不是20px” float:left; 这条能够使外层的DIV不脱离内层元素浮动后的⽂档流
}
.box-text { 图⽚标题样式 font-size:150%;
font-weight:bold;
color:#689EE8;
padding-bottom:10px; 图⽚标题和图⽚描述之间的间距}
.box-shuoming
{ 图⽚描述样式 text-indent:2em; ⾸⾏缩进 line-height:1.5em; ⾏⾼ font-family:"宋体";
color:#707881;
}
#box dl { 对每个⾃定义列表的总体样式 width:480px; 宽度+两个外边距=外层DIV的总宽度500px margin:10px; 缩写，表⽰上下左右外边距都为10px margin-bottom:20px; 单独定义向下外边距 display:inline; 处理IE6浏览器双倍MARGIN的BUG float:left;
}
#box dt img { 定义图⽚样式 padding:4px; 内边距和边框结合会产⽣相框的效果 border:1px
solid
#DCDCDE; 边框的缩写，宽度1px，实线，颜⾊#DCDCDE border-bottom-color:#7F7F7F; 右侧和下边边框颜⾊加深形成阴影效
果 border-right-color:#7F7F7F;
}
#box .box-left dt
{ 设置图⽚在左、⽂字在右的样式 float:left;
width:210px; 设置浮动时通常要定义宽度，以免出错，图⽚宽200+内边距4*2+边框1*2=210 margin-right:20px; 设置图⽚与右侧⽂本之间的间距 }
#box .box-left dd
{ 设置图⽚在左、⽂字在右的样式 float:left;
width:250px; ⽂本宽度：480-210-20(margin-right:20px)=250
}
#box .box-right dt
{ 设置图⽚在右、⽂字在左的样式 float:right;
width:210px; }
#box .box-right dd
{ 设置图⽚在右、⽂字在左的样式 float:left;
width:250px;
margin-right:20px;
}
为什么说他是⽆懈可击的呢？
1、W3C标准最⾸要的就是⽂档的结构、表现和⾏为相分离，在这个例⼦中⽂档的结构和表现完全分离，符合W3C标准；
2、⽂档结构⼀定要以最简洁的代码来实现，这⾥的HTML代码可谓⾮常简单；
3、⽂档结构要具有语义化，使⼈能够读懂，这⾥的结构每⼀⾏都具有语义化
class="box-left">
src="images/suo-moon1.jpg" width="200" height="200"
/>
class="box-text">图⽚标题
class="box-shuoming">图⽚描述
class="box-right">
src="images/suo-fanbb.jpg" width="200" height="200"
/>
class="box-text">图⽚标题
class="box-shuoming">图⽚描述
class="box-left">
src="images/suo-renxiang.jpg" width="200" height="200"
/
>
class="box-text">图⽚标题
class="box-shuoming">图⽚描述
4、巧妙的应⽤浮动元素实现了不同的“分栏式”效果；
5、最关键的就是这⼀点，上述事情都做到之后，这⾥的HTML代码和CSS代码都⾮常利于以后的维护。⽐如说，我想调整图⽚的⼤⼩为100*100像素的⼤⼩。那么我不需要改动任何HTML代码，只需要改动其中的CSS代码就OK了，将#box
.box-left dt {width:210px;}其中的宽度改为110px，同时将#box .box-left
dd{width:250px;}其中的宽度改为350px，这样的维护看起来多么⽅便；假如有⼀天这个页⾯中需要添加⼀条“⽂字在左、图⽚在右”的图⽂混排的⽂字和图⽚，那么在
的前⾯添加⼀个⾃定义列表就⾏了
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论