<html>
<head>
<meta charset="utf-8">
<title>小米手机</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/init-animate.css">
</head>
<body>
<div class="box">
<header class="header">
<a href="#screen-1" class="header__logo">小米商城</a>
<nav class="header__nav">
<a href="javascript:;" class="header__nav-item header__nav-item_status_active header__nav-item_i_1">外观</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_2">配置</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_3">型号</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_4">说明</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_5">其他产品</a>
<a href="javascript:;" class="header__nav-item header__nav-item_custom_button">立即购买</a>
<div class="header__nav-item-tip"></div>
</nav>
</header>
<section class="screen-1">
<div class="screen-1__wrap">
<div class="screen-1__heading"><b>小米手机</b> 让每个人都能享受科技的乐趣</div>
</div>
<div class="screen-1__phone"></div>
<div class="screen-1__shadow"></div>
</section>
<section class="screen-2">
<div class="screen-2__wrap">
<div class="screen-2__heading">优美的设计，更令人着迷</div>
<div class="screen-2__subheading">采用受欢迎的设计，让它更加出色。
<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</div>
<div class="screen-2__phone">
<div class="screen-2__point screen-2__point_i_1">高清摄像</div>
<div class="screen-2__point screen-2__point_i_2">超薄机身</div>
<div class="screen-2__point screen-2__point_i_3">大屏显示</div>
<div>
</div>
</section>
<section class="screen-3">
<div class="screen-3__wrap">
<div class="screen-3__heading">小米6 变焦双摄 4轴防抖 </div>
<div class="screen-3__subheading">采用受欢迎的设计，让它更加出色。
<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</div>
<div class="screen-3__phone"></div>
<div class="screen-3__features">
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_1">
5.15“
</span>护眼屏
</div>
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_2">
1200
</span>万像素
</div>
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_3">
陶瓷
</span>4曲面玻璃
</div>
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_4">
骁龙835
</span>处理器
</div>
</div>
</div>
</section>
<section class="screen-4">
<div class="screen-4__wrap">
<div class="screen-4__heading">丰富的手机型号</div>
<div class="screen-4__subheading">找到适合你的手机</div>
<div class="screen-4__type">
<div class="screen-4__type-item screen-4__type-item_i_1">
<div class="screen-4__type-item-name">中国红</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
<div class="screen-4__type-item screen-4__type-item_i_2">
<div class="screen-4__type-item-name">土豪金</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
<div class="screen-4__type-item screen-4__type-item_i_3">
<div class="screen-4__type-item-name">太空灰</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
<div class="screen-4__type-item screen-4__type-item_i_4">
<div class="screen-4__type-item-name">绅士黑</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
</div>
</section>
<section class="screen-5">
<div class="screen-5__wrap">
<div class="screen-5__heading">游戏、学习、拍照、有这一部就够了</div>
<div class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</div>
</div>
<div class="screen-5__back"></div>
</section>
<section class="buy">
<a href="#" class="buy__button">立即购买</a>
</section>
<footer class="footer">
http://www.xiaomi.com
</footer>
</div>
<div class="outline">
<a href="javascript:;" class="outline__item outline__item_i_1">外观</a>
<a href="javascript:;" class="outline__item outline__item_i_2">配置</a>
<a href="javascript:;" class="outline__item outline__item_i_3">型号</a>
<a href="javascript:;" class="outline__item outline__item_i_4">说明</a>
<a href="javascript:;" class="outline__item outline__item_i_5">其他</a>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
My_phone网站设计.rar （20个子文件） 
My_phone网站设计 css 
base.css 273B animate.css 6KB init-animate.css 111B index.css 8KB img 
bg-screen-1.png 51KB phone-1.png 56KB icon-point-right.png 1KB phone-3.png 48KB icon-point-left.png 1KB screen-1-shadow.png 49KB bg-screen-5.png 1.31MB bg-screen-2.png 187KB phone-2.png 55KB screen-1-phone.png 324KB logo.png 1KB bg-screen-buy.png 106KB phone-4.png 53KB bg-screen-3.png 720KB
index.html 6KB js index.js 8KB资源评论
