diff --git a/.project b/.project
new file mode 100644
index 0000000..4d692ca
--- /dev/null
+++ b/.project
@@ -0,0 +1,37 @@
+
+
+ phoneshop
+ Create By HBuilder
+
+
+
+
+ com.aptana.ide.core.unifiedBuilder
+
+
+
+
+
+ com.aptana.projects.webnature
+
+
+
+ 1521754311333
+
+ 10
+
+ org.eclipse.ui.ide.orFilterMatcher
+
+
+ org.eclipse.ui.ide.multiFilter
+ 1.0-projectRelativePath-matches-false-false-bin
+
+
+ org.eclipse.ui.ide.multiFilter
+ 1.0-projectRelativePath-matches-false-false-setting
+
+
+
+
+
+
diff --git a/animate.css b/animate.css
new file mode 100644
index 0000000..a3811d3
--- /dev/null
+++ b/animate.css
@@ -0,0 +1,237 @@
+/*.screen-1__shadow,
+.screen-1__phone,
+.screen-1__heading{
+ visibility: hidden;
+}
+.outline{
+ opacity: 0;
+}
+*/
+
+.screen-1__heading,
+.screen-1__phone,
+.screen-1__shadow{
+
+ transition: all 1s; /*过渡动画*/
+}
+
+.screen-1__heading_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+
+.screen-1__heading_animate_done,
+.screen-1__phone_animate_done,
+.screen-1__shadow_animate_done{
+ opacity: 1;
+ transform: translate(0,0);
+}
+.screen-1__phone_animate_init{
+ opacity: 0;
+ transform: translate(0,-100%);
+}
+.screen-1__shadow_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+
+}
+
+
+/*屏幕1动画*/
+
+
+/*屏幕2动画*/
+.screen-2__heading,
+.screen-2__phone,
+.screen-2__subheading
+{
+
+ transition: all 1s; /*过渡动画*/
+}
+
+.screen-2__heading_animate_init{
+ opacity: 0;
+ transform: translate(0,-100%);
+}
+.screen-2__heading_animate_done,
+.screen-2__subheading_animate_done,
+.screen-2__phone_animate_done{
+ opacity: 1;
+ transform: translate(0,0);
+}
+.screen-2__subheading_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+.screen-2__phone_animate_init{
+ opacity: 0;
+ transform: translate(0,50%);
+}
+
+
+.screen-2__point{transition: all 1s 1s;}
+.screen-2__point_done{
+ opacity: 1;
+ transform: translate(0,0);
+}
+.screen-2__point_i_1_animate_init{
+ opacity: 0;
+ transform: translate(-100%,0);
+}
+.screen-2__point_i_2_animate_init,
+.screen-2__point_i_3_animate_init{
+ opacity: 0;
+ transform: translate(100%,0);
+}
+
+/*屏慕3动画*/
+
+.screen-3__heading,
+.screen-3__phone,
+.screen-3__subheading,
+.screen-3__features
+{
+ transition: all 1s; /*过渡动画*/
+}
+
+.screen-3__heading_animate_done,
+.screen-3__subheading_animate_done,
+.screen-3__phone_animate_done{
+ opacity: 1;
+ transform: translate(0,0);
+}
+
+.screen-3__features_animate_done{
+ transform: scale(1);
+}
+.screen-3__features_animate_init{
+ opacity: 0;
+ transform: scale(.5);
+}
+
+.screen-3__features__item{
+ transition: all 0.5s;
+}
+.screen-3__features__item:hover{
+ transform: scale(1.1);
+ cursor: pointer;
+ border-color: white;
+}
+
+.screen-3__heading_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+.screen-3__subheading_animate_init{
+ opacity: 0;
+ transform: translate(0,-100%);
+}
+.screen-3__phone_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*屏幕4动画*/
+.screen-4__heading,
+.screen-4__subheading{
+
+ transition: all 1s; /*过渡动画*/
+}
+
+.screen-4__heading_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+.screen-4__subheading_animate_init{
+ opacity: 0;
+ transform: translate(0,-100%);
+}
+.screen-4__subheading_animate_done,
+.screen-4__heading_animate_done{opacity: 1;transform: translate(0,0);}
+
+.screen-4__type__item_i_1{transition: all 1s .5s;}
+.screen-4__type__item_i_2{transition: all 1s 1s;}
+.screen-4__type__item_i_3{transition: all 1s 1.5s;}
+.screen-4__type__item_i_4{transition: all 1s 2s;}
+
+.screen-4__type__item_i_1_animate_init,
+.screen-4__type__item_i_2_animate_init,
+.screen-4__type__item_i_3_animate_init,
+.screen-4__type__item_i_4_animate_init{opacity: 0;}
+
+.screen-4__type__item_i_1_animate_done,
+.screen-4__type__item_i_2_animate_done,
+.screen-4__type__item_i_3_animate_done,
+.screen-4__type__item_i_4_animate_done{opacity: 1;}
+
+/*屏幕5动画*/
+.screen-5__heading,
+.screen-5-bg,
+.screen-5__subheading{
+
+ transition: all 1s; /*过渡动画*/
+}
+.screen-5__heading_animate_init{
+ opacity: 0;
+ transform: translate(0,-100%);
+}
+.screen-5__subheading_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+.screen-5-bg_animate_init{
+ opacity: 0;
+ transform: translate(0,100%);
+}
+.screen-5__subheading_animate_done,
+.screen-5-bg_animate_done,
+.screen-5__heading_animate_done{opacity: 1;transform: translate(0,0);}
+
+/*定义帧动画*/
+@-webkit-keyframes bounce{
+ 0%{
+ transform: scale(0);
+ }
+ 50%{
+ transform: scale(1);
+ }
+ 100%{
+ transform: scale(1);
+ }
+}
+/*使用帧动画*/
+.screen-2__point:before,
+.screen-2__point:after{
+ content: ' ';
+ display: block;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ background-color: rgba(255,0,0,0.4);
+ -webkit-animation: bounce 2s infinite;
+ border-radius: 50%;
+}
+.screen-2__point:before{
+ -webkit-animation: bounce 2s infinite 1s;
+}
+
+.screen-2__point_i_1:after,
+.screen-2__point_i_1:before{
+ left:200px;
+}
diff --git a/base.css b/base.css
new file mode 100644
index 0000000..c9e37d8
--- /dev/null
+++ b/base.css
@@ -0,0 +1,5 @@
+body{background-color: #fff;}
+div{display: block;}
+*{margin: 0; padding: 0;}
+a{text-decoration: none;}
+h2,h3{margin: 0; padding: 0; font-weight: normal;}
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..b73d27d
--- /dev/null
+++ b/index.css
@@ -0,0 +1,401 @@
+/*BEM设计模式
+ 模块（没有前缀，多个单词用-连接）
+ 元素（在模块之后，可以有多个层级，以__连接）
+ 修饰（某元素，或者某模块特别的状态，必须有一个状态名和状态值，使用_连接。）
+ */
+
+.header{height:80px;
+ background-color:#f7f7f7;
+ }
+.header__wrap{width: 1200px; height: 80px;position: relative; margin: 0 auto;}
+.header__logo{width:150px;
+ height: 38px;
+ line-height: 38px;
+ font-size: 20px;
+ color: #07111b;
+ display: block;
+ text-indent: 50px;/*相当于padding-left*/
+ background: url(../img/logo.png)left center no-repeat;
+ background: cover;
+ background-size:38px 38px ;
+ position: absolute;
+ top:50%;
+ margin-top: -19px;
+ margin-left: 20px;
+ }
+
+.header__nav{height: 38px;
+ position: absolute;
+ right: 20px;
+ text-align: center;
+ top:50%;
+ margin-top: -19px;
+ }
+.header__nav-item{
+ color:#292f35;
+ font-size: 14px;
+ display: block;
+ line-height: 38px;
+ height: 38px;
+ float: left;
+ width: 30px;
+ position: relative;
+ padding-left: 40px;
+
+}
+
+.header__nav-item_custom_button{
+ background-color: #000;
+ color: #f4f4f5;
+ width: 90px;
+ display: block;
+ text-align: center;
+ border-radius: 3px;
+ padding:0;
+ margin-left: 40px;
+
+}
+.header__nav-item:hover{color: #f01400;}
+.header__nav-item_status_active{
+ color: #f01400;
+}
+/*.header__nav-item_status_active::after{
+ content: ' ';
+ display: block;
+ width: 50%;
+ height: 2px;
+ text-indent: each-line;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ background-color: #f01400;
+}
+*/
+/*header*/
+
+
+/*screen-1*/
+.screen-1{
+ height: 800px;
+ background-color: #e7e7e7;
+ position: relative;
+ background-size: cover;
+
+}
+.screen-1__heading{font-weight: normal;
+ margin: 0;
+ padding: 0;
+ color: #4d555d;
+ text-align: center;
+ font-size: 46px;
+ padding-top: 152px;}
+.screen-1__heading b{color: #F01400; font-weight: normal;}
+.screen-1__phone{width: 1375px;
+ height: 305px;
+ background: url(../img/screen-1-phone.png)no-repeat center;
+ position: absolute;
+ left: 50%;
+ background: cover;
+ margin-left: -687px;
+ bottom: 180px;
+ z-index: 2;}
+.screen-1__shadow{
+ width:1233px;
+ height: 411px;
+ background: url(../img/screen-1-shadow.png)no-repeat center;
+ position: absolute;
+ left: 50%;
+ margin-left: -616px;
+ bottom: 0;
+ z-index: 1;
+ opacity: 0.8;
+}
+/*screen-1*/
+.screen-2{background-color: #fafafa;
+ height: 800px;
+ position: relative;
+ overflow: hidden;
+ }
+.screen-2__heading{
+ color: #F01400;
+ text-align: center;
+ font-size: 46px;
+ padding-top: 96px;}
+.screen-2__subheading{
+ color: #4d555d;
+ text-align: center;
+ font-size: 14px;
+ padding-top: 25px;
+ line-height: 28px;
+ }
+.screen-2__phone{width: 928px;
+ height: 873px;
+ background: url(../img/bg-screen-2.png)no-repeat center;
+ position: absolute;
+ left: 50%;
+ margin-left: -464px;
+ bottom: -345px;
+ z-index: 2;}
+.screen-2__point{
+ width: 108px;
+ padding-right: 112px;
+ height: 22px;
+ line-height: 22px;
+ font-size: 22px;
+ color: #4d555d;
+ position: absolute;
+ background: url(../img/icon-point-right.png)no-repeat center right;//垂直居中,右对齐
+
+}
+.screen-2__point_custom_right{padding: 0 0 0 112px;background: url(../img/icon-point-left.png)no-repeat center left;}
+.screen-2__point_i_1{top:150px; left: -164px;}
+.screen-2__point_i_2{top:30px;right: 130px;}
+.screen-2__point_i_3{top:330px;right:30px;}/*通过索引调位置*/
+
+.screen-3{
+ height: 800px;
+ position: relative;
+ background-color: red;
+ overflow: hidden;
+
+ }
+.screen-3__wrap{width: 1200px;
+ margin: 0 auto;}
+.screen-3__heading{
+ color: #FFFFFF;
+ text-align: left;
+ font-size: 46px;
+ line-height: 46px;
+ padding-top: 94px;}
+.screen-3__subheading{
+ color: #FFFFFF;
+ text-align: left;
+ font-size: 14px;
+ padding-top: 25px;
+ line-height: 28px;
+ }
+.screen-3__phone{width: 750px;
+ height: 873px;
+ background: url(../img/bg-screen-3.png)no-repeat center top;/*水平对齐,顶部对齐*/
+ position: absolute;
+ bottom: 0px;
+ left: 400px;
+ top: 195px;
+ z-index:2;}
+.screen-3__features{/*重点把握*/
+ position: relative;
+ top:200px;
+ left: 0;
+ width: 320px;
+ height: 280px;
+}
+.screen-3__features__item{width: 138px;
+ height: 118px;
+ border: 1px solid #cb7173;
+ margin: 0 20px 20px 0;
+ border-radius:3px ;
+ color: #FFFFFF;
+ text-align: center;
+ float: left;}
+.screen-3__features__item__number{height: 36px; font-size: 36px; line-height: 36px; padding: 28px 0 8px;}
+.screen-3__features__item__dec{height: 14px; font-size: 14px; line-height: 14px; }
+
+/*screen-4*/
+
+.screen-4{
+ height: 800px;
+ background-color: #FFFFFF;
+ overflow: hidden;
+
+ }
+.screen-4__wrap{
+ width: 1200px;
+ height: auto;
+ margin: 0 auto;
+ position: relative;
+
+
+}
+.screen-4__heading{
+ color: #f01400;
+ text-align: center;
+ font-size: 46px;
+ line-height: 46px;
+ padding-top: 135px;}
+.screen-4__subheading{
+ color: #464a4f;
+ text-align: center;
+ font-size: 14px;
+ padding-top: 29px;
+ line-height: 28px;
+ }
+.screen-4__type{
+ width: 1260px;
+ height: 270px;
+ position: absolute;
+ margin-left: 30px;
+ top:304px;
+}
+.screen-4__type__item{
+ width: 220px;;margin-right: 90px;
+ height: 270px;
+ float: left;
+ background: cover;
+ position: relative;
+ text-align: center;
+}
+.screen-4__type__item_i_1{
+ background: url(../img/phone-1.png)no-repeat left top;
+}/*是添加一个状态索引用“_”*/
+.screen-4__type__item_i_2{
+ background: url(../img/phone-2.png)no-repeat left top;
+}
+.screen-4__type__item_i_3{
+ background: url(../img/phone-3.png)no-repeat left top;
+}
+.screen-4__type__item_i_4{
+ background: url(../img/phone-4.png)no-repeat left top;
+}
+.screen-4__type__item__color{
+ width: 100%;
+ height: 14px;
+ line-height: 14px;
+ font: 14px;
+ color: #2c3238;
+ position: absolute;
+ bottom: -44px;
+}
+.screen-4__type__item__storage{
+ width: 100%;
+ height: 12px;
+ font: 12px;
+ color: #E7E7E7;
+ line-height: 12px;
+ position: absolute;
+ bottom: -80px;
+
+}
+/*screen-5*/
+.screen-5{
+ height: 800px;
+ background-color: #FFFFFF;
+ overflow: hidden;
+ position: relative;
+ background-color: #d9dde1;
+
+ }
+
+.screen-5-bg{width:1920px;
+ height:433px ;
+ background: url(../img/bg-screen-5.png)no-repeat center;
+ background-size: contain;
+ position: absolute;
+ left: 50%;
+ margin-left: -960px;
+ bottom: -100px;}
+.screen-5__heading{
+ color: #F01400;
+ text-align: center;
+ font-size: 46px;
+ line-height: 46px;
+ padding-top: 130px;}
+.screen-5__subheading{
+ color: #4d555d;
+ text-align: center;
+ font-size: 14px;
+ padding-top: 25px;
+ line-height: 28px;
+ }
+
+/*screen-6*/
+
+
+/*立即购买*/
+.screen-buy{
+ height: 320px;
+
+ overflow: hidden;
+ background:#2b333b url(../img/bg-screen-buy.png)center no-repeat;
+ position:relative ;
+ text-align: center;
+
+}
+.screen-buy__button{height: 80px;
+ width: 240px;
+ line-height: 80px;
+ left:50%;
+ top:50%;
+ margin: -40px 0 0 -120px;
+ font-size: 24px;
+ color: #FFFFFF;
+ border-radius: 3px;
+ position: absolute;
+ background-color: #f01414;
+ text-align: center;
+ display:block;
+ transition: all .5s;/*渐变动画*/
+}
+.screen-buy__button:hover{
+ box-shadow: 0px 0px 10px #F4F4F5;
+}
+
+.footer{height: 80px; line-height: 80px; text-align: center; font-size: 12px; background-color: #07111B;}
+
+/*侧边导航条*/
+.outline {
+ position: fixed;
+ padding: 5px 10px;
+ bottom: 120px;
+ right: 0;
+ z-index: 1;
+ background-color: #fff;
+ box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
+}
+
+.outline__item {
+ display: block;
+ width: 40px;
+ height: 30px;
+ line-height: 30px;
+ padding: 5px 0;
+ background: rgb(255,255,255);
+ margin: 5px 0px 0px;
+ border-top: 1px solid #eee;
+ text-align: center;
+ color: #93999f;
+}
+.outline__item:first-child{
+ border:none;
+}
+.outline__item_status_active{
+ color: #000;
+}
+
+/*导航条滚动时样式*/
+.header{transition: all 1s;}
+.header_status_back{background-color: rgba(0,0,0,.5);
+ position: fixed;
+ top:0;
+ left:0;
+ right:0;
+ z-index: 3;
+}
+.header_status_back .header__logo,
+.header_status_back .header__nav-item{color: #FFFFFF;}
+.header_status_back .header__nav-item_status_active{color: red;}
+
+/*大纲 ——status_in*/
+.outline{opacity: 0;transition: all 1s; transform: translate(100%,0); }
+.outline_status_in{opacity: 1; transform: translate(0,0);}
+.outline__nav-item_status_active{color: red;}
+
+.header__nav-tip{
+ position: absolute;
+ width: 30px;
+ height: 2px;
+ background-color: red;
+ bottom: 0;
+ left: 0;
+ transition: all .5s;
+ margin-left: 40px;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a675f0a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,143 @@
+
+
+
+
+
+ 手机商城
+
+
+
+
+
+
+
+
+
+
+
+
优美的设计，更令人着迷
+
采用受欢迎的设计，让它更加出色。
款式小巧、轻便手感更加舒服。绚丽高清的显示屏，整个外观更加显得精致。
+
+
+
+
高清摄像
+
超薄机声
+
大屏显示
+
+
+
+
+
+
外形小巧，功能强大的手机
+
采用受欢迎的设计，让它更加出色。
款式小巧、轻便手感更加舒服。绚丽高清的显示屏，整个外观更加显得精致。
+
+
+
+
+
+
+
+
+
+
+
丰富的手机型号
+
找到适合你的手机
+
+
+
+
+
+
+
学习、旅游、拍照、有这一部就够了。
+
看视频，拍摄高清视频与照片，视频聊天，一机多用，让你的生活更精彩。
+
+
+