CSS中常见的两列布局、三列布局、百分比和多行多列布局！
目录
# 实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、<Flexbox>和<Grid>布局。#
一、两列布局
1、前言：
- 两列布局都有固定的长度，从内容上区分主要内容和侧边栏。页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。
- container又包含mainBox（主要内容区域）和sideBox区域（侧边栏）
2. 两列布局的常见用法
-
两列布局的元素示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>典型的网页结构示例:带横向导航栏</title>
<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;
left:1200px;
top:450px;
}
main{
width: 1604px;
}
aside{
width: 35%;
height: 450PX;
background-color: green;
float: right;
}
article{
/* width:100% */
width: 65%;
height: 450px;
background-color: gray;
float: left;
}
footer{
width: 1600px;
height: 50px;
background-color:blue;
/* float: left; */
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="./img_src/云中医校徽.jpg" 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>
</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>
<div style="clear: both;"></div>
</main>
<footer>
<p>版权所有 © 2024 广东云浮中医药职业学院计算机学院</p>
</footer>
</body>
</html>-
代码运行后如下：
二、三列布局
1.前言
- 三列布局由3个独立的而成，仅比两列布局多了一项内容，最终是基于两列布局结构演变出来。
- 页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。
- container又包含mainBox（主要内容区域）、SubsideBox（次要内容区）、sideBox区域（侧边栏）
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>Document</title>
<style>
section{
width: 1600px;
height: 1000px;
}
#div1{
width: 15%;
height: 800px;
background-color: rgb(224, 169, 41);
float: left;
}
#div2{
width: 23%;
height: 800px;
background-color: rgb(26, 114, 237);
float: right;
}
#div3{
width: 60%;
height: 800px;
background-color:rgb(186, 239, 71);
margin-left: 16%;
margin-right: 15%;
float: none;
}
</style>
</head>
<body>
<section>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
<div id="div3">盒子3</div>
</section>
</body>
</html>代码运行后如下：
三、多行多列
1.前言
- 多行多列常见于页面主要内容区域使用，将页面内容分成多行和多列的方式排列。
- 常用于<float>元素设置，float：left 、 float：right,使元素向左移，向右移。
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>Document</title>
<style>
section{
width: 90%;
height: 50%;
border: 4px black solid;
background-color: gray;
position: absolute;
}
div{
width: 15%;
height: 100px;
background-color: aqua;
border: 5px solid #000;
margin-bottom: 5px;
float: left;
margin-right: 2%;
margin-top: 2%;
}
</style>
</head>
<body>
<section class="class_ele">
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
<div id="div3">盒子3</div>
<div id="div4">盒子4</div>
<div id="div5">盒子5</div>
<div id="div1">盒子6</div>
<div id="div2">盒子7</div>
<div id="div3">盒子8</div>
<div id="div4">盒子9</div>
<div id="div5">盒子10</div>
</section>
<!-- <footer>网页页脚</footer> -->
</body>
</html>代码运行后如下：
四、百分比布局
- 在自适应网页设计中常见百分比布局，同个页面可以根据屏幕大小，自动调整内容布局。
- 百分比用法：例如 width：100% 、height : 100
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局综合练习</title>
<style>
#div1{
background-image: url(./top.jpg);
background-size: 100%;
height: 150PX;
}
#img1{
position: relative;
top: 20px;
left: 100px;
}
#b{
position: relative;
left: 350px;
bottom: 50%;
}
#img2{
position: relative;
left: 200px ;
bottom: 20px;
}
</style>
</head>
<body>
<header>
<section class="container1">
<div id="div1">
<img id= "img1" src="./logo.png" alt="" width="650PX" height="150PX">
<b id="b">计算机学院</b>
<img id="img2" src="./logo2.png" alt="">
</div>
</section>
</header>
<nav> </nav>
<main>
<section></section>
</main>
<footer></footer>
</body>
</html>代码运行后如下：
五、综合练习
1、综合练习案例分析
- 综合练习包含了三列布局，多行多列布局的结合。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局综合练习</title>
<style>
#div1{
background-image: url(./top.jpg);
background-size: 100%;
height: 150PX;
}
#img1{
position: relative;
top: 20px;
left: 100px;
}
#b{
position: relative;
left: 350px;
bottom: 50%;
}
#img2{
position: relative;
left: 200px ;
bottom: 20px;
}
#div2{
position: relative;
}
nav ul{
height:30px;
background-color:rgb(21, 67, 21);
}
nav ul li{
margin-right: 20px;
float:left;
}
.clear_ele a:link{
color: rgb(189, 232, 232);
}
.clear_ele a:visited{
color: azure;
}
#aside-left{
float: left;
width: 20%;
height: 850px;
background-color: rgb(30, 163, 30);
}
#aside-right{
float: right;
width: 20%;
height: 850px;
background-color:rgb(30, 163, 30) ;
}
article{
width: 60%;
height: 850Px;
background-color: gray;
float: left;
}
.clear_ele img{
list-style: none;
width: 20%;
height: 200px;
border: 2px solid red;
margin-right: 2%;
margin-bottom: 2%;
}
.container3{
width: 220px;
height: 160px;
background-color: pink;
border: 2px black solid;
position: fixed;
right:235px;
bottom: 10%;
}
footer{
width: 100%;
height: 50px;
background-color:rgb(78, 209, 78);
float: left;
}
</style>
</head>
<body>
<header>
<section class="container1">
<div id="div1">
<img id= "img1" src="./logo.png" alt="" width="650PX" height="150PX">
<b id="b">计算机学院</b>
<img id="img2" src="./logo2.png" alt="">
</div>
</section>
</header>
<nav>
<ul class="clear_ele">
<li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li>
<li><a href="#">学院概况</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">院系专业</a></li>
<li><a href="#">教学科研</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">招生就业</a></li>
</ul>
</nav>
<main>
<section class="container2 clear_ele">
<aside id="aside-left">
学院新闻
</aside>
<aside id="aside-right">
友情链接
</aside>
<article>文章
<ul class="clear_ele">
<br><br><br><br><br><br><br>
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
<img src="./photo2.jpg" alt="">
</ul>
</article>
</section>
<section class="container3">
<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>
<footer>
<p>版权所有 © 2024 广东云浮中医药职业学院计算机学院</p>
</footer>
</body>
</html>代码运行后如下：
总结:CSS样式的使用可以让代码更加简洁和结构化，使站点的访问和维护更加容易。
原文地址：https://blog.csdn.net/CH040708/article/details/143376497
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！