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>版权所有 &copy; 作者</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>版权所有 &copy; 作者</p>

</footer>

</body>

</html>

相关推荐
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒1 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿2 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸2 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin2 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊2 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术2 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js