CSS--综合练习
我们学习了CSS的大部分内容，现在用我们所学的CSS知识来写一个静态网页吧！
做出以下示例图效果：
初始代码：
<body>
<header>
<img src="" alt="">
<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>实现静态网页后的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局综合练习</title>
<style>
header{
/* 页眉的样式设置及背景图片插入 */
width: 100%;
height: 170px;
background-image: url(./top.jpg);
position: relative;
top: 40px;
}
footer{
/* 页脚的样式设置 */
width: 100%;
height: 40px;
background-color: green;
position: relative;
bottom: 20px;
}
.container2{
/* 父盒样式设置 */
width: 100%;
height: 800px;
background-color: aliceblue;
}
#aside-left{
/* 左侧边栏样式及浮动 */
width: 20%;
height: 800px;
background-color: lightcoral;
float: left;
}
#aside-right{
/* 右侧边栏样式及浮动 */
width: 20%;
height: 800px;
background-color: lightcoral;
float: right;
}
.container1{
/* 导航栏的宽高 */
width: 100%;
height: 140px;
}
nav ul{
/* 导航栏的样式 */
width: 100%;
height: 35px;
background-color:green;
position: relative;
top: 20px;
}
nav ul li{
/* 用浮动来对导航栏内的元素进行排列及外边距的距离 */
float: left;
margin-left: 100px;
}
.container3{
/* 用固定定位来做一个在窗口浮动的小盒子，不随鼠标的移动而移动 */
width: 220px;
height: 160px;
background-color: rgba(98, 151, 235, 0.228);
border: 2px black solid;
position: fixed;
right: 200px;
top:500px;
}
header p{
/* 页眉的文本样式及位置 */
font-size: 50px;
display: block;
position: absolute;
bottom: 10px;
right: 27%;
}
#img2{
/* 通过绝对定位来设置页眉的第五人格logo样式及位置 */
width: 40%;
height: 150px;
position: absolute;
left: 8%;
top: 20px;
}
#img3{
/* 通过绝对定位来设置页眉的第五人格学院文字下面的图片样式及位置 */
width: 18%;
height: 70px;
position: absolute;
top: 100px;
right: 27%;
}
/* 以下是导航栏内元素的动态设置
注意:这四种状态的顺序不能颠倒,否者会导致伪类样式不能实现 */
a:link{
/* link 鼠标点击链接前的颜色 */
color: rgb(255, 255, 255);
font-size: larger;
text-decoration: none;
}
a:visited{
/* visited 鼠标访问链接后的颜色 */
color: yellow;
}
a:hover{
/* hover 鼠标放在链接上时链接的颜色 */
color: darkorange;
}
a:active{
/* active 鼠标点击链接时链接的颜色 */
color: black;
text-decoration: line-through;
}
/* 以下是网页内的一个多列多行布局 */
article ul{
margin: 0;
padding: 0;
}
article ul li{
list-style: none;
width: 10%;
height: 250px;
background-color: pink;
margin-right: 5%;
margin-bottom: 2%;
float: left;
}
/* 防止父盒元素塌陷 */
.clear_ele::after{
content: ""; /* 这个伪元素的内容属性必须有 */
display: block;
/* border: 6px purple dashed; */
clear: both;
}
</style>
</head>
<body>
<header>
<p>第五人格学院</p>
<section class="container1">
<img src="./e341f515ae45d542df684b9ddb1d62bf.png" id="img2">
<img src="./logo2.png" id="img3">
</section>
</header>
<nav>
<ul class="clear_ele" type="none">
<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 style="text-align: center;">版权所有 © 2024 第五人格求生者监管者学院</p>
</footer>
</body>
</html>原文地址：https://blog.csdn.net/2301_82005922/article/details/143376192
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！