思洋互动网站建设学前班

第二部分、DIV CSS网页布局之样式表

我们采用直接把样式写在head里面的方式，较为简单也方便演示。首先我们看到除了头部的登陆状态，其余部分都是居中对齐的，并且发现字体是Arial，默认文字大小为13px。我们在head区域增加以下样式：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. body{  
2. font-family:Arial,sans-serif;  
3. font-size:13px;  
4. text-align:center;  
5. margin-top:3px;  
6. }  
7. a:link{  
8. color:#00C;  
9. }  
10. a:visited{  
11. color:#551a8b;  
12. } 

这里使用了px这个绝对单位。关于绝对单位和相对单位，网上相关文章很多，并且也一直是Web前台的热门话题，本文简单起见，直接使用绝对单位。

然后我们逐步增加其他样式：

1. #login{/*这是头部的登陆状态*/  
2. text-align:right;  
3. }  
4. #stype{/*这就是上文提到的那5项搜索类型*/  
5. margin-bottom:4px;  
6. }  
7. #stypespan{/*此处增加了无意义的span*/  
8. padding:06px;  
9. } 

之后的搜索表单，我们碰到了样式化的难点，首先作为搜索的size为55的输入框从布局上来说是绝对居中的，而右侧高级搜索那三项的宽度加上输入框在内并不是绝对居中。也就是说视觉上，高级搜索那三项偏右了。如下图所示：

这里我们使用绝对定位的方法来处理它（在HTML中将高级搜索这三项的内容放入form之内）： 

1.  
2. #search{/*这是搜索表单*/  
3. margin:0auto;  
4. width:400px;  
5. position:relative;  
6. }  
7. #more{  
8. width:4em;/*4个汉字宽，这样可以形成类似列表的效果*/  
9. position:absolute;  
10. top:0;  
11. right:-4.5em;  
12. } 

最后我们加上底部链接和版权信息部分的样式： 

1.  
2. #ft{  
3. margin:54pxauto16px;  
4. } 

在浏览器里面预览并且微调一下各个数值，这样就完成了Google首页的制作。
广州网站建设,网站建设,广州网页设计,广州网站设计