导航类网页心得

导航类网页，内有大量的锚文字，大量的链接，如何布局（当然不是用table），能让这些链接群排列整齐的同时有方便维护和批量控制操作使我花了些头脑思考。

在做这两个页面的（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组成一个模块，这个页面重复使用。

相关文章

• 兼容问题 CSS浏览器 IE6.0,ie7.0与Firefox的CSS兼容性问题
• 关于布局时的清除浮动
• 你能在5分钟内列出多少Html标签？
• 前端开发工程师必备速查手册(下载)
• 书写高效的CSS提高渲染效率
• 10个修正IE6的bug的技巧
• 适合新站做外链的10大博客
• 谷歌关闭google.cn，域名跳转至香港。
• 超酷的css导航设计网站