WEB前端设计完美的自定义列表dl,dt,dd

经常会在网页上看见类似这样的页面效果:

WEB前端设计完美的自定义列表dl,dt,dd



下面就应用无懈可击的WEB设计方案来实现它:(HTML代码添加在BODY之中,CSS代码添加在<style></style>之间,<style></style>一定要编辑在<head></head>之间

HTML代码:

<div id="box">
 <dl class="box-left">
      <dt><a href="images/moon1.jpg" target="_blank"><img src="images/suo-moon1.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">明月几时有</dd>
      <dd class="box-shuoming">明月几时有,把酒问青天,不知天上宫阙,今夕是何年;我欲乘风归去,又恐琼楼玉宇,高处不胜寒。明月几时有,把酒问青天,不知天上宫阙,今夕是何年;我欲乘风归去,又恐琼楼玉宇,高处不胜寒。</dd>
    </dl>
    <dl class="box-right">
      <dt><a href="images/fanbb.jpg" target="_blank"><img src="images/suo-fanbb.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">时尚界一姐</dd>
      <dd class="box-shuoming">范冰冰引领着中国时尚界的潮流,可谓是时尚界的一姐。就连早已成名的杨幂也在追随者范冰冰,诚然,范冰冰确实有着过人之处,她身上那种自然而然散发出来的气质不是常人所能匹及。人们说,气质是由内而外,从一个人的骨子里往外散发出来的,并不是学出来的,也不是装模作样就能装出来的。范冰冰就是这样一个人,她有着与众不同的气质,再加上她的天生丽质,为无数万千影迷拥护着。</dd>
    </dl>
    <dl class="box-left">
      <dt><a href="images/renxiang.jpg" target="_blank"><img src="images/suo-renxiang.jpg" width="200" height="200" /></a></dt>
      <dd class="box-text">人体肖像</dd>
      <dd class="box-shuoming">这个人是谁已经忘了,因为没有网络只好随便找来一张图稍作修改就放在网页里了。只能用作网页的一个小小的点缀,为完成自定义列表的完美功能而临时找的一个素材罢了。</dd>
    </dl>
</div>

 

    其实上面的文档结构非常简单:

<div id="box">
    <dl class="box-left">
      <dt><img src="images/suo-moon1.jpg" width="200" height="200" /></dt>
      <dd class="box-text">图片标题</dd>
      <dd class="box-shuoming">图片描述</dd>
    </dl>
    <dl class="box-right">
      <dt><img src="images/suo-fanbb.jpg" width="200" height="200" /></dt>
      <dd class="box-text">图片标题</dd>
      <dd class="box-shuoming">图片描述</dd>
    </dl>
    <dl class="box-left">
      <dt><img src="images/suo-renxiang.jpg" width="200" height="200" /></dt>
      <dd class="box-text">图片标题</dd>
      <dd class="box-shuoming">图片描述</dd>
    </dl>
</div>

    仅仅是一个外层DIV包围了三个自定义列表,如果没有CSS,这篇文档结构一样具有可读性,不存在文档内容的缺失,这是无懈可击方案之一;

    来看CSS样式:(下面的红色字是对每一行CSS语句的解释,也叫“注释”,在运行代码时要将其注释,应用

WEB前端设计完美的自定义列表dl,dt,dd

用这个注释把所有的红字都注释掉,浏览器就不会解释执行这些文字了;或者将这些文字干脆删除

* {    这个声明初始化了页面中所有元素的外边界和内边界同意为“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、文档结构要具有语义化,使人能够读懂,这里的结构每一行都具有语义化

<div id="box">
  <dl class="box-left">
    <dt><img src="images/suo-moon1.jpg" width="200" height="200" /></dt>
    <dd class="box-text">图片标题</dd>
    <dd class="box-shuoming">图片描述</dd>
  </dl>
  <dl class="box-right">
    <dt><img src="images/suo-fanbb.jpg" width="200" height="200" /></dt>
    <dd class="box-text">图片标题</dd>
    <dd class="box-shuoming">图片描述</dd>
  </dl>
  <dl class="box-left">
    <dt><img src="images/suo-renxiang.jpg" width="200" height="200" /></dt>
    <dd class="box-text">图片标题</dd>
    <dd class="box-shuoming">图片描述</dd>
  </dl>
</div>

    4、巧妙的应用浮动元素实现了不同的“分栏式”效果;

    5、最关键的就是这一点,上述事情都做到之后,这里的HTML代码和CSS代码都非常利于以后的维护。比如说,我想调整图片的大小为100*100像素的大小。那么我不需要改动任何HTML代码,只需要改动其中的CSS代码就OK了,将#box .box-left dt {width:210px;}其中的宽度改为110px,同时将#box .box-left dd{width:250px;}其中的宽度改为350px,这样的维护看起来多么方便;假如有一天这个页面中需要添加一条“文字在左、图片在右”的图文混排的文字和图片,那么在</div>的前面添加一个自定义列表就行了

<dl class="box-right">
  <dt><img src="一张新图片" width="" height="" /></dt>
  <dd class="box-text">图片标题</dd>
  <dd class="box-shuoming">图片描述</dd>
</dl>
甚至我们都不需要修改任何CSS样式表。

    6、兼容IE6、IE7、IE8、IE9、FIREFOX、OPERA、SAFARI等等所有世界主流浏览器。

这就是无懈可击的WEB设计。

WEB前端设计完美的自定义列表dl,dt,dd

上一篇:JAVA+HTML


下一篇:ExtJS从零开始(0)-搭建MyEclipse+Tomcat+ExtJS4.2.1开发环境