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="#">网站首页</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>版权所有 © 作者</p>
</footer>
</body>
</html>
运行截图：
下面我们将给CSS添加样式，使其成为一个网页，如下图：
下面是整个网页的代码：
（注：<!-- -->里的内容为注释，同样颜色是html的css样式）
<!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{
background-color: rgb(73, 129, 219);
}
nav ul li{
list-style: none;
float: left;
margin-left: 50px;
font-size: 20px;
}
ul{
margin: 0;
padding: 0;
}
<!-- 这是导航栏的一些参数代码，可根据自己喜好设计想要的参数 -->
main .container3{
border: 2px rgb(255, 136, 156) solid;
background-color: pink;
width: 360px;
height: 225px;
position: fixed;
bottom: 300px;
right: 50px;
}
<!--这是右下角的粉色框框，这里设计了固定定位，就算上下来回拖动，它的位置也不会改变，同样可根据自己喜好设计想要的框的大小 （width: 360px; height: 225px;）和自己喜欢的背景颜色（background-color: pink;）-->
article ul li{
list-style: none;
width: 20%;
height: 300px;
background-image: url(./微信图片_20241109175518.jpg);
<!--图片可随意更改，是中间那个很多张图片的地方 -->
background-size: 100% 100%;
border: 2px rgb(125, 218, 137) solid;
margin-right: 4%;
margin-bottom: 5%;
float: left;
}
article ul{
margin: 100px;
}
<!-- 一些高度，图片间的间距（margin-right: 4%;margin-bottom: 5%;）都可根据自己喜好更改 -->
<!-- 使用伪元素选择器解决高度塌陷问题 -->
nav::after{
content: "";
display: block;
clear: both;
}
#aside-left{
width: 20%;
height: 1000px;
background-color: rgb(107, 160, 239);
float: left;
}
<!--这是三列布局左边一列的参数设置 -->
#aside-right{
width: 20%;
height: 1000px;
background-color: rgb(107, 160, 239);
float: right;
}
<!--这是三列布局右边一列的参数设置 -->
#div1{
height: 500px;
width: 100%;
float: left;
background-image: url(./微信图片_20241109181233.jpg);
background-repeat: no-repeat;
background-size: 10% 10%;
}
<!--这是最上面的那张图片，高度和图片都可根据自己喜好进行更改 -->
footer{
background-color:rgb(73, 129, 219);
text-align: center;
}
footer p{
margin: 0px;
}
<!--这是最下面的版权归属的地方，可根据自己喜好决定字体放在那个位置（text-align: center;） -->
article{
width: 60%;
height: 1000px;
background-color: rgb(14, 71, 146);
margin-left: 20%;
margin-right: 20%;
}
.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(73, 129, 219);
}
<!--这是三列布局中间一列的参数设置 -->
</style>
</head>
<body>
<header>
<section class="container1">
<div id="div1">
<img src="./微信图片_20241109181233.jpg" width="100%" height="500px">
</div>
<!--尽可能设置高度和宽度，避免出现图片和盒子不一致问题,可添加多张照片，同上面格式一样，再设置CSS的样式就可以 -->
</section>
</header>
<nav>
<ul class="clear_ele">
<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>
<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>版权所有 © 作者</p>
</footer>
</body>
</html>