项目介绍
学习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©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
如果觉得还不错请点个赞吧~！
3321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
