该综合练习就是为这个静态网页设置CSS样式，使其变成下面的模样
设置CSS样式前：
设置CSS样式后：
其骨架为：
<body><div class="qwq"><img src="top.jpg" alt=""></div><div class="qwq1"><a href="">首页</a><a href="">关于第五</a><a href="">图片</a><a href="">活动</a></div><div class="banner"><img src="R-C.jpg" alt=""></div><main> <section class="container2 clear_ele"> <aside id="aside-left"> 庄园新闻</aside><aside id="aside-right"> 友情链接</aside> <article class="container">内容 <ul class="clear_ele"> <li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></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>版权所有 © 第五人格</p> 代码如下：
/* 为顶部图片设置宽度，高度 object-fit: cover是裁剪高度display: block 是生成一个块盒子*/.qwq img{display: block;width: 100%;height: 120px;object-fit: cover;}/* 为导航栏设置背景颜色，text-align: center 是让文字居中line-height: 50px 是设置文本行高*/.qwq1{width: 100%;height: 50px;line-height: 50px;text-align: center;background-color: rgb(58, 13, 236);}/* 为a标签里面的文字设置颜色text-decoration: none 去除链接下面的下划线margin: 0 120px 设置文本间距离 */.qwq1 a{text-decoration: none;margin: 0 120px;color: white;}/* 为图片设置宽度，高度 object-fit: cover是裁剪高度display: block 是生成一个块盒子*/.banner img{display: block;width: 100%;height: 520px;object-fit: cover;}/*float: left; 设置盒子浮动方向，;height: 600px;设置高度width: 20% 设置宽度，background-color: rgb(0, 170, 255);设置颜色 */#aside-left{width: 20%;height: 600px;float: left;background-color: rgb(0, 170, 255);}/*;height: 600px;设置高度margin-left: 20%;设置左边距width: 60% 设置宽度，background-color:grey;设置颜色 */article{width: 60%;height: 600px;background-color:grey;margin-left: 20%;}/*float: left; 设置盒子浮动方向，;height: 600px;设置高度width: 20% 设置宽度，background-color: rgb(0, 170, 255);设置颜色 */aside{width: 20%;height: 600px;float: right;background-color: rgb(0, 170, 255);}/* 设置盒子颜色，以及文字居中 */footer{background-color: aquamarine;text-align: center;}/*background-color: pink; 设置盒子颜色position: absolute; 设置固定定位left: 80%;距离左边的距离top: 800px; 距离顶部的距离*/.container3{background-color: pink;position: absolute;left: 80%;top: 800px;}/* 设置盒子内的边距 */.container ul{margin: 0;padding: 0;}/* width: 150px; 设置宽度height: 150px; 设置高度background-color: pink; 设置颜色border: 2px red solid;设置盒子属性margin: 20px; 设置边距float: left; 设置浮动*/.container ul li img{width: 150px;height: 150px;background-color: pink;border: 2px red solid;margin: 20px;float: left;}/* 去除无序列表前面的点 */ul{list-style-type: none;}其中每一个都有注释，可以跟着去操作，这样子就可以制造出一个简略的网页布局。
需要了解的可以查看我的往期盒子属性讲解
