html仿写小米应用商店,HTML+CSS+JavaScript仿写的小米官网

HTML部分

CSS部分

body{

margin : 0;

padding : 0;

font-family : Arial, Helvetica, sans-serif;

}

header a{

height : 120px;

display : block;

background-image: url("images/01.jpg");

background-position : center center;

}

/*导航栏*/

nav{

height : 40px;

background-color : #333;

}

nav div.center{

width : 1226px;

margin : 0 auto;

height : 100%;

font-size : 12px;

color : #424242;

}

nav div.center div.left{

height : 100%;

float : left;

}

nav div.center div.left a,nav div.center div.left span{

float : left;

margin-right : 6px;

line-height : 40px;

}

nav div.center div.left a{

color : #b0b0b0;

text-decoration : none;

}

nav div.right{

float : right;

}

nav div.right div.shoppingCart{

float : right;

height : 40px;

width : 120px;

background-color : #424242;

box-sizing : border-box;

background-image : url("images/shoppingCart1.png");

background-position : 20px center;

background-repeat : no-repeat;

margin-left : 20px;

}

nav div.right div.shoppingCart a{

text-decoration : none;

color : #b0b0b0;

line-height : 40px;

padding-left : 45px;

}

nav div.right div.login{

float : right;

}

nav div.right div.login a,nav div.right div.login span{

float : right;

line-height : 40px;

margin-right : 6px;

}

nav div.right div.login a{

text-decoration : none;

color : #b0b0b0;

}

nav div.center div.left a:hover,nav div.right div.login a:hover{

color : #fff;

}

nav div.right div.shoppingCart:hover{

background-color : #fff;

background-image: url("images/shoppingCart2.png");

}

nav div.right div.shoppingCart a:hover{

color : #ff6700;

}

/*主体*/

section{

width : 1226px;

margin : 0 auto;

}

/*logo 导航 搜索栏*/

section div.top{

height : 100px;

}

section div.top a.logo{

width : 234px;

float : left;

margin : 22px 0;

}

section div.nav{

float : left;

width : 697px;

}

section div.nav a{

text-decoration : none;

color : #333;

line-height : 100px;

padding-right : 15px;

font-size : 16px;

}

section div.nav a:hover{

color : #ff6700;

}

section div.search{

float : right;

margin : 25px 0;

}

section div.search form input{

width : 223px;

height : 48px;

padding : 0;

float : right;

border : 1px solid #b0b0b0;

font-size : 16px;

}

section div.search form input[type="submit"]{

width : 48px;

padding : 0;

margin : 0;

box-sizing : content-box;

border-left : 0px solid #b0b0b0;

background-color : #fff;

}

section div.search form input[type="submit"]:hover{

background-color : #ff6700;

border-color : #ff6700;

color : #fff;

}

/* 主体 左栏*/

section div.main{

position: relative;

width : 100%;

float : left;

}

section div.main div.leftBar{

position : absolute;

left : 0;

top : 0;

width : 234px;

height : 420px;

padding : 20px 0;

background-color : rgba(0, 0, 0, 0.6);

float : left;

}

section div.main div.leftBar a{

float : left;

height : 42px;

width : 100%;

text-decoration : none;

color : #fff;

line-height : 42px;

padding : 0 30px;

font-size : 14px;

box-sizing : border-box;

}

section div.main div.leftBar a span{

font-size : 16px;

font-weight : bold;

float : right;

}

section div.main div.leftBar a:hover{

background-color : #ff6700;

}

/*轮播图*/

section div.run{

position: relative;

width : 100%;

height : 460px;

background-color : pink;

}

section div.run img{

position : absolute;

left : 0;

right : 0;

width : 100%;

height : 100%;

}

section div.run a.runimg{

opacity : 0;

transition-duration: 1s;

}

section div.run div.left,section div.run div.right{

width : 41px;

height : 69px;

position : absolute;

left : 234px;

top : 50%;

margin-top : -35px;

background-color : rgba(0, 0, 0, 0);

text-align : center;

line-height : 69px;

font-size : 50px;

color : #eee;

border-radius : 0 5px 5px 0;

cursor : pointer;

}

section div.run div.right{

left : 100%;

margin-left : -41px;

border-radius : 5px 0 0 5px;

}

section div.run div.left:hover,section div.run div.right:hover{

background-color : rgba(0, 0, 0, 0.5);

}

section div.run div.index{

position : absolute;

width : 120px;

height : 10px;

right : 30px;

bottom : 20px;

}

section div.run div.index a{

float : left;

width : 6px;

height : 6px;

border : 2px solid rgba(0, 0, 0, 0.4);

background-color : rgba(0, 0, 0, 0.4);

margin : 0 6px;

}

section div.run div.index a:hover{

background-color : rgba(255, 255, 255, 0.4)!important;

}

/*主题方块链接*/

section div.theme{

float : left;

height : 170px;

width : 100%;

margin-top : 14px;

}

section div.theme div.menu{

width : 234px;

height : 100%;

float : left;

margin-right : 2px;

}

section div.theme div.menu ul{

margin : 0;

padding : 0;

list-style : none;

}

section div.theme div.menu ul a{

color : rgba(255, 255, 255, 0.6);

text-decoration : none;

background-color : #5f5750;

float : left;

width : 78px;

height : 85px;

box-sizing : border-box;

border : 1px solid rgba(255, 255, 255, 0.2);

border-width : 0 1px 1px 0;

font-size : 40px;

text-align : center;

line-height : 35px;

padding-top : 12px;

}

section div.theme div.menu ul a:hover{

color : rgba(255, 255, 255, 1);

}

section div.theme div.menu ul a p{

margin : 0;

font-size : 14px;

line-height : 14px;

}

section div.theme div.product a{

float : left;

margin-left : 14px;

}

section div.theme div.product img{

width : 316px;

height : 170px;

vertical-align : bottom;

}