在做这两个页面的（1|2）时候，产生一些想法， 在这里记录。

这个页面时全球网站导航，页面中用到大量国旗小图标，减少页面加载，请求服务器次数是需要考虑的问题之一，其二是将每个图片和其后的两行文字看做一个模块，这样这个这页面可以用很少的类即可完成，其实只是一个模块的重复利用。

用ps的选区工具（M）将所有小图片分别扣出（ctrl+C），新建透明图像文件（ctrl+n），分别放到新的透明背景的图片上（ctrl+v），排列整齐，这样，这个网页就只用到一张不到10k的图片，只加载了一次图片，即可同步显示所有小图片了。

一个模块的前端代码

css部分

.web1,.web2,.web3,.web4,.web5,.web6,.web7,.web8,.web9{ width:49px; height:32px; float:left; display:inline; margin-top:15px; margin-bottom:15px;}

.web1 {background:url(pic_all.gif) no-repeat 0 -42px;}

.web2 {background:url(pic_all.gif) no-repeat -49px -42px;}

.web3 {background:url(pic_all.gif) no-repeat -98px -42px;}

.web4 {background:url(pic_all.gif) no-repeat -147px -42px;}

.web5 {background:url(pic_all.gif) no-repeat 0 -157px;}

.web6 {background:url(pic_all.gif) no-repeat -51px -157px;}

.web7 {background:url(pic_all.gif) no-repeat -100px -157px;}

.web8 {background:url(pic_all.gif) no-repeat -149px -157px;}

.web9 {background:url(pic_all.gif) no-repeat 0 -74px;}

—————————————————————————————————————————–

页面2是大量整齐排列的分类网址列表。为了回避table（其实这里用table确实很方便），想要把这些同行内长短不一的文字，在同列排列整齐确实不太容易。直接上代码：

网页右键查看源文件

css部分

.dh_darkred { font-size:14px; color:#b91717;}

.dh_darkred a { color:#b91717;}

.all_link { font-size:14px; height:auto; border-bottom:#666666 dotted 1px; padding-bottom:20px;}

.all_link ul {}

.all_link li,.pro_all_link li { float:left; display:inline; margin-right:10px; width:92px; line-height:30px;}

.first_link { background:url(red_dock.gif) no-repeat left center; text-indent:10px;}

.sec_ul { margin-left:113px;}

.suojin { margin-left:-10px;}

.dh_head { margin-top:10px;}

主要思想是每行都是一个ul，不同行间的ul用li的margin对齐，在li宽度是一定的情况下可以实现。

.dh_darkred a 控制首列字体（链接）的红色

令li float:left，使列表横向平铺。将li的宽度设到92px（大于页面内所有锚文字的宽度），即可对齐。

注意，这里li之所以margin-right而不是margin-left是因为，使用左间距，第一列的文字也会移动，为了偷懒少使用一个类，这样做法比较简便。

ul内的第二个li要加小三角背景图片，使得第二个li的文字内容有10px的缩进，所以.sec_ul 控制第二行ul列表与上一行对齐。

第一行的ul与第二行的ul组成一个模块，这个页面重复使用。