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>
在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文件,然后用 <!--#include file="footer.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="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