网站设计单选设计经验分享

现在的网站设计比较重视语义化的结构，也就是在设计时会考虑该元素是不是真的是内容或者仅是装饰品，如果是是内容就使用 html的元素来表示，如果单纯只是造型，就使用CSS 的元素背景来呈现。所以目前比较流行的选单做法之就是将文字隐藏后用背景图取代，虽然有一派是主张连字都不要藏，使用所谓的icon-font或是加载字型来美化，不过在英语系国家这么做问题不太，一个字型文件不会有多大，中文就... 常用字至少要3000个，所以，实用性不高，我们中文使用者还是乖乖的用文字取代吧...泪目。

使用的方法很简单，一般都是用无顺序列表 ul 及例表项目 li 里面放 锚点 a的方式来做选单。li 浮动后就能做出水平选单。a 设定 block就能采用宽度，设定背景，最后用 text-indent:-9999px 将文字推出可视区域。

一般都是共享一张背景，然后依不用样式用 background-position来做位置的变化。或是可以像这样把他们当成图示，字还是保留。这个时候只要利用 text-indent:70px 空出图片的位罝就行了。

但是要特别注意图片的组成方式，有可能因为宽度而造成旁边的图示不小心跑出来。所以在横排的列表中，最好图示都做直的往下排，在直排的场合做横排的图示。再配合 background:repeat-x |repeat-y |no-repeat。其实可以把图标全部放成同一张图片，依这两种不同排法分好，最终只需要两张就好。

当然还是要注意图片的大小，不然反而会拖慢网速。不过一般的情况下，少读几个档头的img是会比读一张大张的来得快没错。以上，就是简单的选单制作报告~