2016-12-21
网站设计中，必须要设计一个布局，布局中一般都是剧中的，怎么样才能让DIV居中呢?如下可以实现：
*******************css************************************
* {
padding:0;
margin:0;
}
body {
width:900px;
margin:0 auto;
background:#fff;
}
*******************css************************************
这句话说明了，可以设置一个body来实现居中；
大家可以看一个实例，肯定会对网站建设的朋友有很多收获的：
* {
padding:0;
margin:0;
}
body {
width:900px;
margin:0 auto;
background:#fff;
}
#header {
height:100px;
background:url(../images/logo.jpg) no-repeat 20px 50%;
margin:0 0 10px 0;
}
#header #header_adv {
width:600px;
height:80px;
border:1px solid #ccc;
margin:10px 0 0 280px;
}
#nav {
height:30px;
line-height:30px;
background:#09f;
}
#nav ul {
list-style-type:none;
padding-left:40px;
padding-right:10px;
}
#nav ul li {
display:inline;
color:#fff;
}
#nav ul li a {
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#ffc;
text-decoration:underline;
}
#search {
height:30px;
line-height:30px;
background:#ffc;
margin:0 0 10px 0;
}
#adv {
width:320px;
height:200px;
border:1px solid #09f;
float:left;
margin-right:10px;
margin-bottom:10px;
}
#news {
width:320px;
height:200px;
border:1px solid #09f;
float:left;
margin-bottom:10px;
}
#subject {
width:233px;
height:200px;
border:1px solid #09f;
float:right;
margin-bottom:10px;
}
#main {
width:665px;
height:820px;
float:left;
}
div.content {
width:320px;
height:280px;
border:1px solid #09f;
float:left;
margin-right:10px;
margin-bottom:10px;
}
div.content h1 {
font-size:14px;
background:#09f;
color:#fff;
height:25px;
line-height:25px;
text-indent:10px;
}
div.right {
width:233px;
height:207px;
border:1px solid #09f;
float:right;
margin-bottom:10px;
}
div.right h1 {
font-size:14px;
background:#09f;
color:#fff;
height:25px;
line-height:25px;
text-indent:10px;
}
#footer {
clear:both;
height:100px;
border:1px solid #09f;
}
#footer h1 {
font-size:14px;
background:#09f;
color:#fff;
height:25px;
line-height:25px;
text-indent:10px;
}
p.over {
clear:both;
height:30px;
line-height:30px;
text-align:center;
}
#side {
width:233px;
float:left;
}
div.sidebar {
width:233px;
height:207px;
border:1px solid #09f;
margin-bottom:10px;
}
div.sidebar h1 {
font-size:14px;
background:#09f;
color:#fff;
height:25px;
line-height:25px;
text-indent:10px;
}
div.content2 {
width:320px;
height:280px;
border:1px solid #09f;
float:right;
margin-left:10px;
margin-bottom:10px;
}
div.content2 h1 {
font-size:14px;
background:#09f;
color:#fff;
height:25px;
line-height:25px;
text-indent:10px;
}
#list {
width:660px;
float:right;
}
#list ul {
list-style-type:none;
}
#list ul li {
border-bottom:1px dashed #ccc;
height:30px;
line-height:30px;
}
#list ul li a {
color:green;
text-decoration:none;
}
#list ul li a:hover {
color:#f60;
text-decoration:underline;
}
#list ul li em {
float:right;
font-style:normal;
color:#999;
}
#detail {
width:80%;
margin:0 auto;
}
#detail h1 {
font-size:20px;
color:green;
text-align:center;
}
#detail p {
line-height:180%;
padding-top:10px;
text-indent:20px;
}
*****************以上是css文件***************
下面对应的HTML语言：
<!--#include file="conn.asp"-->
<!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=gb2312" />
<title>大连网站建设网--内容管理系统</title>
<link rel="stylesheet" type="text/css" href="style/basic.css" />
</head>
<body>
<div id="header">
<div id="header_adv">广告</div>
</div>
<div id="nav">
<ul>
<li><a href="index.asp">主页</a></li>
<%
dim rs,sql
set rs = server.createobject("adodb.recordset")
sql = "select top 9 * from CMS_Nav where CMS_Sid=0 order by CMS_Sort asc"
rs.open sql,conn,1,1
'循环栏目
do while not rs.eof
%>
<li> | <a href="###"><%=rs("CMS_NavName")%></a></li>
<%
rs.movenext
loop
%>
</ul>
</div>
<div id="search">
搜索 | 搜索关键字
</div>
<div id="adv">
广告
</div>
<div id="news">
新推荐文章
</div>
<div id="subject">
新主题
</div>
<div id="main">
<div class="content">
<h1>栏目1</h1>
</div>
<div class="content">
<h1>栏目2</h1>
</div>
<div class="content">
<h1>栏目3</h1>
</div>
<div class="content">
<h1>栏目4</h1>
</div>
<div class="content">
<h1>栏目5</h1>
</div>
<div class="content">
<h1>栏目6</h1>
</div>
</div>
<div class="right">
<h1>新文章</h1>
</div>
<div class="right">
<h1>热门排行</h1>
</div>
<div class="right">
<h1>推荐排行</h1>
</div>
<div class="right">
<h1>在线投票</h1>
</div>
<div id="footer">
<h1>友情链接</h1>
</div>
<p class="over">版权所有 盗版可耻</p>
</body>
</html>
