无懈可击的WEB设计可拓展的行

1、通过使用简洁的、语义化的HTML和CSS代码，可以提高网站的易读性和可用性。嵌套表格会增加相当多的冗余HTML代码。

2、增加文字大小始终是测试设计灵活度的好方法，它不仅可以让您直观的感受到如何在大字体的情况下保持页面的可读性，还能支出设计方案是否能够良好的适应任何字体大小，以及任何数量的文本内容。

3、在构建代码时，我们首先要看它所包含的内容信息，采用哪些HTML对象来表示才能最好的体现其意义，然后选择出最合适的HTML结构。

4、 推荐字体使用Helvetica，绝大多数苹果系统的用户都安装了Helvetica字体，这给他们带来了很好的使用体验，因此应将Helvetiva字体列在最前面，Arial字体作为备用。

如 body{font-family:Helvetica,Arial,sans-serif;}大多数用户很难发现两种字体的差别。

5、加上了clear：both;规则，使得它上面的行中所加的浮动规则对它不造成影响。

6、当<li>元素浮动之后，我们注意到ul的背景消失了，是因为当浮动某个对象内的对象时，我们使它们脱离了正常的文档内容布局流，因此，对于包围<li>的对象<ul>来说，就好像列表实际不存在。结果是，<ul>无法得知它应该按照多高和多宽的尺寸来显示出它的背景色。

解决办法：必须让ul和它的两个列表一起浮动，此外，需要给它赋予一个width属性，以确保这个行能够按照我们的本意占据整个页宽。大多数浏览器是严格按照字面意思来处理css2.0规范的：“一个被浮动的框式组件必须要具有明确的宽度值”。如果这里不指定，那么这一行的宽度将会仅仅和其内容所要求的宽度一样。

7、对于一些提示性的小图标，可以直接将图片加在HTML代码中，但是为了方便以后的修改，并且不在文档结构中加上不必要的图片，我们可以通过在CSS中设置背景图片的方式来加上它们。

以下代码使得图标能够居中显示在预留的padding处。

background: url(search.gif) no-repeat 0 50%;

8、针对IE7的修改：网页的第二行在IE7中浏览，会发现文字的上方有一条莫名其妙的缝隙，这是IE7自动加上去的，其他的主流浏览器包括IE6并不是这样。

正常显示如下：

IE7的显示如下：

解决办法：在div的css中加上 float:left;100%; 这样就发现在IE7中显示也正常了。

最后总结：

书中代码实现如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>无标题文档</title>
 6  
 7          <style type="text/css">
 8              body,div,ul,li,p,a{
 9                  margin:0;
10                  padding:0;
11              }
12              body{
13                  font-family:微软雅黑,"Microsoft YaHei",Helvetica,Arial;
14                  font-size:1em;
15          
16              }
17              
18              #register{
19                  float:left;
20                  width:100%;
21                  color:#690;
22                  list-style: none;
23                  background-color: #8CCA12;
24              }
25              
26              a{
27                  text-decoration: none;
28                  color:#360;
29              }
30              #msg{
31                  float:left;
32                  width:100%;
33                  text-align: center;
34                  clear:both;
35                  color:#fff;
36                  font-size:110%;
37                  font-weight:  bold;
38                  background: #66A300 url(./bottom.gif) no-repeat bottom left;
39              }
40              
41              #msg p{
42                  padding:8px 14px;
43                  background: url(top.gif) no-repeat top left;
44              }
45              #reg{
46                  float:left;
47                  padding: 8px 14px;
48              }
49              
50              #find{
51                   float:right;
52                  padding: 8px 14px;        
53                  background: url(search.gif)    no-repeat 0 50%;    
54              }
55          </style>
56     </head>
57     <body>
58         <ul id="register">
59             <li id="reg">还没注册？现在就<a href="#">注册</a> </li>
60             <li id="find"><a href="#">搜索</a></li>
61         </ul>
62         <div id="msg">
63             <p>我只是试一试这种<a href="#">方法</a></p>
64         </div>
65         
66     </body>
67 </html>

书中还介绍了一种圆角边框的实现方法，但是我不推荐使用，对于不同分辨率的电脑，这种方法兼容性不好，所以就不在这里详细记录了。

一般情况下如果需要行可以扩展，则把背景分成上下两部分，中间过渡到同一种背景色，这样的话就可以达到效果。