Home >  > 一个简单的网页布局代码

一个简单的网页布局代码

0

先来看看效果图:

Snap18562

Snap18561

再来看源代码(下面的源代码其实是一个标准的XHTML模板)

<!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>
<title>This is title</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="keywords" />
<meta name="description" content="description" />
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript" src="JS dir"></script>
</head>
<body>

<div id='header'>
    header
</div>

<div id='list'>
	list
</div>

<div id='user'>
	user
</div>

<div id='pics'>
	pics
</div>

<div id='footer'>
	footer
</div>

</body>
</html>

再来看CSS文件。

@CHARSET "UTF-8";
*{
	padding:0;
	margin:0;
}
body{
	width:960px;
	margin:0 auto;
	background:#FFF
}
#header{
	width:auto;
	height:150px;
	border:2px solid #ccc;
	margin:10px 0;
}
#list{
	width:600px;
	height:514px;
	border:2px solid #ccc;
	float:right;
}
#user{
	width:340px;
	height:250px;
	border:2px solid #ccc;
	float:left;		
}
#pics{
	width:340px;
	height:250px;
	border:2px solid #ccc;
	float:left;
	margin:10px 0 0 0;
	
}
#footer{
	width:auto;
	height:150px;
	text-align:center;	
}

如果要在底部显示边框,则需要加入以下代码:

border:2px solid #ccc;
margin:534px 0 0 0;

原载:蜗牛博客
网址:http://www.snailtoday.com
尊重版权,转载时务必以链接形式注明作者和原始出处及本声明。

本文暂无标签

发表评论

*

*