div+csd页面布局
时间: 2023-07-28 17:07:53 浏览: 146
DIV+CSS 页面布局,是一种常用的网页布局方式,可以通过DIV元素和CSS样式来实现网页的各种布局效果。下面是一个简单的DIV+CSS页面布局的示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV+CSS页面布局示例</title>
<style type="text/css">
/*清除默认样式*/
*{margin:0;padding:0;}
/*设置页面背景颜色*/
body{background-color:#F5F5F5;}
/*设置容器样式*/
#container{width:980px;margin:0 auto;}
/*设置页眉样式*/
#header{height:80px;background-color:#333;color:#FFF;text-align:center;line-height:80px;}
/*设置主体内容区样式*/
#content{background-color:#FFF;padding:20px;}
/*设置页脚样式*/
#footer{height:50px;background-color:#333;color:#FFF;text-align:center;line-height:50px;}
</style>
</head>
<body>
<!--容器-->
<div id="container">
<!--页眉-->
<div id="header">
<h1>DIV+CSS页面布局示例</h1>
</div>
<!--主体内容区-->
<div id="content">
<p>这是一个DIV+CSS页面布局的示例。</p>
</div>
<!--页脚-->
<div id="footer">
<p>版权所有 © 2021</p>
</div>
</div>
</body>
</html>
```
在上述示例中,我们使用了DIV元素来创建容器、页眉、主体内容区和页脚等元素,并使用CSS样式来设置它们的外观效果。其中,容器元素的宽度为980像素,居中显示;页眉和页脚元素的背景颜色为黑色,文字颜色为白色,高度分别为80像素和50像素,居中显示;主体内容区元素的背景颜色为白色,内边距为20像素。通过这种方式,我们可以灵活地控制网页的布局效果,从而实现各种复杂的网页布局。
阅读全文