目录
♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:
一、网页概述
本实例应用html5+css3，div+css布局，代码精简，适用于大学生网页课程作业设计，本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含7个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2020冬奥会</title>
</head>
<body>
<div class="menu">
<ul class="center mid">
<li><a href="index.html">网站首页</a></li>
<li><a href="check.html">举办竞选</a></li>
<li><a href="pic.html">往届图片</a></li>
<li><a href="game.html">赛事安排</a></li>
<li><a href="cdjt.html">场地交通</a></li>
<li><a href="sagc.html">申奥过程</a></li>
<li><a href="order.html">在线订票</a></li>
</ul>
</div>
<div class="head">
<div class="logo mid"> <img src="images/logo.jpg" /> </div>
</div>
<div class="content">
<div class="banner "> <img src="images/banner.jpg" width="100%" /> </div>
<div class="clear"></div>
<div class="clear"></div>
<div class="produce">
<div class="bar"><strong class=" ">举办竞选</strong></div>
<div class="pad"> <img src="images/big.jpg" width="240" style="float:left" />
<p>第24届冬季奥林匹克运动会（英语：The XXIV Olympic Winter Games），又称2022年北京冬季奥运会。
2015年7月31日，托马斯·巴赫宣布2022年冬季奥林匹克运动会主办城市是北京，北京成为第一个举办过夏季奥林匹克运动会和冬季奥林匹克运动会以及亚洲运动会三项国际赛事的城市，也是继1952年挪威的奥斯陆举办后时隔70年的第二个举办冬奥会的首都城市，同时张家口市凭借与北京市共同申办2022北京冬奥会
[1]
的契机成功获得了2021年国际雪联自由式滑雪和单板滑雪世界锦标赛的举办权与北京市石景山区成为中国第一个获得此项赛事举办权的城市，同时北京与张家口成为中国第一个获得过冬季奥林匹克运动会举办权的城市
[1] 。
北京冬季奥运会设7个大项，15个分项 [2] ，109个小项。北京将主办冰上项目，张家口将主办雪上项目，延庆协办张家口举办雪上项目。</p>
</div>
</div>
<div class="lianxi">
<div class="bar"><strong class=" ">比赛场馆</strong></div>
<div class="con"> <img src="images/dh.jpg" width="100%" style="float:left; margin-right:20px" />
<p>北京2022年冬奥运会和冬残奥运开闭幕式计划在北京市区举行，共举办包括滑冰（含短道速滑、速度滑冰、花样滑冰）、冰球、冰壶在内的3个大项5个分项的所有冰上项目比赛，北京赛区一共有5座竞赛场馆，其中4座分别是水立方、国家体育馆、五棵松体育馆和首都体育馆，这4座体育馆将分别举办冰壶、男子冰球、女子冰球、短道速滑和花样滑冰的比赛。冬奥会需要的12个冰上项目场馆，已经有11个是现成的，此外还需要在北京奥林匹克森林公园网球中心南侧新建一个场馆——国家速滑馆。 </p>
</div>
</div>
<div class="clear"></div>
<div class="bar"><strong class=" ">往届冬奥会图片欣赏</strong> </div>
<div class="imglist scrollleft">
<ul>
<li>
<p><img src="images/3.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/4.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/5.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/6.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/7.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/8.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/9.jpg" /><br />
2020冬奥会图片</p>
</li>
<li>
<p><img src="images/10.jpg" /><br />
2020冬奥会图片</p>
</li>
</ul>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
body{ line-height:21px; margin:0; background:#ece2c1}
.clear{ clear:both}
.menu li{ list-style:none}.logo { text-align:center}
.logo img{ width:100px }
.banner{ position:relative; clear:both}
.bar{ width:100%; float:left; margin-top:10px; color:#009999; margin-bottom:10px ; padding:14px 0; font-size:34px; text-align:center;}
.head{ background:#fff}
.menu{ width:100%; float:left; background:#1f9d75; margin-bottom:10px; line-height:55px;}
.menu li a{ color:#fff; font-size:18px;}
.menu li { float:left; padding:0px 0px ; width: 142px; text-align:center}
.right{ float:right; width:660px; padding:20px}
.left{ min-height:300px; float:left; width:260px; background:#E2DBD6; padding:20px}
.content{ width:1000px; margin:0 auto; font-size:14px; }
.end{ margin-top:20px; clear:both; padding:30px 0; text-align:center;}
.produce img{ float:left; margin:0 20px 20px 0}
.toTop{width:20px;height:85px;background:#CCC;border:1px solid #999;padding:10px;cursor:pointer;position:fixed;right:40px;bottom:100px;}
*html .toTop{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));margin-bottom:80px;}
.pad{ padding:20px 0; display:block}
.pics p{ margin:20px; text-align:center}
.imglist{ clear:both}
.imglist li img{ width:100%; height:160px}
.imglist li{ float:left; width:220px; margin-bottom:10px ; margin-left:20px; text-align:center}
.fr{ float:right}
.news li{ padding:5px;}
.news li a{ color:#669966}
.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.mid{ margin:0 auto; width:1000px}
.msg>div{ padding:10px}
.text-center{ text-align:center}
.inr{ float:right; width:720px; line-height:30px}
.inl{ float:left; width:240px;}
.produce{ width:100%; float:left}
.lianxi{ width:100%; float:right}.conent{width:90px;height:120px;position:absolute;top:20px;}
.conent .sition{width:90px;height:120px;position:relative;}
.conent .sition .c_header{width:90px;text-align:center;cursor:move;}
.conent .sition .c_header .txt{color:#00CC00;font-weight:600;font-size:15px;line-height:30px;box-shadow:1px 1px 1px 1px #000;text-shadow:1px 1px 1px #000;}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
标签：网页,text,float,width,精品,冬奥会,margin From： https://blog.csdn.net/2301_82212046/article/details/144632382