111. 大学生HTML5期末大作业 ―【简单的手表商城精品网页】 Web前端网页制作 html5+css3

本实例应用html5+css3，页面布局简单名了，代码精简，为初学者水平，适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

本网页实例共包含5个页面：

四、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

五、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/css.css" />
<title>手表</title>
</head>
<body style=" background:#fff;">

<header>
<div class="header"> <a href="index.html">首页</a> <a href="bijiben.html">男士/女士</a> <a href="chanping.html">产品介绍</a> <a href="denglu.html">登录</a> </div>
</header>
<div class="banner"> <img src="images/02.jpg"/> </div>

<div class="width">
<div class="con">
<h3 class="em">为您甄选</h3>
<div class="lt pic"> <img src="images/sw-4.jpg" width="300px"/> <br>
</div>
<div class="rt text">
<p>一百多年来，汉米尔顿为军队提供了成千上万枚腕表。如今，依托我们为军队打造腕表的丰富经验，汉米尔顿为现代生活打造出野战系列腕表。卡其野战系列钛合金自动腕表巧妙融合轻质实用的特质与军事风范，随时整装待发。 <br>
以高品质定时器驰名的汉米尔顿（Hamilton）名表，是1892年成立于美国宾州兰克斯特镇的一家表厂所生产，它在第一次世界大战期间至随后的几十年间为美国政府供应了尖端科技定时器。第二次世界大战期间，Hamilton汉米尔顿表被挑选中为美军和盟军生产多种手表、时钟、天文钟和测时装置。几乎每一部备战的军用车辆或舰艇都装有Hamilton汉米尔顿时计。 </p>
</div>
<div class="clear"></div>
<h3 class="em">爆款清单</h3>
<ul>
<li><a href="chanping.html"><img src="images/zv-01.png"/>
<p>两地时腕表</p>
</a></li>
<li><a href="chanping.html"><img src="images/zv-02.png"/>
<p>春季精选</p>
</a></li>
<li><a href="chanping.html"><img src="images/zv-03.png"/>
<p>镂空及开心腕表</p>
</a></li>
<div class="clear"></div>
</ul>

</div>
</div>

<footer>
<p>版权所有 </p>
</footer>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

/*通用类*/
* {
   margin: 0;
   padding: 0;
}
body {
   margin: 0 auto;
   line-height: 21px
}
img {
   border: none;
   display: block;
   min-width: 100%;
}
a {
   cursor: pointer;
   color: #333;
   text-decoration: none;
   outline: none;
}
em {
   font-style: normal;
}
.lt {
   float: left;
}
.rt {
   float: right;
}
ul, li, h1, h2, h3, p {
   padding: 0;
   margin: 0;
   list-style: none
}
ul {
   list-style-type: none;
}
.clear {
   clear: both
}
/*header 开始*/
.width {
   width: 1200px;
   margin: 0 auto;
}
header {
   width: 100%;
   background:#f7f7f7
}
.header {
   margin: 0 auto;
   text-align: center;

   display: block;
}
.header a {
   height: 70px;
   line-height: 70px;
   display: inline-block;
   text-align: center;
   color: #000;
   font-size: 18px;
   margin: 0 40px;
}
.header a:hover {
   color: #1c96c2;
}
footer {
   width: 100%;
   text-align: center;

   background: #f5f5f5;
}
footer p {
   height: 80px;
   line-height: 80px;
}
.banner {
   background-size: cover;
   width: 100%;
}
.banner img {
   width: 100%;
}
.em {
   width: 100%;
   color: #000;
   font-size: 20px;
   background: #eee;
   line-height: 50px;
   padding: 0 20px;
   box-sizing: border-box;
   margin: 5px 0;
}
.con ul li {
   float: left;
   width: 30%;
   margin-right: 40px;
   text-align: center;

   margin-bottom: 30px;
}
.con ul li img {
   width: 100%;
   height: 80%;
}
.con ul li p {
   background: #f1f1f1;
   display: block;
   height: 40px;
   line-height: 40px;
}
.con .pic {
   width: 20%;

}

...

六、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

七、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

标签：css3,Web,网页,100%,height,width,腕表,margin
From： https://blog.csdn.net/m0_67368443/article/details/144087873