目录
一、两列布局
1、前言：
2. 两列布局的常见用法
两列布局的元素示例：
代码运行后如下：
二、三列布局
1.前言
2. 三列布局的常见用法
三列布局的元素示例：
代码运行后如下：
三、多行多列
1.前言
2，多行多列布局的常见用法
多行多列布局的元素示例：
四、百分比布局
代码运行后如下：
五、综合练习
代码运行后如下：
# 实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、<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样式的使用可以让代码更加简洁和结构化，使站点的访问和维护更加容易。
