DIV＋CSS网页布局实例_网页布局入门实例
程序员文章站
2022-03-01 12:40:38
...
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习、第一种可能是你还没有理解CSS处理页面的原理、在你考虑你的页面整体表现效果前、你应当先考虑内容的语义和结构、然后再针对语义、结构添加CSS、下面给大家提供一个简单的例子
index.html代码
<html>
<head>
<title>DIV+CSS简单的页面布局示例</title>
<link rel="stylesheet" href="class.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo" class="bgcolor">LOGO</div>
<div id="banner">
<div id="left" class="bgcolor">BANNER1</div>
<div id="right" class="bgcolor">BANNER2</div>
</div>
</div>
<div class="nav"> </div>
<div id="menu" class="bgcolor">水平导航条</div>
<div class="nav"> </div>
<div id="content">
<div class="left_box border">栏目（一）</div>
<div class="right_box border">栏目（二）</div>
<div class="nav"> </div>
<div class="left_box">
<div class="left border">栏目（三）</div>
<div class="right border">栏目（四）</div>
</div>
<div class="right_box">
<div class="left border">栏目（五）</div>
<div class="right border">栏目（六）</div>
</div>
</div>
<div id="sidebar">
<div class="bar border">栏目（七）</div>
<div class="nav"> </div>
<div class="bar border">栏目（八）</div>
<div class="nav"> </div>
<div class="bar border">栏目（九）</div>
</div>
<div class="nav"> </div>
<div id="footer" class="bgcolor">页脚</div>
</div>
</body>
</html>
class.css代码
/* CSS Document */
body{
margin:0;
padding:0;
text-align:center;
font:12px Arial,宋体;
}
.border{
border:1px solid #888;
}
.bgcolor{
background:#DDD;
}
#container{
width:960px;
margin:0 auto;
}
#header{
float:left;
width:100%;
}
#logo{
float:left;
width:200px;
height:80px;
}
#banner{
float:right;
width:750px;
}
#banner #left{
float:left;
width:540px;
height:80px;
}
.nav{
float:left;
height:10px;
width:100%;
overflow:hidden;
clear:both;
}
#banner #right{
float:right;
width:200px;
height:80px;
}
#menu{
float:left;
width:100%;
height:30px;
}
#sidebar{
float:right;
width:200px;
height:410px;
}
#sidebar .bar{
float:left;
width:100%;
height:130px;
}
#content{
float:left;
width:750px;
}
#content .left_box{
float:left;
width:370px;
height:200px;
}
#content .right_box{
float:right;
width:370px;
height:200px;
}
#content .left{
float:left;
height:200px;
width:180px;
}
#content .right{
float:right;
height:200px;
width:180px;
}
#footer{
float:left;
width:100%;
height:60px;
}
本文只讲述最基本的布局、在具体开发实践中可能会遇到浏览器兼容性等其他问题、遇到细节问题请自行百度解决、解决的多了经验就积累起来了