基础课很快就结束了，终于要迎来期待已久的大神班了！
如果说要拿出一个项目来总结基础班的知识，我觉得这个努比亚的首页最能概括了
先上我做的效果
https://afue.github.io/nubia_index/
再上我的源代码
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Nubia-努比亚手机</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
/*通配*/
h1{
display: none;
}
.sameWidth{
width: 1200px;
margin: 0 auto;
}
.redSpan{
color:#f00;
font-weight:normal;
}
/*头部开始*/
.header{
height: 180px;
}
/*顶部导航栏*/
.top-bar{
background-color: #000;
}
.top{
height: 60px;
}
.top .logo{
float: left;
width: 190px;
height: 60px;
background: url("images/nubia-logo.png") no-repeat 0 0;
}
.top .nav{
height: 60px;
line-height: 60px;
float: left;
margin-left: 330px;
}
.top a:hover{
color:#f00;
text-decoration: none;
}
.nav ul li:hover a{
color:#f00;
}
.nav ul li{
float: left;
margin-right: 40px;
}
.nav ul li a{
color: #fff;
font-size: 16px;
}
.top .user{
height: 60px;
float: right;
}
.user a{
font-size: 12px;
color: #ccc;
}
.user li{
height: 30px;
line-height: 30px;
float: left;
padding-top:15px;
padding-right:15px;
}
.user-icon{
background: url("images/nubia-syb-all.png") no-repeat 0 0;
width: 30px;
height: 30px;
display: inline-block;
}
/*手机推荐导航*/
.phones > ul{
height: 122px;
width: 1040px;
margin: 0 auto;
}
.phones > ul > li{
width: 140px;
margin-right:10px;
float: left;
height: 122px;
box-sizing:border-box;
}
.phones > ul > li:hover{
border-bottom: 2px solid #f00;
}
.phones > ul > li:last-of-type{
/*疑问：为什么会掉下来10像素？*/
margin-top:-10px;
margin-right:0;
}
.phones > ul > li a{
width: 140px;
height: 120px;
display: inline-block;
text-align: center;
}
.phones > ul > li img{
width: 120px;
height: 80px;
}
.phones > ul > li a > span{
display: inline-block;
width: 140px;
font-size:12px;
color: #ccc;
}
/*头部结束*/
/*内容开始*/
.content{
background-color: #f4f4f4;
}
/*video容器*/
.video{
height:270px;
}
.video ul{
width:1200px;
height:270px;
}
.video ul li{
float: left;
margin:10px 5px;
width:390px;
height:250px;
background-size: auto 250px;
position:relative;
}
.video-li-1{
background: url("images/video1.jpg") no-repeat center;
}
.video-li-2{
background: url("images/video2.jpg") no-repeat center;
}
.video-li-3{
background: url("images/video3.jpg") no-repeat center;
}
.video ul a{
text-decoration: none;
width:390px;
height:250px;
display: inline-block;
}
.video ul li a > div{
opacity: 0;
position: relative;
width:390px;
height:250px;
background-color: rgba(0,0,0,0.5);
transition:opacity 800ms;
}
.video-icon{
width: 60px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
margin-left:-30px;
margin-top:-30px;
}
.video-title{
width: 160px;
height: 50px;
position: absolute;
left: 50%;
margin-left:-80px;
bottom: 40px;
text-align: center;
}
.video-title h2{
font-size: 16px;
color: #fff;
}
.video-title p{
font-size: 12px;
color: #fff;
}
/*video容器基本样式结束，动画开始*/
/*50，70，55，60*/
.video ul li:hover a > div{
opacity: 1;
}
.video ul li:hover .video-icon{
animation:sparkle 3.3s linear infinite;
}
/*video容器动画结束*/
.title{
text-align: center;
height: 140px;
line-height: 45px;
padding-top:20px;
}
.title a{
color: #f00!important;
text-decoration: none;
}
.new-phone a{
color: #000;
}
.hava-a-look{
font-size:12px;
display: inline-block;
width: 110px;
height: 30px;
line-height:30px;
text-align: center;
border: 1px solid #ccc;
border-radius: 3px;
}
.hava-a-look:hover{
border: 1px solid #f00;
color: #f00;
}
/*z11黑金版*/
.new-phone-z11{
height: 400px;
width: 1200px;
background-color: #fff;
overflow: hidden;
position: relative;
}
.new-phone-z11 img{
height: 260px;
width: auto;
position: absolute;
left: -40px;
top:70px;
transform:translateX(0);
transition:transform 1s;
}
.new-phone-z11:hover img{
transform:translateX(40px);
}
.new-phone-z11 .npz-text1{
position: absolute;
top:150px;
right:145px;
font-size:18px;
line-height:25px;
display: inline-block;
height: 25px;
margin: 0;
}
.new-phone-z11 .npz-text2{
position: absolute;
top:175px;
right:165px;
font-size:12px;
display: inline-block;
height: 15px;
line-height: 15px;
color: #666;
}
.new-phone-z11 .npz-text3{
position: absolute;
top:200px;
right:136px;
}
/*其他手机*/
.new-phone-other{
margin-top:10px;
height: 795px;
width: 1200px;
position: relative;
}
.nfo-left{
float: left;
width: 400px;
height: 795px;
overflow: hidden;
position: relative;
background-color: #fff;
}
.nfo-left img{
width: 400px;
transition:transform 1s;
}
.nfo-left a{
width: 400px;
height: 795px;
display: inline-block;
}
.nfo-left h2{
position: absolute;
left:135px;
bottom:85px;
font-size:18px;
line-height:25px;
display: inline-block;
height: 25px;
margin: 0;
}
.nfo-left .nfol-text1{
position: absolute;
left:163px;
bottom:70px;
font-size:12px;
display: inline-block;
height: 15px;
line-height: 15px;
color: #666;
}
.nfo-left .nfol-text2{
position: absolute;
left:143px;
bottom:30px;
}
.nfo-left:hover img{
transform:scale(1.1);
}
.nfo-right{
float: right;
width: 790px;
height: 795px;
}
.nfor-top{
width: 790px;
height: 390px;
background-color: #fff;
margin-bottom:10px;
overflow: hidden;
position: relative;
}
.nfor-top a{
width: 790px;
height: 390px;
display: inline-block;
}
.nfor-top img{
height: 250px;
transition:transform 1s;
}
.nfor-top h2{
position: absolute;
left:332px;
bottom:85px;
font-size:18px;
line-height:25px;
display: inline-block;
height: 25px;
margin: 0;
}
.nfor-top .nfort-text1{
position: absolute;
left:364px;
bottom:70px;
font-size:12px;
display: inline-block;
height: 15px;
line-height: 15px;
color: #666;
}
.nfor-top .nfort-text2{
position: absolute;
left:350px;
bottom:30px;
}
.nfor-top:hover img{
transform:translateX(-40px);
}
.nforb-l{
float: left;
width: 390px;
height: 395px;
background-color: #fff;
overflow: hidden;
position: relative;
}
.nforb-l a{
width: 390px;
height: 395px;
display: inline-block;
}
.nforb-l img{
height: 320px;
transition:transform 1s;
}
.nforb-l h2{
position: absolute;
left:133px;
bottom:45px;
font-size:18px;
line-height:25px;
display: inline-block;
height: 25px;
margin: 0;
}
.nforb-l .nforbl-text{
position: absolute;
left:175px;
bottom:30px;
font-size:12px;
display: inline-block;
height: 15px;
line-height: 15px;
color: #666;
}
.nforb-l:hover img{
transform:scale(1.1);
}
.nforb-r{
float: right;
width: 390px;
height: 395px;
background-color: #fff;
overflow: hidden;
position: relative;
}
.nforb-r a{
width: 390px;
height: 395px;
display: inline-block;
}
.nforb-r img{
height: 320px;
transition:transform 1s;
}
.nforb-r h2{
position: absolute;
left:128px;
bottom:45px;
font-size:18px;
line-height:25px;
display: inline-block;
height: 25px;
margin: 0;
}
.nforb-r .nforbr-text{
position: absolute;
left:155px;
bottom:30px;
font-size:12px;
display: inline-block;
height: 15px;
line-height: 15px;
color: #666;
}
.nforb-r:hover img{
transform:scale(1.1);
}
/*精选配件*/
.parts-list,.parts-list > ul{
width: 1200px;
height: 300px;
}
.parts-list > ul >li{
float: left;
height: 300px;
background-color: #fff;
margin-right:10px;
overflow: hidden;
}
.parts-list > ul >li > a{
height: 300px;
width: 295px;
display: inline-block;
text-decoration: none;
}
.parts-list > ul >li > a > img{
height: 240px;
transition:transform 1s;
}
.parts-list > ul >li > a >p{
width: 290px;
text-align: center;
line-height: 25px;
color: #666;
position: relative;
}
.par-list1{
width: 295px;
}
.par-list2{
width: 290px;
}
.par-list3{
width: 290px;
}
.par-list4{
width: 295px;
margin-right:0!important;
}
.parts-list > ul >li:hover img{
transform:scale(1.1);
}
/*底部全部机型列表*/
.all-phones{
/*height:500px;*/
margin-top:100px;
padding-top:40px;
background-color: #fff;
}
.phones-list-border{
padding-top:20px;
border-top:1px solid #ccc;
}
.phones-list{
width: 1000px;
margin: 0 auto;
}
.apl-title{
height: 17px;
line-height: 17px;
}
.apl-title img{
width: 14px;
height: 13px;
}
.apl-item{
padding-top:25px;
height: 190px;
}
.apl-item > li{
height: 190px;
float: left;
margin-right: 100px;
}
.apl-item > li > ul >li > h3{
font-size:12px;
color: #333;
}
.apl-item > li > ul >li > a{
color: #999;
text-decoration: none;
}
.apl-item > li > ul >li > a:hover{
color: #f00;
}
/*内容结束*/
/*尾部开始*/
.footer{
height: 130px;
}
.footer-box{
height: 130px;
clear:left;
}
.footer-top,.footer-bottom{
height: 30px;
line-height: 30px;
width: 1000px;
margin: 10px auto;
}
.footer-top a{
font-size:10px;
color: #999;
text-decoration: none;
vertical-align: middle;
}
.footer-top a:hover{
color: #f00;
}
.footer-top .just-a-line{
font-size:10px;
color: #999;
margin:0 10px;
}
.app-icon,.cloud-icon,.weibo-icon,.tel-icon{
width: 30px;
height: 30px;
display: inline-block;
margin:0 8px;
}
.app-icon{
background: url("images/nubia-syb-all.png") no-repeat -246px 0px;
}
.cloud-icon{
background: url("images/nubia-syb-all.png") no-repeat -186px 0px;
}
.weibo-icon{
background: url("images/nubia-syb-all.png") no-repeat -126px 0px;
}
.tel-icon{
background: url("images/nubia-syb-all.png") no-repeat -216px 0px;
}
.footer-top strong{
font-weight:normal;
font-size:16px;
color: #ccc;
}
/*copyright*/
.footer-bottom{
font-size:10px;
color: #ccc;
}
.footer-bottom a{
text-decoration: none;
font-size:10px;
color: #ccc;
}
.footer-bottom img{
height: 15px;
margin: 0 5px;
}
.hover-black:hover{
color: #000;
}
/*尾部结束*/
@keyframes sparkle {
0%{
transform:scale(1);
}
20%{
transform:scale(1);
}
40%{
transform:scale(0.6);
}
60%{
transform:scale(1.4);
}
80%{
transform:scale(0.8);
}
100%{
transform:scale(1);
}
}
</style>
</head>
<body>
<!--头部开始-->
<h1>努比亚手机-Nubia</h1>
<div class="header">
<!--顶部导航条开始-->
<div class="top-bar">
<div class="top sameWidth">
<a href="javascript:"><div class="logo"></div></a>
<div class="nav">
<ul>
<li><a href="javascript:">首页</a></li>
<li><a href="javascript:">商城</a></li>
<li><a href="javascript:">产品</a></li>
<li><a href="javascript:">应用</a></li>
<li><a href="javascript:">服务</a></li>
<li><a href="javascript:">体验店</a></li>
<li><a href="javascript:">社区</a></li>
</ul>
</div>
<ul class="user">
<li><a href="javascript:" class="user-icon"></a></li>
<li><a href="javascript:">注册</a></li>
<li><a href="javascript:">登录</a></li>
</ul>
</div>
</div>
<!--顶部导航条结束-->
<div class="phones sameWidth">
<ul>
<li><a href="javascript:"><span>Z11 miniS <strong class="redSpan">新款</strong></span></a></li>
<li><a href="javascript:"><span>Z11</span></a></li>
<li><a href="javascript:"><span>Z11 Max</span></a></li>
<li><a href="javascript:"><span>Z11 mini</span></a></li>
<li><a href="javascript:"><span>N1</span></a></li>
<li><a href="javascript:"><span>布拉格S</span></a></li>
<li><a href="javascript:"><span>My 布拉格</span></a></li>
</ul>
</div>
</div>
<!--头部结束-->
<!--内容开始-->
<div class="content">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
<div class="video sameWidth">
<ul>
<li class="video-li-1"><a href="javascript:">
<div><div class="video-title"><h2>Z11 黑金版</h2><p>产品视频</p></div></div>
</a></li>
<li class="video-li-2"><a href="javascript:">
<div><div class="video-title"><h2>微距相机</h2></div></div>
</a></li>
<li class="video-li-3"><a href="javascript:">
<div><div class="video-title"><h2>nubia Z11</h2><p>突破边界</p></div></div>
</a></li>
</ul>
</div>
<div class="products sameWidth">
<div class="new-phone">
<div class="title">
<h2>最新产品</h2><a href="javascript:">查看全部手机></a>
</div>
<a href="javascript:"><div class="new-phone-z11">
<h2 class="npz-text1">Z11 黑金版</h2><span class="npz-text2">无边美学</span><span class="npz-text3 hava-a-look">一探究竟</span>
</div></a>
<div class="new-phone-other">
<div class="nfo-left">
<a href="javascript:"><h2>nubia Z11 miniS</h2><span class="nfol-text1">手机摄影专家</span><span class="nfol-text2 hava-a-look">一探究竟</span></a>
</div>
<div class="nfo-right">
<div class="nfor-top">
<a href="javascript:"><h2>nubia Z11 咖啡金</h2><span class="nfort-text1">无边框旗舰手机</span><span class="nfort-text2 hava-a-look">一探究竟</span></a>
</div>
<div class="nfor-bottom">
<div class="nforb-l">
<a href="javascript:"><h2>nubia Z11 Max</h2><span class="nforbl-text">大·不同</span></a>
</div>
<div class="nforb-r">
<a href="javascript:"><h2>nubia Z11 mini</h2><span class="nforbr-text">小世界·大精彩</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="phone-parts">
<div class="title">
<h2>精选配件</h2><a href="javascript:">查看全部配件></a>
</div>
<div class="parts-list">
<ul>
<li class="par-list1"><a href="javascript:"><p>努比亚快充移动电源</p></a></li>
<li class="par-list2"><a href="javascript:"><p>努比亚圈铁耳机</p></a></li>
<li class="par-list3"><a href="javascript:"><p>努比亚炫美自拍杆</p></a></li>
<li class="par-list4"><a href="javascript:"><p>nubia摄影三脚架</p></a></li>
</ul>
</div>
</div>
</div>
<div class="all-phones">
<div class="phones-list-border sameWidth">
<div class="phones-list">
<div class="apl-title">>全部机型</div>
<ul class="apl-item">
<li>
<ul>
<li><h3>Z系列</h3></li>
<li><a href="javascript:">nubia Z11</a></li>
<li><a href="javascript:">nubia Z11 Max</a></li>
<li><a href="javascript:">nubia Z11 mini</a></li>
</ul>
</li>
<li>
<ul>
<li><h3>M系列</h3></li>
<li><a href="javascript:">nubia 布拉格S</a></li>
<li><a href="javascript:">nubia My 布拉格</a></li>
</ul>
</li>
<li>
<ul>
<li><h3>配件</h3></li>
<li><a href="javascript:">保护壳</a></li>
<li><a href="javascript:">皮套</a></li>
<li><a href="javascript:">贴膜</a></li>
<li><a href="javascript:">耳机</a></li>
<li><a href="javascript:">数据线/充电器</a></li>
<li><a href="javascript:">周边产品</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--内容结束-->
<!--尾部开始-->
<div class="footer">
<div class="footer-box sameWidth">
<div class="footer-top">
<a href="javascript:">关于我们</a><span class="just-a-line">|</span><a href="javascript:">联系我们</a><span class="just-a-line">|</span><a href="javascript:">新闻中心</a><span class="just-a-line">|</span><a href="javascript:">加入我们</a><span class="just-a-line">|</span><a
href="javascript:">合作注册</a><span class="just-a-line">|</span><a href="javascript:">公益</a><span class="just-a-line">|</span><a href="javascript:">以旧换新</a><span class="just-a-line">|</span><a
href="javascript:">问题反馈</a><span class="just-a-line">|</span><a href="javascript:">简体中文</a><a href="javascript:" class="app-icon"></a><a
href="javascript:" class="cloud-icon"></a><a href="javascript:" class="weibo-icon"></a><a href="javascript:" class="tel-icon"></a><strong>服务热线：400-700-6600</strong></div>
<div class="footer-bottom">
<span>2012-2017 努比亚技术有限公司 版权所有 </span><a href="javascript:" class="hover-black">粤ICP备10006213号-2</a><a href="javascript:"><img
src="images/gs.jpg"></a><span>ICP经营许可证编号：粤B2-20120688</span><a href="javascript:">粤公网安备 44030502000309号</a>
</div>
</div>
</div>
<!--尾部结束-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这个demo就是对我这段时间基础班的一个总结，几乎用到了所有基础班的知识，不得不说老师出的题很不错。
虽然洋洋洒洒800行代码，但是实际上知识点并不算多，动画基本上都是用transform配合transition给个过度。
中间遇到两个奇葩问题:
底部footer-top的元素总是不在一个水平线上，a标签都掉出父元素范围了，后来在老师的指导下给了一个vertical-align:middle;终于解决了，这就是有大神带的好处！
导航栏浮动的那一排手机，最后一个li莫名其妙的掉了10像素，只好先给个margin-top：-10px；望大神指教。
学HTML5就选李南江，选培训机构我只选小码哥（www.520it.com）
