写在前面：本篇所有 css 均使用内嵌式引入。若想使用外链式，需先新建 .css 文件，再通过 link 标签引入到 html 里，样式部分的代码基本不用做其他修改。
目录
1 导航栏样式
2 商品展示页面
3 简单新闻页面
4 布局样式
1 导航栏样式
效果图
要求：鼠标悬浮时，显示红色并且光标呈现为指示链接的指针（一只手）
代码
<!DOCTYPE html>
<html>
<head><title>导航栏</title><style type="text/css">/*外边距，内边距*/*{margin: 0;padding: 0;}a{color: white;font-size: 20px;font-weight: bold;text-decoration: none;/*删掉下划线*/}ul{list-style: none;/*删掉列表前面的圆点*/}.one{width: 900px;height: 65px;background-image: url(bg.jpg);background-repeat: repeat-x;/*让图片背景在水平方向上重复填充*/}.one ul{width: 900px;height: 65px;text-align: center;}.one>ul>li{width: 100px;height: 65px;float: left;/*元素向左浮动*/line-height: 64px;}/*鼠标悬浮时*/.one>ul>li:hover{background-color: red;cursor: pointer;/*使光标呈现为指示链接的指针（一只手）*/}</style>
</head>
<body><div class="one"><ul><li><a href="#">游戏1</a></li><!-- 当不知道往哪里链接时可以给个 # --><li><a href="#">游戏2</a></li><li><a href="#">游戏3</a></li><li><a href="#">游戏4</a></li><li><a href="#">游戏5</a></li><li><a href="#">游戏6</a></li><li><a href="#">游戏7</a></li><li><a href="#">游戏8</a></li><li><a href="#">游戏9</a></li></ul></div>
</body>
</html>float 属性：定义元素在哪个方向浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2 商品展示页面
效果图
要求：鼠标悬浮时，展示红边框以及链接变红出现下划线
代码
<!DOCTYPE html>
<html>
<head><title>商品展示页面</title><style type="text/css">*{padding: 0;margin: 0;}a{color: grey;font-size: 18px;font-weight: bold;;text-decoration: none;}.goods{width: 250px;height: 400px;float: left;margin: 10px;border: 1px solid white;}.goods:hover{border: 1px solid red;}.goods>img{width: 250px;height: 265px;}.prices{width: 250px;height: 30px;line-height: 30px;}.price{color: red;font-size: 18px;font-weight: bold;font-family: "仿宋";}.counts{font-size: 14px;float: right;color: grey;margin-right: 5px;}p{margin: 5px;}a{font-size: 12px;}a:hover{color: red;text-decoration: underline;}.shop_name{font-size: 14px;color: grey;float:left;margin-left:5px; }.container{width: 1200px;height: 2000px;margin: 0 auto;/*浏览器自动设置外边距*/}</style>
</head>
<body><div class="container"><div class="goods"><!-- 完成一个后剩下的就可以直接复制 --><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div><div class="goods"><img src="哆啦A梦.jpg"><div class="prices"><span class="price">￥78</span><span class="counts">2000人付款</span></div><p><a href="#">哆啦A梦玩偶 重庆直邮</a></p><div class="prices"><a href="#" class="shop_name">XXX玩偶旗舰店</a><span class="counts">重庆永川</span></div></div></div>
</body>
</html>3 简单新闻页面
效果图
（内容从百度百科上复制粘贴的，新闻是很久以前的，只是之前老师拿这个举例子，无任何冒犯意思。脑残粉丝别来找事）
代码
<!DOCTYPE html>
<html>
<head><title>新闻页面</title><style type="text/css">*{padding: 0;margin: 0;}body{font-size: 16px;line-height: 1.5;}#content{width: 760px;height: 990px;border: 1px solid black;margin: 100px auto 0px;/*上外边距为100px，左右外边距由浏览器自动设置，下外边距为0px*/padding: 20px;background: #F7ffff;}.title{font-size: 30px;font-family: "黑体";font-weight: normal;width: 100%;height: 50px;border-bottom: 1px solid blue;/*设置图中的分割线，也可以用<hr>标签*/text-align: center;line-height: 50px;}p{margin: 10px 0px;text-indent: 2em;}img{border:1px solid black;}.center{text-align: center;}.zhengwen{font-family: "微软雅黑";}</style>
</head>
<body><div id="content"><h2 class="title">虞书欣穿香槟色露背裙秀身材 高扎丸子头优雅不失俏皮</h2><p class="center">2022年11月7日 15:00 来源：新浪娱乐</p><p class="center"><img src="虞书欣.jpg"></p><p class="zhengwen">近日，虞书欣工作室晒出一组虞书欣参加活动造型图。照片中，她身穿香槟色露背长裙搭配丸子头，圆形耳环，优雅又不失俏皮。</p><p class="zhengwen">虞书欣，1995年12月18日出生于上海市，中国内地女演员、歌手。</p><p class="zhengwen">2015年，出演首部电视剧《新边城浪子》，从而正式进入演艺圈。2016年，主演现代都市片《花落流年》；10月22日，参与录制的校园纪实节目《一年级·毕业季》在湖南卫视播出。2017年，主演都市奇幻剧《我的奇妙男友2之恋恋不忘》 。2018年7月13日，主演的青春校园情感剧《最亲爱的你》在优酷视频上线。2020年1月26日，主演的都市情感剧《下一站是幸福》在湖南卫视播出，虞书欣凭借饰演的蔡敏敏一角崭露头角；2月14日，主演的古装言情探案剧《少主且慢行》在爱奇艺播出；3月，因在爱奇艺女团选秀综艺节目《青春有你第二季》的表现而获得广泛关注 ，最终以第2名的成绩加入女子演唱组合THE9；12月18日，主演古装玄幻剧《苍兰诀》 。2021年1月，以青春助教的身份加盟《青春有你第三季》 ；5月20日，主演的都市言情剧《月光变奏曲》播出 。</p><p class="zhengwen">虞书欣的母亲是刘金美。虞书欣大学就读于新加坡拉萨尔艺术学院。此外，虞书欣因投资多家公司而成为其股东。</p><ul><li><a href="#">相关内容</a></li><li><a href="#">相关内容</a></li><li><a href="#">相关内容</a></li><li><a href="#">相关内容</li><li><a href="#">相关内容</a></li></ul></div>
</body>
</html>4 布局样式
效果图
代码
<!DOCTYPE html>
<html>
<head><title>布局样式</title><style type="text/css">#head{width: 700px;height: 100px;background-color: blue;margin: 0 auto;}#left{width: 200px;height:300px;background-color: green;float:left;}#center{width: 200px;height:300px;background-color: orange;float:left;}#right{width: 200px;height:300px;background-color: red;float:right;} #main{width: 600px;margin: 0 auto;}#foot{width: 700px;height: 100px;background-color: grey;margin: 0 auto;clear:both;/*clear:规定元素的哪一侧不允许其他浮动元素 both指左右均不允许*/}</style>
</head>
<body><div id="head">头部</div><div id="main"><div id="left">左</div><div id="center">中</div><div id="right">右</div> </div><div id="foot">尾部</div>
</body>
</html>
