该综合练习就是为这个学校静态网页设置CSS样式，使其变成下面的模样
其基本骨架代码为：
<!DOCTYPE html>
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页布局综合练习</title>
</head> <body> <header> <section class="container1"> </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"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></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>1、首先设置几个div盒子放置顶部的图片，使用绝对定位设置好它们的位置
其代码为：
<style>#div1{height: 150px;width: 100%;float: left;background-image: url(./网页布局综合练习（完成版）/img_src/top.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#div2{position: absolute;top: 2px;margin-left: 50px;}#div3{position: absolute;top: 20px;left: 50%;}#div3 p{font-size: 30px;text-align: center;margin: 0px;}</style> <header> <section class="container1"> <div id="div1"><div id="div2"><img src="./网页布局综合练习（完成版）/img_src/logo.png" alt=""></div><div id="div3"><p>计算机学院</p><img src="./网页布局综合练习（完成版）/img_src/logo2.png" alt=""></div></div> </section></header> 2、使用左浮动功能 float: left; 让导航栏横向排列
其CSS代码为：
nav{background-color: rgb(0, 192, 0);}nav ul li{list-style: none;float: left;margin-left: 50px;font-size: 20px;}ul{margin: 0;padding: 0;}/* 使用伪元素选择器解决高度塌陷问题 */nav::after{content: "";display: block;clear: both;}3、接下来使用固定定位 position: fixed; 将问题栏放在右下角
其CSS代码为：
main .container3{border: 2px rgb(255, 136, 156) solid;background-color: pink;width: 240px;height: 150px;position: fixed;bottom: 50px;right: 50px;}4、使用三列布局方法将内容部分分成三列
其CSS代码为：
#aside-left{width: 20%;height: 600px;background-color: green;float: left;}#aside-right{width: 20%;height: 600px;background-color: green;float: right;}article{width: 60%;height: 600px;background-color: gray;margin-left: 20%;margin-right: 20%;} 5、使用左浮动将内容图片摆放好
其CSS代码为：
article ul li{list-style: none;width: 20%;height: 150px;background-image: url(./网页布局综合练习（完成版）/img_src/photo2.jpg);background-size: 100% 100%;border: 2px red solid;margin-right: 2%;margin-bottom: 2%;float: left;}article ul{margin: 100px;} 6、设置页脚样式
其CSS代码为：
footer{background-color: rgb(0, 192, 0);text-align: center;}footer p{margin: 0px;} 7、最后使用伪类选择器设置导航栏样式
其CSS代码为：
.clear_ele li a:link{color: white;text-decoration: none;}.clear_ele li a:visited{color: white;text-decoration: none;}.clear_ele li a:hover{background-color: rgb(176, 255, 176);}这样一个完整的网页布局就做好啦！！
![[Nginx]快速入门](https://img-blog.csdnimg.cn/img_convert/63910e200979ae25c1a7ca0b9d93d625.png)
