基础的网页布局（浮动定位+文档流方式）
3.1案例图
3.2源代码+部分注释
<!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>
* {
/* 一般用于对浏览器的格式设置进行初始化 防止对后续自己的格式设置产生影响 */
padding: 0;
margin: 0;
}
body {
/* 对整个body区域的属性进行设置 */
font-size: 14px;
}
#container {
width: 1000px;
height: 500px;
/* background-color: cadetblue; */
margin: 0 auto;
/* margin设置为auto表示居中显示container区域 */
}
#header {
/* 此处可以不设置width的值，因为它会自动上一级标签的属性 例如此处会自动继承container中的 width属性值 */
height: 100px;
background-color: cornflowerblue;
line-height: 100px;
/* 此处设置line-heigth主要是为了垂直居中显示文本 */
}
.aside {
height: 280px;
background-color: darksalmon;
float: left;
width: 50px;
line-height: 280px;
}
#aside1 {}
#content {
height: 280px;
width: 880px;
background-color: gold;
margin-left: 10px;
float: left;
line-height: 280px;
}
#aside2 {
margin-left: 10px;
}
#nav {
height: 40px;
background-color: darkgrey;
line-height: 40px;
}
#footer {
/* 此处可以不设置width的值，因为它会自动上一级标签的属性 例如此处会自动继承container中的 width属性值 */
height: 80px;
background-color: darkgreen;
clear: both;
line-height: 80px;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<!-- 网页的头部 -->
<p>网页头部</p>
</div>
<div id="nav">
<!-- 导航栏设置 -->
<p>导航栏部分</p>
</div>
<div id="aside1" class="aside">
<!-- 边栏1 -->
<p>边栏1</p>
</div>
<div id="content">
<!-- 主要内容部分 -->
<p style="font-size: 25px;">主要内容区域</p>
</div>
<div id="aside2" class="aside">
<!-- 边栏2 -->
<p>边栏2</p>
</div>
<div id="footer">
<!-- 页脚部分 -->
<p>页脚部分</p>
</div>
</div>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「_xwh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44174803/article/details/121067133
|
