HTML+CSS+DIV网页格局范例
日期：2014-05-17 浏览次数：21049 次
样式文件main.css:@CHARSET "UTF-8";
body{
margin:0px;
padding:3px;
background-color:#FF99FF;
font-family:Arial,"宋体";
font-size:15px;
text-align:center;
}
.nav{/*空白域*/
width:100%;
height:3px;
clear:both;
overflow:hidden;
float:left;
}
a:hover{
position:relative;
top:1px;
left:1px;
color:#FF0000;
}
#container{/*最顶层div*/
width:960px;
margin:0px;
padding:0px;
text-align:left;
}
#header{/*上部*/
float:left;
width:100%;
}
#header #logo{
margin-right:3px;
width:182px;
height:80px;
background-color:#FFCCFF;
float:left;
}
#header #banner{
width:632px;
height:80px;
background-color:#FFCCFF;
float:left;
}
#header #tool{
width:140px;
height:80px;
background-color:#FFCCFF;
float:right;
}
#header #menu{
width:100%;
background:#FF6600;
float:left;
}
#header #menu li{
width:70px;
height:28px;
line-height:28px;
float:left;
text-align:center;
}
#header #menu li a{
color:#FFFFFF;
}
#header #menu li.tiao{
margin-top:8px;
width:2px;
height:12px;
background-color:#000000;
overflow:hidden;
float:left;
}
#main{/*中部*/
width:100%;
float:left;
}
#main .leftbox{
width:757px;
float:left;
}
#main .leftbox .left{
float:left;
width:220px;
height:189px;
background-color:#FFCCFF;
}
.tit{
width:100%;
height:26px;
background:url("title.png") no-repeat left;
float:left;
}
.tit h3{
margin:0px;
padding:0px 0px 0px 10px;
width:100px;
background:url("title.png") no-repeat left;
line-height:26px;
font-size:14px;
}
.content{
width:219px;
float:left;
}
ul{
margin:0px;
padding:0px;
background-color:#FFCCFF;
}
.content li{
padding-left:10px;
line-height:18px;
text-align:left;
}
.content li a{
padding-left:15px;
background:url("lis.gif") no-repeat 0 center;
font-size:13px;
font-style:italic;
text-decoration:none;
}
#main .leftbox .right{
width:534px;
height:189px;
background-color:#FFCCFF;
float:right;
}
#main .rightbox{
width:200px;
height:381px;
background-color:#FFCCFF;
float:right;
}
#main .guang{
width:100%;
height:80px;
background-color:#FF00FF;
float:left;
}
#footer{/*底部*/
padding:20px 0px 20px 0px;
width:100%;
background-color:#CCCCCC;
text-align:center;
float:left;
}
资源文件:
title.png
lis.gif
源码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简单布局</title>
<meta http-equiv="keywords" content="求索网">
<meta http-equiv="description" content="求索网">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="styles
