divcss网页布局模版
时间: 2023-08-07 20:39:05 浏览: 63
下面是一个基本的 div+css 网页布局模板,你可以根据自己的需要进行修改和扩展:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<style>
/* 页面布局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
background-color: #f5f5f5;
}
#header {
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
font-size: 24px;
}
#main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
#sidebar {
width: 200px;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
}
#content {
flex: 1;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
#footer {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="header">网页头部</div>
<div id="main">
<div id="sidebar">侧边栏</div>
<div id="content">主要内容</div>
</div>
<div id="footer">网页底部</div>
</body>
</html>
```
上述模板中,网页布局采用了 flex 布局,页面分为 header、main、footer 三个部分,main 又分为 sidebar 和 content 两个部分,可以根据实际需求进行修改和扩展。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)