Web项目实战分享——小米官网
大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习该部分知识的人,这一小节你可以融会贯通的话,说明你就可以出师了,它用到了HTML5+css+JavaScript+iconfont的内容,相信你一定会有所收获的。
提示:这并不是我最近写的项目,而是我大一与一个大佬学习练习的课程实践,今天特意分享出来,供大家参考学习。
目录
前言
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等前端语言提供了大量能使我们学习、涨薪的方式。