本文通过一个具体的HTML实例介绍了网页的基本结构和布局方式，包括头部、主体及尾部等部分的设计思路。主体内容分为左右两栏，右侧占据大部分空间并包含主要内容，左侧为辅助信息区域。
<html>
<head>
<style type="text/css">
body{
background:#fff;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
color:#fff;
width:990px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #356AA0;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 990px;
} #mainbg{
width:990px;
padding: 0px;
background: #FFFF88;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 674px;
background: #CDEB8B;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #C3D9FF;
width: 300px;
text-align:left;
}
#footer{
color:#fff;
clear:both;
width:990px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #356AA0;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p></p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p></p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
