DIV+CSS通用样式布局实例代码

一下是一个非常简单易懂的通用样式布局，希望对于刚开始接触DIV+CSS的同学有帮助。先看效果图：我们可以看出通常的页面布局有以下几个部分：头部、内容、底部，其中内容有左侧主显区和右侧边栏。下面贴出代码：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>DIV+CSS practice</title> <link href="css/common.css" rel="stylesheet" type="text/css" media="all" /> </head> <body>  <div id="head"> </div>   <div id="container">  <div id="content"> </div>   <div id="side"> </div>  </div>  <div class="clear"></div>  <div id="foot"> </div>  </body> </html> common.css样式文件： *{ margin:0; padding:0; } body{ background-color:gray; } .clear{ clear:both; } /*head*/ #head{ background-color:blue; height:150px; } /*container*/ #container{ background-color:red; width:960px; height:800px; margin:20px auto; } /*content*/ #content{ background-color:yellow; float:left; width:685px; height:100%; } /*side*/ #side{ background-color:green; float:right; width:255px; height:100%; } /*foot*/ #foot{ background-color:white; height:150px; width:960px; margin:20px auto; } 大致布局很简单了，首先要有这个大局观，然后再完善其中的细节，学习PHP或者其他语言同样如此，首先要有一个思想，知道每一步做什么，怎么做，这样才能把知识灵活运用。

　　推荐阅读

　　浮动的ul背景及图片的边框的使用

今天遇到的问题整理： 1.ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。解决方法是给外层div加上cle>>>详细阅读

本文标题：DIV+CSS通用样式布局实例代码

地址：http://www.17bianji.com/kaifa2/CSS/16495.html

1/2 1