手机官网首页编写

结合之前所学知识，临摹手机官网首页文件。这次的课程综合案例是临摹OPPO手机官网首页。

临摹网页有以下几个步骤：
第一步：对原有界面的布局进行分析，看网页是分为几个模块布局；
第二步：针对每一模块，根据内容进行分块；
第三步：编写模块下的内容架构；
第四步：编写内容，图片，块的样式；
第五步：根据交互效果编写js文件；
小贴士：若内容样式一致，我们用列表来写。在网页编写中要善于使用div标签。
接下来具体分析每个模块内容。

CSS样式初始化

先初始化样式，清除网页样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
*{
    padding: 0;
    margin: 0;
    font-size: 14px;
}
ol,ul{
    list-style-type: none;
}/* 列表无标记 */
a{
    color:#666;
    text-decoration: none;
}/* 链接无下划线 */
.left{
    float:left;
}/* 左浮动 */
.right{
    float:right;
}/* 右浮动 */
.fade{
    opacity: 0;
}
.show{
    opacity: 1;
}
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
    width: 100%;
    height: 100px;
    /* border: 1px solid #000; */
}
.container{
    width: 1280px;
    /* border: 1px solid #f00; */
    margin: 0 auto;
    /* 垂直居中 */
}

页面顶部

页面顶部很简单，一个绿色的div，颜色我们可以通过画图工具吸取，在css文件中设置。

1
2
3
<div id="top">
       <div class="container"></div>
   </div>
1
2
3
4
#top{
    height: 5px;
    background-color: #00925f;
}

页面头部

页面头部可以划分为左右两部分，我们对左右分别设置内容和样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="header">
      <div class="container">
          <div class="header_left left">
              <div class="weibo"></div>
              <div class="tengxun"></div>
              <div class="tel">4001-666-888</div>
          </div>
          <ul class="right">
              <li><a href="#">登录</a></li>
              <li><a href="#">注册</a></li>
              <li><a href="#">积分兑换</a></li>
              <li><a href="#">帮助中心</a></li>
              <li class="car"><span></span><a href="#">购物车</a></li>
          </ul>
      </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#header{
    height: 30px;
    background-color: #2d2d2d;
}
#header .weibo{
    width: 20px;
    height: 17px;
    background: url("img/7.png") no-repeat -47px -95px;
}
#header .tengxun{
    width: 20px;
    height: 20px;
    background: url("img/7.png") no-repeat -27px -92px;
}
#header .header_left div{
    float: left;
    margin: 5px 10px 0px;
}
#header ul li{
    float: left;
    line-height: 30px;/* 水平居中  */
}
#header .tel{
    color:#17925f;
    font-size: 14px;
}
#header li a{
    color: #b2b2b2;
    font-size: 14px;
    padding: 0px 15px ;
    border-right: 1px solid #b2b2b2;
}
/* 鼠标滑动颜色变化 */
#header li a:hover{
    color: #00925f;
}
#header .car a{
    border: none;
    padding-left: 8px;
}
#header .car span{
    width: 19px;
    height: 16px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    background: url("img/7.png") no-repeat 0px -96px;
}

页面导航

导航也可以分为两大部分，左边是一个图片，右边可以用列表来写。代码与页面头部类似，这里不详细给出。

页面banner

导航栏部分我们使用了swiper插件，可以实现banner中的图片滑动。

1
2
3
4
5
6
7
8
9
<div id="banner">
       <div class="swiper-container">
           <div class="swiper-wrapper"></div>
           <div class="swiper-pagination"></div>
           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
       </div>
       <div class="banner-nav-bg"></div>
   </div>

页面明星机型

明星机型部分可以分为上下两部分，下部分在分为4部分。

在这里我们给出鼠标滑动上去，图片上移，边框显示样式源码。

1
2
3
4
5
6
7
8
9
10
#star li{
    width: 300px;
    border-bottom: 4px solid #dfdfdf; 
    float: left;
    transform: all .3s;
}
#star li:hover{
    border-bottom: 4px solid #00925f;
    transform: translateY(-10px);
}

页面精选配件

精选配件部分可以分为左右两部分，在通过浮动来排列图片和列表。在这里我们引入animate-CSS文件来实现块区域左右上下划入显示。

这里给出滑动显示的js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// 获取鼠标滚轮位置
$ (window).scroll(function(){
    var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(scrollT);测试
    var backTop = $("#world").offset().top - $(window).height()/2;
    // console.log(backTop);
    if(scrollT>backTop){
        $(".a1").addClass("animated bounceInRight show").removeClass("fade");
        $(".a2").addClass("animated bounceInDown show").removeClass("fade");
        $(".a3").addClass("animated bounceInUp show").removeClass("fade");
        $(".a4").addClass("animated bounceInLeft show").removeClass("fade");
    }
});

页面搜索OPPO

搜索OPPO部分分为左右两部分，左边列表来制作，右边通过自定义列表来制作。

自定义列表具体使用方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="w_right right">
    <div class="w_title">
        <div class="news">新闻</div>
        <div class="wb">微博</div>
    </div>
    <ul>
        <li>
            <dl>
                <dt>
                    <img src="img/13.jpg" alt="">
                </dt>
                <dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
            </dl>
        </li>
    </ul>
</div>

页面服务、页面售后服务、页面底部

页面服务、页面售后服务、页面底部部分都比较简单，我们可以用列表来完成。
页面服务部分：

页面售后服务部分：

页面底部部分：

在这里展示一下图片中图标的显示，我们需要量出图标的长和宽，在测量出偏移量。利用span标签组合行内元素。源码如下：

1
2
3
4
5
6
7
#after_sale .xin{
    width: 20px;
    height: 17px;
    background: url("img/7.png") no-repeat -47px -95px;
    display: inline-block;
    vertical-align: middle;
}

在网页中导航吸顶灯、回到顶部等效果的js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 返回顶部功能
// 页面加载后执行
window.onload = function(){
    
    var totop = document.getElementById("btn");
    totop.style.display="none";
    // 导航栏位置
    var nav = document.getElementById("nav");
    var navTop=nav.offsetTop;
    // console.log(navTop);
    var timer=null;
    totop.onclick = function(){
        // 周期性定时
        timer=setInterval(function(){
            var backTop1 = document.documentElement.scrollTop || document.body.scrollTop ;
            // 越滚越慢
            var speedTop=backTop1/5;
            document.documentElement.scrollTop = backTop1-speedTop;
            if(backTop1==0){
                clearInterval(timer);
            }
        },30);
    }
    // 按键是否显示
    var pageHeight=700;
    window.onscroll=function(){
        var backTop2=document.documentElement.scrollTop || document.body.scrollTop 
        if(backTop2>pageHeight){
            totop.style.display="block";
        }
        else{
            totop.style.display="none";
        }
        // 吸顶灯效果
        if(backTop2>navTop){
            nav.style.position="fixed";
            nav.style.top="0";
            nav.style.left="0";
            nav.style.zIndex="100";
        }
        else{
            nav.style.position="";
        }
    }
}