经常会在网页上看见类似这样的页面效果:
下面就应用无懈可击的WEB设计方案来实现它:(HTML代码添加在BODY之中,CSS代码添加在之间,一定要编辑在
之间)HTML代码:
其实上面的文档结构非常简单:
- 图片标题
- 图片描述
- 图片标题
- 图片描述
- 图片标题
- 图片描述
仅仅是一个外层DIV包围了三个自定义列表,如果没有CSS,这篇文档结构一样具有可读性,不存在文档内容的缺失,这是无懈可击方案之一;
来看CSS样式:(下面的红色字是对每一行CSS语句的解释,也叫“注释”,在运行代码时要将其注释,应用
用这个注释把所有的红字都注释掉,浏览器就不会解释执行这些文字了;或者将这些文字干脆删除)
* { 这个声明初始化了页面中所有元素的外边界和内边界同意为“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、文档结构要具有语义化,使人能够读懂,这里的结构每一行都具有语义化
- 图片标题
- 图片描述
- 图片标题
- 图片描述
- 图片标题
- 图片描述
4、巧妙的应用浮动元素实现了不同的“分栏式”效果;
5、最关键的就是这一点,上述事情都做到之后,这里的HTML代码和CSS代码都非常利于以后的维护。比如说,我想调整图片的大小为100*100像素的大小。那么我不需要改动任何HTML代码,只需要改动其中的CSS代码就OK了,将#box .box-left dt {width:210px;}其中的宽度改为110px,同时将#box .box-left dd{width:250px;}其中的宽度改为350px,这样的维护看起来多么方便;假如有一天这个页面中需要添加一条“文字在左、图片在右”的图文混排的文字和图片,那么在