两列网页布局
两列网页布局实验
先将一个未运用浮动效果的网页结构写出来
<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>版权所有 © 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;}
CSS-- 多行多列布局结束
