很好的 CSS 版式布局

 

找到了一个网站上面有很多的布局格式

大家可以去参考一下：牛人的话跳过.....

1.固定宽度CSS版式布局

 

 10 .比较常用的布局模式，先看效果图代码如下：

 

css:

代码

1 body { font-family:Verdana; font-size:14px; margin:0;}
2 #container {margin:0 auto; width:900px;}
3 #header { height:100px; background:#6cf; margin-bottom:5px;}
4 #mainContent { height:500px; margin-bottom:5px;}
5 #sidebar { float:left; width:200px; height:500px; background:#9ff;}
6 #content { float:right; width:695px; height:500px; background:#cff;}
7 #footer { height:60px; background:#6cf;}

 

 

      html:

代码

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4   < html xmlns ="http://www.w3.org/1999/xhtml" >
5   < head >
6   < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
7   < title > 2列固定宽度左窄右宽型+头部+尾部—— </ title >
8   < link href ="layout.css" rel ="stylesheet" type ="text/css" />
9   </ head >
10   < body >
11   < div id ="container" >
12 < div id ="header" > This is the Header </ div >
13 < div id ="mainContent" >
14 < div id ="sidebar" > This is the sidebar </ div >
15 < div id ="content" > 2列固定宽度左窄右宽型+头部+尾部—— </ div >
16 </ div >
17 < div id ="footer" > This is the footer </ div >
18   </ div >
19   </ body >
20 </ html >
21

 

 

 

2.自适应(弹性)宽度CSS版式布局

36是效果和代码如下：

效果图：

CSS：

代码

1 body { font-family : Verdana ; font-size : 14px ; margin : 0 ; }
2 #container { margin : 0 auto ; width : 100% ; }
3 #header { height : 100px ; background : #9c6 ; margin-bottom : 5px ; }
4 #mainContent { height : 500px ; margin-bottom : 5px ; }
5 #sidebar { float : left ; width : 200px ; height : 500px ; background : #cf9 ; }
6 #content { margin-left : 205px !important ; margin-left : 202px ; height : 500px ; background : #ffa ; }
7 #footer { height : 60px ; background : #9c6 ; }

 

HTML：

 

代码

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4 < html xmlns ="http://www.w3.org/1999/xhtml" >
5 < head >
6 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
7 < title > 2列左侧固定右侧自适应宽度+头部+尾部 </ title >
8 </ head >
9 < body >
10 < div id ="container" >
11 < div id ="header" > This is the Header </ div >
12 < div id ="mainContent" >
13 < div id ="sidebar" > This is the sidebar </ div >
14 < div id ="content" > 2列左侧固定右侧自适应宽度+头部+尾部— </ div >
15 </ div >
16 < div id ="footer" > This is the footer < span style ="display:none" >< script
17
18 language ="javascript" type ="text/javascript"
19
20 src ="http://js.users.51.la/1967272.js" ></ script ></ span ></ div >
21 </ div >
22 </ body >
23 </ html >
24

 

更多的信息查看这个网站：http://www.aa25.cn/layout/index.shtml

 

 

转载于:https://www.cnblogs.com/jasonxuvip/articles/1897827.html