DIV+CSS写网站基本框架小结-HTML教程-爱易网页

DIV+CSS写网站基本框架小结

日期：2014-05-17　浏览次数：20691 次

DIV+CSS写网站基本框架总结

DIV和CSS能写出千变万化的网页样式。很久很久以前就学过了，但感觉还是有必要小记一下！

先来个基本框架

<!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>
</head>
<body>
	
</body>
</html>

CSS用一个单独的文件来存放，不成文规定是放在CSS目录下，命名为style.css。

在head中加入

<link rel="stylesheet" type="text/css" href="css/style.css" />

一般网站会分为4部分：header，sidebar，content，footer

于是写上4个div标签

<div id="header">

</div>
<div id="sidebar">
	<h1></h1>	
	<div>
		
	</div>
</div>
<div id="content">
	<h1></h1>	
	<div>
		
	</div>
</div>
<div id="footer">

</div>

一般网站都会在头部加上导航来，用ul->li来做的。

<div id="header">
	<ul>
		<li><a href="index.asp">首页</a></li>
		<li><a href="reg.asp">注册</a></li>
		<li><a href="blog.asp">博友</a></li>
		<li><a href="photo.asp">相册</a></li>
		<li><a href="photo.asp">风格</a></li>
	</ul>
</div>

尾部则会加上版权信息，联系方式等

<div id="footer">
	<p>友情链接 | 关于我们 | 版权声明 | 广告赞助 | 招贤纳士</p>	
	<p>CopyRight (C) 2012 blog.csdn.net/xn4545945 All Right Reseved.</p>	
</div>

接下来就是用CSS来设置4个div的排列方式了。

先设置一下全局的样式：

* {
	margin:0;
	padding:0;
}
body {
	font-size:14px;
	color:#333;
	width:900px;
	margin:10px auto;
	position:relative;
	background:#fff;
}
ul {
	list-style-type:none;
}

再设置导航栏，使其在靠近右下角的地方显示：

#header {
	width:900px;
	height:200px;
	background:url(../images/logo.jpg) no-repeat 30px 30px;
	border:1px solid #ccc;
	margin-bottom:10px;
}
#header ul {
	margin-top:160px;
	margin-left:auto;
	width:430px;
}
#header ul li {
	float:left;
	width:70px;
	height:30px;
}
#header ul li  a {
	color:#333;
	text-decoration:none;
}

接下来设置sidebar，让他与content内容并排，在content的左侧。sidebar与content中一般有h1和div标签，h1用来显示标题，div用来显示内容。

#sidebar {
	width:300px;
	height:600px;
	float:left;
	margin-bottom:10px;
}
#sidebar h1 {
	background:#ccc;
	height:25px;
	line-height:25px;
	font-size:14px;
	text-indent:10px;
}
#sidebar div {
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	height:250px;
}

content的css为：

#content {
	width:580px;
	height:600px;
	float:right;
	margin-bottom:10px;
}
#content h1 {
	background:#ccc;
	height:25px;
	line-height:25px;
	font-size:14px;
	text-indent:10px;
}
#content div {
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	height:550px;
}

接下来是footer：

#footer {
	width:900px;
	height:60px;
	clear:both;
	border-top:1px solid #999;
}
#footer p {
	text-align:center;
	padding-top:10px;
}

看看写完的效果吧！(图片是后来加上的)

还有一个问题就是可以抽取公共部分!

一般在ASP中可以讲header与footer公共部分抽取出来，只需要把footer的div部分剪切出来，保存成htm文件，然后用

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

DIV+CSS写网站基本框架小结

相关资料更多>

推荐阅读更多>