<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的布局</title>
<style>
header,
main,
footer {
width: 1000px;
margin: 0 auto;
}
/* 设置头部 */
header {
height: 150px;
background-color: rgb(54, 59, 59);
}
/* 设置主体 */
main {
width: 1000px;
height: 400px;
background-color: #bfa;
margin: 10px auto;
}
nav,
article,
aside {
float: left;
height: 100%;
}
/* 设置左侧导航 */
nav {
width: 200px;
background-color: orange;
}
/* 设置中间内容 */
article {
width: 580px;
background-color: white;
margin: 0 10px;
}
/* 设置中间上面部分内容 */
.div1 {
width: 100%;
height: 195px;
background-color: rgb(197, 116, 157);
margin-bottom: 10px;
}
/* 设置中间下面部分内容 */
.div2 {
width: 100%;
height: 195px;
background-color: rgb(209, 180, 205);
}
.left,
.middle,
.right {
height: 100%;
float: left;
}
.left {
width: 150px;
background-color: rgb(218, 173, 28);
}
.middle {
width: 280px;
background-color: rgb(221, 145, 46);
}
.right {
width: 150px;
background-color: rgb(231, 93, 13);
}
/* 设置右侧内容 */
aside {
width: 200px;
background-color: pink;
}
/* 设置底部 */
footer {
height: 100px;
background-color: rgb(141, 72, 26);
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 创建主体 -->
<main>
<!-- 左导航 -->
<nav></nav>
<!-- 中间内容 -->
<article>
<div class="div1"></div>
<div class="div2">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!-- 创建底部 -->
<footer></footer>
</body>
</html>
扫一扫
2395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
