时间过的真快,又是一个学期末了,这学期除了做了许多网站还是做了许多网站,再多一些就是花钱玩了很多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 用来控制元素的外边据,与外边界上下左右的距离。具体如下:
- <html>
- <head>
- <style>
- <!–
- .bianju { margin-left:10px;
- margin-top:40px;
- margin-bottom:40px;
- margin-right:50px;}
- //–>
- </style>
- </head>
- <body>
- <p>aaaaa</p>
- <p class=“bianju”>bbbbbbbb</p>
- </body>
- </html>
上面的.bianju可以用一行来代替,写成:
.bianju { margin: 10px 40px 40px 50px; } 分别指定,上右下左的距离。如果是用来控制整个网页时,一般写成auto,如下:
- .bianju {
- margin-left:auto;
- margin-top:auto;
- margin-bottom:auto;
- margin-right:auto;}
(2)padding 用来控制内边距
如下:
- <html>
- <head>
- <style>
- <!–
- .td { padding-left:4cm; padding-top:5cm; padding-right:6cm;padding-bottom:7cm;}
- //–>
- </style>
- </head>
- <body>
- <table border=“1″>
- <tr>
- <td class=“td”>tttttttttttttt</td>
- </tr>
- </table>
- </body>
- </html>
这样就用来控制字符ttttttt距左上右下分别是4cm、5cm、6cm、7cm。
(3)float :left/right/none 指定向左右对齐,这是漂浮的属性
(4)clear:none/left/right/both
清除指定元素,是否允许元素漂浮在周围。
比如,在网页设计时,经常需要设置多个元素并列排列,往往用float指定靠左靠右对齐,假如采用clear:left 就是控制其左边不能有浮动的元素,如果为right,不允许右边有浮动元素,both是两边不能有浮动元素,none允许有浮动元素