css+div基础界面布局
时间: 2024-05-31 09:05:28 浏览: 92
css+div 布局
CSS和DIV是网页设计中常用的两种技术,它们的主要作用是实现网页的布局。其中CSS负责控制页面的样式,而DIV则负责页面的结构。下面是一个基础的CSS+DIV布局示例:
HTML代码:
```html
<body>
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">底部</div>
</body>
```
CSS代码:
```css
#header {
height: 80px;
background-color: #f0f0f0;
text-align: center;
line-height: 80px;
}
#content {
height: 400px;
background-color: #dcdcdc;
}
#footer {
height: 60px;
background-color: #f0f0f0;
text-align: center;
line-height: 60px;
}
```
这个布局将页面分为头部、内容和底部三个部分,其中头部和底部高度固定,内容部分高度自适应。在CSS中,通过设置不同的属性来实现不同的效果,例如height属性控制元素的高度,background-color属性设置元素的背景色,text-align属性设置元素中文字的对齐方式,line-height属性设置元素中文字的行高等。
阅读全文