Web项目实战分享——小米官网

Web项目实战分享——小米官网

大约每个学习过前端的学习者来说，都接触过web项目的实战，业内最真实的的，应该是自己独立编写一个网页项目，当然如果你是大佬的话，这只是小菜一碟，而如果你是小白或正在学习该部分知识的人，这一小节你可以融会贯通的话，说明你就可以出师了，它用到了HTML5+css+JavaScript+iconfont的内容，相信你一定会有所收获的。

---

提示：这并不是我最近写的项目，而是我大一与一个大佬学习练习的课程实践，今天特意分享出来，供大家参考学习。

目录

Web项目实战分享——小米官网

文章目录

前言

一、前端的发展？

二、小米官网案例介绍

1.效果展示

2.源码展示

总结

---

前言

1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，Tim Berners-Lee创建了W3C；这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP以及笔者本人诞生。万维网（WWW）是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的，这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面，这样的功能已经完全满足学术交流的需要，所以网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得愈加丰富，因此早期网页的局限性也逐渐显露出来。

---

 

一、前端的发展？

  2014年，第五代HTML标准发布。H5是由浏览器厂商主导，与W3C合作制定的一整套Web应用规范，至今仍在不断补充新的草案。我们可以清晰的感受到这一系列规范背后隐含的领导者的勃勃雄心：占领所有屏幕。

二、小米官网案例介绍

1.效果展示

以图片为例：

：

 

2.源码展示

代码如下（部分）：

HTML5：

 <!--应用-->
                    <li class="flex-item">
                        <h2 class="title">应用</h2>
                        <div class="slider program">
                            <div class="slider-box">
                                <input type="radio" id="btn12" name = "btn3" checked>
                                <label for="btn12"></label>
                                <div class="slider-item">
                                    <h2 class="title"><a href="">2017金米奖</a></h2>
                                    <p class="abs"><a href="">最优秀的应用和游戏</a></p>
                                    <p class="price"></p>
                                    <a href="javascript:;" class ="img">
                                        <img src="images/hot-pd/3332da7d-4056-4694-9548-c83b7b3af7d3.png" alt="#" width="216" height="154">
                                    </a>
                                </div>
                            </div>
                            <div class="slider-box">
                                <input type="radio" id="btn13" name = "btn3">
                                <label for="btn13"></label>
                                <div class="slider-item">
                                    <h2 class="title"><a href="">Forest</a></h2>
                                    <p class="abs"><a href="">帮助您专心于生活中每个重要时刻</a></p>
                                    <p class="price">免费</p>
                                    <a href="javascript:;" class ="img">
                                        <img src="images/hot-pd/T1TkKvBCKv1R4cSCrK.png" alt="#" width="216" height="154">
                                    </a>
                                </div>
                            </div>
                            <div class="slider-box">
                                <input type="radio" id="btn14" name = "btn3">
                                <label for="btn14"></label>
                                <div class="slider-item">
                                    <h2 class="title"><a href="">小米应用</a></h2>
                                    <p class="abs"><a href="">小米出品 必属精品</a></p>
                                    <p class="price">免费</p>
                                    <a href="javascript:;" class ="img">
                                        <img src="images/hot-pd/T15VZvB5Kv1R4cSCrK.png" alt="#" width="216" height="154">
                                    </a>
                                </div>
                            </div>

Css:

/*通用样式*/
.brick-list .img{
    display:block;
    margin:39px auto 22px;
}
.brick-list .pro-name a{
    font-size:14px;
    font-weight:400;
    color:#000;
}
.brick-list .small{
    font-size:12px;
    line-height:18px;
    margin-bottom:10px;
    color:#666;
}

JavaScript：

$(function(){
    var items = $(".home-elect,.intelligence,.match,.parts,.others");
    /*
    *  find()方法和children方法的区别是children方法只遍历子元素，对于子元素的
    *  后代不能遍历；
    */
    items.mouseenter(function(){
        var tabItems   = $(this).find(".h-tab li"),
              brickList = $(this).find(".brick-list"),
              moreLink = $(this).find(".brick-item .more-link small"),
              curIndex =0;
        tabItems.mouseenter(function(){
            var $this = $(this);
            $this.addClass("selected").siblings().removeClass("selected");
            brickList.removeClass("active");
            curIndex = $this.index();
            brickList.eq(curIndex).addClass("active");
            moreLink.text($this.text());
        });
    });
});

iconfont：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1496577455105'); /* IE9*/
  src: url('iconfont.eot?t=1496577455105#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1496577455105') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1496577455105') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1496577455105#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

---

总结

以上就是今天要分享的内容，本文仅仅简单举例了前端中网页的布局，而HTML5等前端语言提供了大量能使我们学习、涨薪的方式。