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

来源：互联网发布：战神诀坐骑进阶数据编辑：程序博客网时间：2024/06/02 00:25

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文件，然后用 引入即可！

代码如：

<!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="css/style.css" /></head><body><!--#include file="header.asp"--><div id="sidebar"><h1></h1><div></div></div><div id="content"><h1></h1><div></div></div><!--#include file="footer.asp"--></body></html>

但是在html中，是不支持这种方式的引入的，但是还是可以用来IFrame引入。

 <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>

你会看到一个外部引入的文件，但会发现有一个类似外框的东西将其包围，可使用：

 <iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>

但你会发现还会有点问题，就是背景色不同，你只要在引入的文件import.htm中使用相同的背景色也可以，但如果你使用的是IE5.5的话，可以看看这篇关于透明色的文章如果想引入的文件过长时不出现滚动条的话在import.htm中的body中加入scroll=no。

转载请注明出处：http://blog.csdn.net/xn4545945