实训-利用HTML和CSS制作一个网页界面

项目介绍
需求分析
- 1.Header：
- 2.Body：
- 3.Footer
页面布局及样式实现
- 1.引入CSS文件及初始化
- 2.实现头部
- - （1）logo
  - （2）导航栏
  - （3）中英文切换
  - 至此为止，头部完成
- 3.轮播图
- - （1）轮播组图
  - （2）前进，后退控制器
  - （3）图片计数器
  - 至此为止，轮播图完成
- 4.欢迎部分
- - （1）标题及文字描述
  - （2）四个小部分
  - 至此为止，welcome部分完成
- 5.production部分
- - （1）轮播图加描述及后退控制器
  - 至此为止，production部分完成
- 6.新闻部分
- - （1）左侧图文及包裹其和右侧文本的article
  - （2）右侧文本
  - - （a）日期样式
    - （b）日期右面的文本
    - （c）新闻列表
  - 至此为止，新闻部分完成
- 7.视频部分
- 8.实现页脚
- - 至此为止，页脚完成
网页总体效果图
总结
源码

项目介绍

学习HTML和CSS有一段时间了，笔者做完了一个相对练习而言较为复杂的网页，纽曼官网首页，上一下效果图：

这个网页相对来说还是比较有练习意义的，包含导航栏，轮播图，大量的浮动和弹性布局以及一些细小却重要的知识点。

需求分析

自顶向下，先整体在局部，我们慢慢分析。

1.Header：

头部比较简单，左侧有一个图片logo，右侧一个横向导航栏，每个单元有悬停效果。最右侧有个语言切换标志。

2.Body：

一个轮播图，有图片计数器和前进后退控制器。接下来有四个大部分，四部分均有一个标题及说明，再接具体内容，所以我们把公共部分写在一起。

第一部分为四个小版块，每个版块为图片加小标题加文本内容。

第二部分为全屏宽度的滚动轮播图，鼠标悬停有效果，有后退控制器，每张图片下部有描述。

第三部分左侧为图片，文字近底部有蓝色背景的文字说明，这里需要定位。右侧的上部为一个日期，右侧为小标题加文字内容。下部为新闻列表，左侧为新闻内容，右侧为新闻时间。

第四部分为滚动轮播视频列表，这里我们用图片代替视频。有前进后退控制器，鼠标悬停有效果。

3.Footer

页脚左侧有导航栏，右侧为一个表单信息，底部为一个有上边框的文字说明。

页面布局及样式实现

1.引入CSS文件及初始化

由于纽曼官网的其他网页公共部分很多，笔者创建了一个public样式文件和首页样式文件，大家在练习的时候可以写为一个样式文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><link rel="stylesheet" href="../css/public.css"><link rel="stylesheet" href="../css/index.css">
</head>

*{margin: 0;padding: 0;
}
body{font-size: 18px;
}
section{margin-bottom: 40px;
}

2.实现头部

首先用header类标签包裹头部

    <div class="header">.......</div>

.header{width: 100%;overflow: hidden;
}

overflow: hidden清除浮动
PS：“用何种标签包裹整体”，该操作不再重复。

（1）logo

 <!--logo--><div class="logo"><img src="../img/logo.jpg" alt="logo"width="146"height="85">

加载logo图片，指定宽高，防止页面加载时闪烁。

.logo{margin-left: 15%;float: left;
}

给logo一个左浮动，左边外间距为15%，可适当调整，位置合适即可。

（2）导航栏

<!--导航栏--><nav><ul><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>

nav{width: 40%;margin: 0 10%;float: left;overflow: hidden;
}
nav ul{list-style-type: none;display: flex;justify-content: space-around;
}
nav li{float: left;line-height: 80px;text-align: center;
}
nav a{text-decoration: none;color: black;
}
nav a:hover{color: #029df2;border-bottom: #029df2 10px solid;padding-bottom: 20px;
}

位置可利用margin和padding自行调整，ul利用弹性布局和justify-content空间分配，每个li标签给一个左浮动。观察效果图发现文字有居中，加入 line-height: 80px; text-align: center。清除a标签的下划线，指定文字的颜色（改变a标签的颜色不能在父级标签改变color，只能在a标签内）。添加a标签的悬停效果。

（3）中英文切换

<div class="language"><span>CN</span>EN</div>

}
.language{line-height: 80px;text-align: center;float: left;
}
.language span{border: black 1px solid;margin-right: 20px;padding: 10px;
}

这里大家可以灵活设置样式，笔者用的是span标签包裹住所选再设置样式。给.language一个左浮动，让它和大家排在一行。

至此为止，头部完成

完成后的网页效果

看着还不错，大体东西都体现出来了，继续！

3.轮播图

.banner{width: 100%;overflow: hidden;position: relative;
}

清除浮动，给一个相对定位，以便于一会控制器及计数器的定位。

（1）轮播组图

<!--三个轮播组图--><ul><li><img src="../img/banner_01.jpg" alt="banner"width="1920"height="400"></li><li><img src="../img/banner_02.jpg" alt="banner"width="1920"height="400"></li><li><img src="../img/banner_03.jpg" alt="banner"width="1920"height="400"></li></ul>

.banner ul{width: 19200px;list-style-type: none;
}
.banner li{float: left;
}

载入图片，指定宽高。给轮播组图列表一个可以容纳三张或更多的宽度，以便于所有图片浮动到一行，清除掉浮动就可以完成指定区域显示一张图片。

（2）前进，后退控制器

<!--前进，后退控制器--><div class="prev"><img src="../img/index-xb4.png" alt="prev"height="32"width="32"></div><div class="next"><img src="../img/index-xb3.png" alt="next"height="32"width="32"></div>

.banner .prev,.next{position: absolute;top: 50%;margin-top: -16px;
}
.banner .prev{left: 50px;
}
.banner .next{right: 50px;
}

给两个控制器绝对定位，这样，所有的偏移值都是以轮播组图图片的左上角为（0，0）偏移的。top50%把两个控制器的最上边对齐中心线，margin-top: -16px向上移动控制器一半的高度即可实现垂直居中。前进控制器距离左边线50px，后退控制器距离右边线50px。

（3）图片计数器

<!--图片计数器--><div class="count"><ul><li class="active"></li><li></li><li></li><li></li></ul></div>

.count{width: 100%;height: 10px;position: absolute;bottom: 25px;
}
.count ul{width: 80px;margin: 0 auto;
}
.count ul li{width: 10px;height: 10px;cursor:pointer;background-color: #666;opacity: .5;float: left;margin-right: 10px;border-radius: 50%;
}
.count .active{background-color: #029df2;opacity: .8;
}

计数器也需要定位，原理同上，只不过定位在距离底边线25px。计数器的圆点是利用边框圆角做出来的，当border-radius: 50%，就会变成一个圆。opacity透明度，.5即0.5。cursor作用为，当鼠标悬停或经过圆点时，鼠标会变为手型。

至此为止，轮播图完成

新鲜出炉的轮播图，在加上刚刚的头部，效果为

4.欢迎部分

.welcome{width: 60%;margin: 30px auto;
}

（1）标题及文字描述

<!--标题和描述--><h1>WELCOME <span>TO</span> NEWMAN</h1><p>纽曼公司创立于1996年，现有员工2000余人，是一家集研发、制造、销售、服务为一体的中国高新技术企业。公司研发及生产体系健全，拥有湖南、北京和深圳三大中心。经过17年的发展，凭借强大的研发力量及资源整合能力，纽曼已拥有目前中国数码行业较为完整产品体系。产品跨越专业及消费数码产品领域。</p>

h1{line-height: 40px;text-align: center;margin-bottom: 30px;
}
h1 span{border-bottom: #029df2 5px solid;
}
section p{font-size: 14px;color: #666666;text-align: center;
}

观察效果图，设定好字体，颜色，边距行高等。
PS：标题下的小蓝线笔者的做法是锁定某几个字加底边框，有些偷懒hh
PPS：之后的三个部分均有此步操作，将省略。

（2）四个小部分

<!--四个图片加描述--><article><div class="part"><img src="../img/index-cultural01.png" alt=""width="44"height="44"><h2>CULTURAL<div>企业文化</div></h2><p>优秀的企业文化能给企业注入蓬勃的活力，是企业的灵魂。纽曼十分注重自身企业文化建设，将企业文化的精髓传递给每一位员工。</p></div><div class="part"><img src="../img/index-cultural02.png" alt=""width="44"height="44"><h2>HONOUR<div>企业荣誉</div></h2><p>纽曼历年来坚持不懈地努力，以品质求生存，以创新谋发展，从而打造出众多经典产品，得到了用户以及行业媒体的普遍肯定与褒奖。</p></div><div class="part"><img src="../img/index-cultural03.png" alt=""width="44"height="44"><h2>QUALIFICATION<div>资格认证</div></h2><p>纽曼长期以来将科学化管理放在首位，并将产品质里视为企业命脉，经过长期不懈的系统化学习和实践，逐步通过了IS09001质里管理体系认证。</p></div><div class="part"><img src="../img/index-cultural04.png" alt=""width="44"height="44"><h2>RESEARCH<div>研究开发</div></h2><p>纽曼一直以来把产品技术研发创新作为产品的核心竞争力，组建了一支专业的、国际化的研发团队，拥有专业研发技术人员近300名。</p></div></article>

article{width: 100%;margin: 80px auto;overflow: hidden;display: flex;justify-content: space-around;
}
.welcome .part{width: 20%;float: left;text-align: center;
}
.welcome .part p,h2{padding: 20px;
}
.welcome .part div{color: #666666;font-size: 18px;
}
.welcome .part h2{font-size: 25px;
}

其实每个小部分格式都是相同的，可以做完一个之后拷贝，替换图片和文案即可。
再一次用到弹性布局及justify-content空间分配，浮动每一个小部分，设定文本样式（行内间距，标题与文本距离，图片与文本距离等）。该板块并不复杂。

至此为止，welcome部分完成

网页效果图

看着还不错，接着做！

5.production部分

.production{width: 100%;margin: 0 auto;
}

（1）轮播图加描述及后退控制器

<div class="imgs"><ul><li><img src="../img/pro-center1.jpg" alt=""width="320"height="240"><div>微波炉-马23bfs</div></li><li><img src="../img/pro-center2.jpg" alt=""width="320"height="240"><div>饮水机-nc-zai</div></li><li><img src="../img/pro-center3.jpg" alt=""width="320"height="240"><div>电饭锅-rc-iozwh</div></li><li><img src="../img/pro-center4.jpg" alt=""width="320"height="240"><div>迷你音响-rs-168</div></li><li><img src="../img/pro-center5.jpg" alt=""width="320"height="240"><div>空气清新机-fes-547</div></li><li><img src="../img/pro-center6.jpg" alt=""width="320"height="240"><div>电热水器-arc-1</div></li></ul><!--后退控制器--><div class="next"><img src="../img/index-xb3.png" alt="next"></div></div>

.production p{width: 60%;font-size: 14px;color: #666666;margin: 0 auto;text-align: center;
}
.imgs{margin: 70px 0;width: 100%;overflow: hidden;position: relative;
}
.imgs ul{width: 2000px;overflow: hidden;
}
.imgs li{float: left;background-color: #e5e5e5;
}
.imgs li:hover{background-color: #029df2;color: white;
}
.imgs .next{position: absolute;top: 50%;margin-top: -16px;right: 50px;
}

笔者选择将每个图片底部加个div标签，div中是文本内容，并且给它们一个背景色。几个图片设置浮动，在ul中清除浮动。有悬停效果。后退控制器还是用到绝对定位，原理不再赘述。

至此为止，production部分完成

看一眼效果怎么样

效果很不错，继续！

6.新闻部分

.news{width: 100%;
}

（1）左侧图文及包裹其和右侧文本的article

 <!--左侧图文--><div class="part1"><img src="../img/news01.png" alt=""height="307"width="553"><div>AWE2016开幕，企业巨头竞相争艳，大咖云集</div></div>

.news p{font-size: 14px;color: #666666;text-align: center;
}
.news article{width: 90%;margin: 30px auto;display: flex;justify-content: space-around;
}
article .part1{width: 553px;position: relative;
}
article .part1 div{color: #fff;width: 553px;line-height: 30px;background-color: #029df2;position: absolute;bottom: 20%;padding: 10px 0;text-indent: 1em;
}

给父亲标签article一个宽度，再次用到弹性布局及justify-content空间分配。div文本标签用到绝对定位，设置1字符的缩进，调整div宽度让其正好与图片等宽，设置颜色，字体大小，各种边距等等。

（2）右侧文本

这里是笔者觉得整个页面中最复杂的部分，因为他的样式是在太多了！故该部分再分出几个小部分来吧，大家慢慢分析。

PS:右侧文本是由.part2标签包裹的。

article .part2{width: 50%;
}

（a）日期样式

<div class="date"><div class="day">15</div><div class="year">2016-03</div>
</div>

.content标签为包裹日期样式和日期右侧文本的标签，也就是笔者把这两块作为一个整体，下面的列表作为另一个整体处理的。

.part2 .content{overflow: hidden;margin-bottom: 30px;
}
.part2 .date{width: 10%;text-align: center;float: left;
}
.part2 .date .day{font-size: 30px;padding: 10px;border: 1px #029df2 solid;font-weight: bolder;color: #029df2;
}
.part2 .date .year{font-size: 12px;background-color: #029df2;color: #ffffff;
}

这个日期样式，依然有很多方法实现，笔者选用的是用两个div标签设置样式。“天数”标签设置了内间距撑开边框，调整字体大小，颜色，增加边框，日期的上半部分就完成了。下半部就是一个简单的有背景色，文字居中的div标签。这个日期部分要给个浮动。

（b）日期右面的文本

 <div class="text"><h3><a href="">AWE2016开幕，企业巨头竞相争艳，大咖云集</a></h3><p>2016年3月9日9:30，由中国家电协会主办的中国家电及消费电子博览会—上海2016在上海新国际博览中心隆重开幕。在这个全球瞩目、亚太区最大规模的家电展会上......</p></div>

.text{width: 80%;float: left;margin-left: 10px;
}
.text p{text-align: left;padding-top: 15px;
}
.text h3 a{color: #029df2;
}

给个浮动与日期保持在一行，设置文本样式即可。

（c）新闻列表

<!--新闻列表-->
<ul><li><a href="">三大“黑科技”锁定中国消费者的心<small>2016-03-15</small></a></li><li><a href="">正品控宣言：让商品拥有独一无二的身份证<small>2016-03-15</small></a></li><li><a href="">2016AWE：方太最全智能嵌入式厨电套系亮相<small>2016-03-15</small></a></li><li><a href="">美的焖香鼎釜IH智能电饭煲全球首发   <small>2016-03-15</small></a></li><li><a href="">AWE2016盛大开幕 释放家电业“引力波”  <small>2016-03-14</small></a></li><li><a href="">2016年中国家电发展高峰论坛文字实录  <small>2016-03-14</small></a></li>
</ul>

.part2 ul{width: 600px;padding-left: 20px;margin-left: 40px;position: relative;
}
.part2 li{line-height: 40px;border-top: #666666 1px dotted;
}
.part2  a{color: #666666;text-decoration: none;
}
.part2 ul li:last-child{border-bottom: #666666 1px dotted;
}
.part2 li small{position: absolute;right: 20px;
}

观察效果图，不用废掉列表的样式（也就是前面的点），每个新闻都是一个a标签，祛除a标签的下划线并设置颜色。每个新闻上下都有点线，笔者的做法是把每个新闻都加一个上边线，在最后一个新闻加一个下边线即可。这里的新闻时间为居右对齐，笔者用到了定位。

至此为止，新闻部分完成

这里真的是太费力了，看看效果吧（长舒一口气）

效果总算是还不错，再来！

7.视频部分

这里其实是一个滚动轮播图，不再赘述。
不过悬停效果有点意思，给边框加阴影，显得更加立体，这里可以注意一下。
此处直接上代码。

<ul><li><img src="../img/video_06.jpg" alt=""height="195"width="260"><div>享受生活,从饮水开始！</div><p>双层过滤滤芯，使饮水更加安全、放心。</p></li><li><img src="../img/video_08.jpg" alt=""height="195"width="260"><div>把时间留在最美一刻！</div><p>RFE-326三门冰箱，特大存储容量，更节能。</p></li><li><img src="../img/video_11.jpg" alt=""height="195"width="260"><div>RS-197，给你一份净土。</div><p>RS-197采用全新技术，高效净化空气。</p></li><li><img src="../img/video_13.jpg" alt=""height="195"width="260"><div>纽曼咖啡机，诠释生活真理。</div><p>精致外观与健全的功能，居家的明早选择！</p></li><div class="prev2"><img src="../img/index-xb2.png" alt=""width="32"height="32"></div><div class="next2"><img src="../img/index-xb3.png" alt=""width="32"height="32"></div></ul>

.video{width: 100%;
}
.video h1+p{width: 60%;margin: 0 auto;
}
.video ul{width: 80%;margin: 40px auto;list-style-type: none;display: flex;justify-content: space-around;overflow: hidden;padding:  20px;position: relative;
}
.video ul li{width: 100%;float: left;text-align: center;
}
.video ul li div{color: #029df2;
}
.video ul li:hover{box-shadow:5px 5px 5px rgba(2, 157, 242, 0.34),-5px -5px 5px rgba(2, 157, 242, 0.34);
}
.video .prev2,.next2{position: absolute;top: 50%;margin-top: -16px;
}
.video .prev2{left: 0px
}
.video .next2{right: 0px;
}

8.实现页脚

页脚比较简单，直接上代码然后挑重点分析。

<footer><div class="footer-main"><div class="footer-nav"><dl><dt><a href="#">关于我们</a></dt><dd><a href="#">公司简介</a></dd><dd><a href="#">企业文化</a></dd><dd><a href="#">企业荣誉</a></dd><dd><a href="#">资格认证</a></dd><dd><a href="#">研发生产</a></dd></dl><dl><dt><a href="#">产品中心</a></dt><dd><a href="#">饮水机</a></dd><dd><a href="#">冰箱</a></dd><dd><a href="#">洗衣机</a></dd><dd><a href="#">空调</a></dd><dd><a href="#">其他产品</a></dd></dl><dl><dt><a href="#">新闻中心</a></dt><dd><a href="#">热点聚焦</a></dd><dd><a href="#">企业新闻</a></dd><dd><a href="#">行业新闻</a></dd><dd><a href="#">热点聚焦</a></dd></dl><dl><dt><a href="#">客户服务</a></dt><dd><a href="#">招商网加盟</a></dd><dd><a href="#">购买流程</a></dd><dd><a href="#">售后服务</a></dd><dd><a href="#">技术支持</a></dd><dd><a href="#">常见问题</a></dd></dl><dl><dt><a href="#">联系我们</a></dt><dd><a href="#">在线留言</a></dd><dd><a href="#">网上咨询</a></dd><dd><a href="#">联系我们</a></dd></dl></div><form action=""><input type="text"placeholder="请输入您的姓名"><input type="text"placeholder="请输入您的联系方式"><textarea name="" id="" cols="30" rows="10"placeholder="请输入您的留言"></textarea><br><input type="submit"></form></div><div class="footer-footer">Copyright&copy;2030 teacherhou.com All Rights Reserved   Design by WenCun 粤ICP备13005446号-1</div></footer>

footer{height: 500px;width: 100%;background-color: #3091db;
}
.footer-main{width: 100%;overflow: hidden;
}
.footer-nav{width: 40%;display: flex;justify-content: space-around;margin-left: 200px;padding-top: 50px;float: left;
}
.footer-nav dl{float: left;text-align: center;
}
.footer-nav dt{font-size: 20px;line-height: 30px;border-bottom: 2px white solid;margin-bottom: 20px;
}
.footer-nav dd {font-size: 14px;padding: 10px 0;
}.footer-nav a{color: white;text-decoration: none;
}
.footer-nav a:hover{color: pink;
}
form{width: 500px;padding: 50px 0 0 30px;float: right;
}
form input,textarea{outline: none;border: 1px #fff solid;background-color: #3091db;color: white;
}
form input{height: 30px;
}
form textarea{width: 345px;margin-top: 10px;
}
::placeholder{color: white;
}
form input[type=submit]{width: 80px;color: white;
}
.footer-footer{width: 100%;border-top: 2px white solid;color: white;font-size: 18px;margin-top: 150px;line-height: 40px;text-align: center;
}

首先是一个自定义的列表，每一列都有一个标题，每一个单元都是一个a标签。指定页脚的宽高并给一个背景色，将导航栏的每一列浮动，这里再次用到弹性布局和justify-content空间分配。效果图中导航栏距离左侧有些距离，用margin-left实现。废掉a标签的下划线并指定颜色，给个悬停效果，导航栏完成。

这里要着重讲下form表单。

首先祛除输入框自带的外边线，指定边框样式，以及文字颜色。调整表单元素之前的距离，调整宽高，增强美观性。placeholder设置样式的话要用::双冒号，修改按钮文字颜色时用到了属性选择器。

页脚的页脚要设置一个上边线，文字大小颜色边距行高居中等等。

至此为止，页脚完成

上一下效果图

网页总体效果图

总结

虽然差一点细节，布局也不是最美观的，但是此次制作过程让笔者收益颇丰。希望笔者的制作过程可以帮助到刚刚入门HTML及CSS的同学们，不足之处也请大家多多批评指正！今日的网页界面制作分享到此结束，感谢！

源码

链接：https://pan.baidu.com/s/17QZP5NyXxn8H1lnBlOR4Ow
提取码：z1ed

如果觉得还不错请点个赞吧~！