基础的网页布局（浮动定位+文档流方式）

admin · 2022-1-17 15:20:45

基础的网页布局（浮动定位+文档流方式）
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">
         
         <p>边栏1</p>
      </div>
      <div id="content">
         
         <p style="font-size: 25px;">主要内容区域</p>
      </div>
      <div id="aside2" class="aside">
         
         <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

		自动登录	找回密码
密码			立即注册

基础的网页布局（浮动定位+文档流方式）

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网