时间过的真快,又是一个学期末了,这学期除了做了许多网站还是做了许多网站,再多一些就是花钱玩了很多Linux VPS,幸好是由网站的收入能够支撑。否则就是入不敷出了……div+css的总结,我想就写两到三篇吧,这次的总结回顾对自己的帮助还是蛮大的。突然觉得自己之前写过的网站都得进行一些小的修改,也对网站优化中div+css的布局有了一些更深的认识。今天总结的是div+css布局中基本的css属性,在写这个之前,先把一些零碎的东西写一下:

1.div+css标准化网页布局,这样构造的布局,div承载内容,css控制样式,这样既要让内容和样式分离,又要有联系。

2.如果页面比较多时,只需要修改css样式,就可以让使用相同css的html页面同时修改。

3.div构造的页面有利于搜索引擎,利用div构造的页面,可以让搜索引擎蜘蛛绕过css样式,直接到网页中搜索内容。相比table写的网页,优化效果更佳。

4.网页更换皮肤,如果采用表格布局网页,这样更换起来比较复杂,对搜索引擎不好。如果采用div+css,这样只需要更换css样式就可以。

5.下面是是一些构建div+css网页时最基本的一些css属性:

(1)margin  用来控制元素的外边据,与外边界上下左右的距离。具体如下:

  1. <html>   
  2. <head>    
  3. <style>   
  4. <!–   
  5.     .bianju {   margin-left:10px;    
  6.         margin-top:40px;   
  7.         margin-bottom:40px;   
  8.          margin-right:50px;}   
  9. //–>   
  10. </style>   
  11. </head>   
  12. <body>   
  13. <p>aaaaa</p>   
  14. <p class=“bianju”>bbbbbbbb</p>   
  15. </body>   
  16. </html>  

上面的.bianju可以用一行来代替,写成:

.bianju { margin: 10px 40px 40px 50px; }  分别指定,上右下左的距离。如果是用来控制整个网页时,一般写成auto,如下:

  1. .bianju {   
  2. margin-left:auto;    
  3. margin-top:auto;   
  4. margin-bottom:auto;   
  5. margin-right:auto;}  

(2)padding 用来控制内边距

如下:

  1. <html>   
  2. <head>    
  3. <style>   
  4. <!–   
  5.     .td { padding-left:4cm; padding-top:5cm; padding-right:6cm;padding-bottom:7cm;}   
  6. //–>   
  7. </style>   
  8. </head>   
  9. <body>   
  10. <table border=“1″>   
  11. <tr>   
  12.     <td class=“td”>tttttttttttttt</td>   
  13.     </tr>   
  14. </table>   
  15. </body>   
  16. </html>  

这样就用来控制字符ttttttt距左上右下分别是4cm、5cm、6cm、7cm。

(3)float :left/right/none 指定向左右对齐,这是漂浮的属性

(4)clear:none/left/right/both

清除指定元素,是否允许元素漂浮在周围。

比如,在网页设计时,经常需要设置多个元素并列排列,往往用float指定靠左靠右对齐,假如采用clear:left 就是控制其左边不能有浮动的元素,如果为right,不允许右边有浮动元素,both是两边不能有浮动元素,none允许有浮动元素

DIV+CSS回顾总结(二)

发表评论

电子邮件地址不会被公开。 必填项已用*标注