该综合练习就是为这个学校静态网页设置CSS样式，使其变成下面的模样
其基本骨架代码为：
html
<!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盒子放置顶部的图片，使用绝对定位设置好它们的位置
其代码为：
html
<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代码为：
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代码为：
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代码为：
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代码为：
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代码为：
css
footer{
background-color: rgb(0, 192, 0);
text-align: center;
}
footer p{
margin: 0px;
}7、最后使用伪类选择器设置导航栏样式
其CSS代码为：
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);
}这样一个完整的网页布局就做好啦！！（其中很多细致的知识点在前面的博客有详细介绍，这里不再一一赘述，需要了解的可移步至前面去查看哦~）