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>版权所有 © 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-- 多行多列布局结束