CSS--两列网页布局，三列布局和多行多列布局

两列网页布局

两列网页布局实验

先将一个未运用浮动效果的网页结构写出来

<style>header{/* 给页眉设置宽高和样式 */width:1000px;height: 40px;background-color: gray;border: 3px brown solid;margin-bottom: 5px;}article{width:1000px;height: 600px;background-color: grey;border: 3px yellow solid;}footer{/* 给页脚设置宽高和样式 */width:1000px;height: 40px;background-color: gray;border: 3px brown solid;margin-top: 5px;}#one{width:600px;height: 500px;background-color: greenyellow;border: 3px black solid;}#two{width:250px;height: 350px;background-color: greenyellow;border: 3px black solid;}</style><body><header></header><article><section id="one"></section><section id="two"></section></article><footer></footer>
</body>

这是一个还没有运用浮动效果的一个简单网页结构，具备了一个网页的基本结构，页眉，页脚，内容盒子，和侧边栏盒子。

用浮动效果将内容盒子和侧边栏盒子移动成两列网页样式

#one{width:600px;height: 500px;background-color: greenyellow;border: 3px black solid;/* 左浮动 */float: left;/* 上，左外边距调整 */margin-top: 40px;margin-left: 40px;}#two{width:250px;height: 350px;background-color: greenyellow;border: 3px black solid;/* 右浮动 */float: right;/* 下，右外边距调整 */margin-right: 50px;margin-top: 40px;}

就这样一个简单的两列式网页就诞生了

两列网页布局习题

简单的一个两列网页布局我们已经学会了，那么如果想要做出如下图一样效果,要怎么做呢？

<style>nav ul{height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/background-color: aquamarine;}nav ul li{/* 右外边距设置 */margin-right: 20px;/* 导航栏内容左浮动 */float:left;}#contact{width: 220px;height: 160px;background-color: pink;border: 2px black solid;/* 用固定定位制作一个浮动的小盒子 */position: fixed;/* 向左偏移至距离浏览器窗口顶端1100px */left:1100px;/* 垂直向上偏移至距离浏览器窗口顶端500px */top:500px;}section{/* width: 100%; */background-color: rgb(228, 222, 229);border: 20px black solid;}article{/* 宽和高的单位可以用px 也可以用%。由于在这里用px为单位比较繁琐，所以用了%为单位 */width: 70%;height: 500px;background-color: rgb(240, 199, 199);border: 2px black solid;float: left;}aside{width: 25%;height: 500px;background-color: rgb(213, 244, 213);border: 2px black solid;/* 左浮动 */float: right;margin-right: 2%;}footer{width: 100%;height: 10%;background-color: rgb(243, 192, 255);border: 2px black solid;}</style>
</head>   <body>  <header>  <h1 align="center">第五人格</h1>  <p align="center">欢迎来到: <ins>第五人格</ins></p>  <hr> <nav>  <ul type="none">  <li><a href="#">战绩</a></li>  <li><a href="#">排位</a></li>  <li><a href="#">匹配</a></li>  <li><a href="#">归宿</a></li>  </ul>  </nav>  </header>  <hr>  <main>  <section>  <article>  <h3>文章标题</h3>  <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  <br><br><br><img src="../CSS常用属性/第五图片.png" alt="文章配图" width="200" height="200">  <p>想了解第五人格：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  </article>  <aside>  <h3>侧边栏</h3>  <p>侧边栏内容，如快速链接、广告等。</p>  <table border="1">  <tr>  <th>角色</th>  <th>链接</th>  </tr>  <tr>  <td>求生者</td>  <td><a href="角色A详情页.html">专业A详情</a></td>  </tr>  <tr>  <td>监管者</td>  <td><a href="角色B详情页.html">专业B详情</a></td>  </tr>  </table>  </aside>  <div style="clear: both;"></div></section>  <section id="contact">  <h4>联系我们</h4>  <form>  姓名:<input type="text" id="name" name="name"><br>  邮箱:<input type="email" id="email" name="email"><br>  <input type="submit" value="提交">  </form>  </section>  </main>  <hr>  <footer>  <p>版权所有 &copy; 2024 第五人格官方</p>  </footer>  </body>  </html>

就这样通过浮动效果和固定定位我们就做出了一个两列式的网页啦！

三列网页布局

三列布局和两列布局非常相似（如下图）：

我们来尝试用浮动的方法来实现上图的三列布局吧

三列布局实验

首先我们先把三列布局的基本结构写好

<body><header>网页页眉</header><section class="clear_ele"><div id="div1">左侧边栏</div><div id="div2">右侧边栏</div><div id="div3">中间主区域</div></section><footer>网页页脚</footer>
</body>

对三列布局的骨架标签进行一个样式的设置，此时的盒子呈正常文档流排列

<style>/* 给页眉设置宽高，背景颜色和样式 */header{width: 100%;height: 30px;background-color: orange;border: 2px black solid;text-align: center;}#div1{width: 10%;height: 800px;background-color: red;border: 3px black solid;}#div2{width: 10%;height: 800px;background-color: blue;border: 3px black solid;}#div3{width: 75%;height: 800px;background-color: green;
border: 3px black solid;}footer{width: 100%;height: 30px;background-color: orange;border: 2px black solid;text-align: center;}
</style>

其次通过浮动来移动盒子

盒子1向左移动，盒子2向右移动。

#div1{width: 10%;height: 800px;background-color: red;border: 3px black solid;float:left;/* 盒子1向左浮动 */}#div2{width: 10%;height: 800px;background-color: blue;border: 3px black solid;float:right;/* 盒子2向右浮动 */}

两个盒子一左一右，而盒子3向上填补浮层，但是盒子3的一部分被盒子1给覆盖住了，这时如果我们想要将盒子3完全展现出来并让盒子与盒子之间留有空隙，有两个方法：

1. 通过浮动，将盒子3进行左浮动，此时盒子3的左边缘和盒子1的右边缘紧贴着，如果想让盒子与盒子之间留有空隙，我们还需对盒子进行一个外边距的设置。

2. 可以直接对盒子进行一个外边距的设置，外边距值的设置要大于左右两个盒子本身的宽度。

注：两种方法达成的效果是一样的

 #div3{/* 第一种方法 */width: 75%;height: 800px;background-color: green;/* 注意：中间盒子的左右外边距，最好大于左右侧边栏的宽度 */float: left;margin-left: 2%;margin-right: 2%;border: 3px black solid;}#div3{/* 第二种方法 */width: 75%;height: 800px;background-color: green;/* 注意：中间盒子的左右外边距，最好大于左右侧边栏的宽度 */margin-left: 12%;margin-right: 12%;border: 3px black solid;}

最后，为了防止父盒的塌陷问题，在代码的最后加上一个伪元素，然后用clear所有清除浮层的影响。（为了让大家看清楚这个伪元素的存在，这里对其设置了边框样式，可以从下图里看到一个紫色边框的元素）

.clear_ele::after{content: "";  /* 这个伪元素的内容属性必须有 */display: block;border: 6px purple dashed;clear: both;}

CSS--三列布局就完成了

多行多列网页布局

多行多列布局是一种常见的网页布局方式，通常用于展示大量信息或分割页面内容。它将页面划分为多行和多列的网格，每个网格可以容纳不同的内容。

多行多列布局实验

多行多列布局基本结构

做一个内含有八个盒子的多行多列布局，先用有序标签进行一个大概的框架

<body><section class="container"><ul class="clear_ele">  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></section>
</body>

给父盒设置宽高和样式

<style>/* 防止父盒塌陷 */.clear_ele::after{content: "";  /* 这个伪元素的内容属性必须有 */display: block;clear: both;}/* 父盒样式设置 */.container{width: 50%;background-color: gray;border: 6px black solid;}
</style>

给有序标签中的ul元素的外边距和内边距的值设为0 ，确保一致的页面布局。

然后对有序标签中的 li 元素设置样式和外边距的距离，再通过浮动来得到想要的排列。

article ul{margin: 0;padding: 0;}.container ul li{/*  用于设置列表项（li元素）的样式。none：不显示标记符号*/list-style: none;width: 20%;height: 150px;background-color: pink;border: 2px red solid;margin-right: 2%;margin-bottom: 2%;float: left;}