好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

【笔记-前端】div+css排版基础,以及错误记录_html/css_WEB-ITnose

现在的网站对于前端的排版已经逐渐不使用 ,而是使用div+css。

使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html。

可是这种方式对于初学者来说可能不好理解,所以简单描述一下使用div+css排版基础。

下图是一个使用div+css排版的示例:

html和css:

body{font-size:20px;font-weight:bold;color:white;}

.back{background-color:gray;width:1000px;height:500px;}

.top{background-color:orange;width:500px;height:100px;margin:1% auto;}

.middle{background-color:yellow;width:500px;height:100px;margin:0 auto;}

.middle_a{background-color:red;width:30%;height:100%;margin:0 auto;float:left;}

.middle_b{background-color:green;width:38%;height:100%;margin:0 1%;float:left;}

.middle_c{background-color:blue;width:30%;height:100%;margin:0 auto;float:left;}

.bottom{background-color:purple;width:500px;height:100px;margin:1% auto;}

TOP

查看更多关于【笔记-前端】div+css排版基础,以及错误记录_html/css_WEB-ITnose的详细内容...

  阅读:34次