您的位置：首页 > Web前端 > CSS

HTML的DIV+CSS基础排版方式

2011-04-27 21:49 465 查看
把分割线之后的代码复制到dreamweaver新建一个html文件,在“代码”视图保存，预览可见效果，注意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>
<style type="text/css">
<!--
#header {
background-color: #00FFFF;
height: 120px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#body #right {
background-color: #0033FF;
float: right;
height: 400px;
width: 500px;
}
#body #left {
background-color: #CC9966;
float: left;
height: 400px;
width: 300px;
}

#footer {
background-color: #00CCFF;
height: 80px;
width: 800px;
margin-right: auto;
margin-left: auto;
clear: both;
}
-->
</style>
</head>

<body>
<div id="header">我是头</div>

<div id="body">

<div id="right">我在右边</div>
<div id="left">我在左边</div>

</div>

<div id="footer">我是脚</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航