HTML+CSS 小米页面
效果图
HTML部分
Document
小米8
小米MIX 2S
<
>
小米闪购
手机
查看全部>
css部分
* {
margin: 0;
padding: 0;
outline: none;
list-style:none;
text-decoration: none;
border: none;
}
body {
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.w {
width: 1226px;
margin: 0 auto;
}
/*------------------------右侧导航栏*/
.right-nav {
position: fixed;
z-index: 999;
right: 50%;
margin-right: -640px;
bottom: 30px;
width: 27px;
height: 176px;
}
.right-nav a {
float:left;
width: 25px;
height: 39px;
border: 1px solid #F5F5F5;
border-collapse: collapse;
}
.rn-1 {
background: url(images/right-nav1.png) no-repeat 0 0;
}
.rn-2 {
background: url(images/right-nav2.png) no-repeat 0 0;
}
.rn-3 {
background: url(images/right-nav3.png) no-repeat 0 0;
}
.rn-4 {
margin-top: 14px;
background: url(images/right-nav4.png) no-repeat 0 0;
}
/*--------------------------------------------*/
/*-------------------------top-header*/
.top {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333333;
}
.top a {
font-size: 12px;
color: #B0B0B0;
}
.top a:hover {
color: #fff;
}
.top-nav-1 li {
float: left;
}
.top-nav-1 li a {
float: left;
padding: 0 7px;
}
.top-nav-1 li:first-child a {
padding-left: 0;
}
.sep {
float: left;
color: #393E3E;
}
.top-nav-2 {
float: right;
}
.top-nav-2 a {
float: left;
margin: 0 7px;
}
.massage {
padding: 0 26px 0 10px;
}
.gouwu {
position: relative;
}
.gou {
float: right;
width: 120px;
height: 40px;
background: url(images/top-icon.png) no-repeat 0 0;
}
.gou-in {
position: absolute;
top: 40px;
left: 910px;
z-index: 2;
display: none;
width: 316px;
height: 83px;
box-shadow: 2px 2px 2px rgba(0,0,0,.2)
}
.gouwu:hover .gou {
background: url(images/top-icon2.png) no-repeat 0 0;
}
.gouwu:hover .gou-in {
display: block;
}
/*-------------------------------*/
/*----------------------header*/
.header {
height: 55px;
line-height: 55px;
padding: 22px 0;
}
.logo {
float: left;
width: 55px;
height: 55px;
background: url(images/logo.png) no-repeat 0 0 ;
}
.nav {
padding-left: 190px;
}
.nav li {
float: left;
padding: 0 10px;
}
.nav li a {
font-size: 16px;
color: #333333;
}
.nav li a:hover {
color: #ff6700;
}
.search {
float: right;
position: relative;
}
.search input {
float: left;
width: 243px;
height: 48px;
border: 1px solid #E0E0E0;
padding-left: 10px;
color: #E0E0E0;
}
.search button {
float: left;
width: 51px;
height: 50px;
background: url(images/search.png) no-repeat 0 0;
}
.sea-1 span {
position: absolute;
top: 15px;
height: 18px;
line-height: 18px;
font-size: 12px;
background-color: #EEEEEE;
}
.sea-11 {
right: 141px;
}
.sea-12 {
right: 62px;
}
/*---------------------------------*/
/*--------------------------banner*/
.banner {
position: relative;
height: 460px;
}
.banner img {
height: 460px;
width: 1226px;
}
.subnav {
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 420px;
width: 234px;
padding: 20px 0;
background-color: rgba(0,0,0,.6);
}
.subnav li a {
display: block;
height: 42px;
line-height: 42px;
padding: 0 24px 0 30px;
font-size: 14px;
color: #fff;
}
.subnav li a:hover {
background-color: #ff6700;
}
.icon1 {
float: right;
}
.ban-l,
.ban-r {
position: absolute;
top: 230px;
margin-top: -35px;
width: 41px;
height: 69px;
line-height: 69px;
text-align: center;
font-size: 32px;
color: #fff;
background: rgba(0,0,0,.3);
}
.ban-l {
left: 234px;
border-radius: 0 5px 5px 0;
}
.ban-r {
right: 0;
border-radius: 5px 0 0 5px;
}
.banner ol {
position: absolute;
right: 30px;
bottom: 25px;
width: 100px;
height: 10px;
}
.banner ol li {
float: left;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #ccc;
background-color: rgba(76,80,97,.5);
margin: 0 5px;
}
.banner ol li:hover {
background-color: #fff;
}
/*----------------------------------*/
/*---------------------------------goods*/
.goods {
height: 170px;
padding: 14px 0 44px 0;
}
.goods li {
float: left;
width: 316px;
height: 170px;
margin-left: 14px;
}
.goods li:first-child {
width: 234px;
margin-left: 0;
}
/*----------------------------------------------*/
/*--------------------------shangou*/
.shangou {
height: 380px;
}
.sg-hd {
height: 40px;
list-style: 40px;
}
.sg-hd h4 {
float: left;
font-size: 22px;
font-weight: 200;
}
.sg-hd img {
float: right;
}
.sg-bd li {
float: left;
height: 339px;
width: 234px;
border-top: 1px solid;
margin-right: 14px;
text-align: center;
}
.sg-bd li:first-child {
border-color: #E53935;
}
.sg-bd li:nth-child(2) {
border-color: #FFAC13;
}
.sg-bd li:nth-child(3) {
border-color: #83C44E;
}
.sg-bd li:nth-child(4) {
border-color: #2196F3;
}
.sg-bd li:last-child {
border-color: #E53935;
margin-right: 0;
}
.sg-bd li img {
display: inline-block;
padding-top: 20px;
}
.special {
padding-top: 0!important;
}
.sg-bd li h4 {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #202020;
}
.sg-bd li p {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #ADADBD;
}
.sg-bd li span {
display: inline-block;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #ADADBD;
}
.sg-bd li em {
font-style: normal;
color: #FA6553;
}
.sg-bd li del {
text-decoration: line-through;
}
/*----------------------------------------*/
/*----------------------------------ads*/
.ads a {
display: block;
height: 120px;
margin: 42px auto;
}
/*-------------------------------------*/
/*page-main*/
.page-main {
width: 100%;
background-color: #F5F5F5;
}
/*---------------------------------phone*/
.phone {
height: 674px;
}
.pho-hd {
height: 22px;
padding:19px 0;
line-height: 22px;
}
.pho-hd h4 {
float: left;
font-size: 22px;
color: #333333;
font-weight: 200;
}
.pho-hd a {
float: right;
font-size: 14px;
color: #333;
}
.pho-hd a:hover {
color: #ff6700;
}
.pho-bd-le {
float: left;
width: 234px;
height: 614px;
}
.pho-bd-ri {
float: right;
width: 992px;
height: 614px;
}
.pho-bd-ri li {
position: relative;
float: left;
width: 234px;
height: 300px;
text-align: center;
margin: 0 0 14px 14px;
background-color: #fff;
}
.pho-bd-ri li:hover {
top: -2px;
left: 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
}
.pho-bd-ri li img {
padding-top: 20px;
}
.pho-bd-ri li h4 {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #202020;
}
.pho-bd-ri li p {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #ADADBD;
}
.pho-bd-ri li span {
display: inline-block;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #ADADBD;
}
.pho-bd-ri li em {
font-style: normal;
color: #FA6553;
}
.pho-bd-ri li del {
text-decoration: line-through;
}
.jian50 {
position: absolute;
top: 0;
left: 117px;
margin-left: -32px;
width: 64px;
height: 20px;
line-height: 20px;
background: red;
font-size: 12px;
color: #fff;
}
/*-------------------------------------*/
/*---------------------------------jiadian*/
.jia-hd {
width: 1226px;
height: 22px;
padding:19px 0;
line-height: 22px;
}
.jia-hd h4 {
float: left;
font-size: 22px;
color: #333333;
font-weight: 200;
}
.jia-hd ul {
float: right;
}
.jia-hd li {
float: left;
padding: 0 16px;
height: 22px;
line-height: 22px;
}
.jia-hd li a {
font-size: 16px;
color: #424242;
}.jia-bd {
width: 1240px;
}
.jia-bd li {
float: left;
height: 300px;
width: 234px;
margin: 0 14px 14px 0;
}
/*----------------------------------------------*/
/*footer*/
.footer {
width: 100%;
background-color: #fff;
}
/*--------------------------------weixiu*/
.weixiu {
height: 79px;
border-bottom: 1px solid #E0E0E0;
}
.weixiu li {
float: left;
height: 79px;
line-height: 79px;
font-size: 16px;
}
.weixiu a {
float: left;
padding: 0 70px;
color: #616161;
}
.seu {
float: left;
color: #E0E0E0;
}
.weixiu a:hover {
color: #ff6700;
}
/*------------------------------------------*/
/*----------------------------------------fuwu*/
.fuwu {
height: 192px;
}
.fu-le {
float: left;
height: 192px;
width: 974px;
}
.fu-le dl {
float: left;
font-size: 12px;
}
.fu-le dt {
padding: 42px 104px 32px 0;
}
.fu-le dt a {
color: #424242;
}
.fu-le dd {
padding-bottom: 16px;
}
.fu-le dd a {
color: #757575;
}
.fu-le a:hover {
color: #ff6700;
}
.fu-ri {
text-align: center;
}
.fu-ri h4 {
padding: 42px 0 14px 0;
font-size: 18px;
color: #ff6700;
font-weight: 400;
}
.fu-ri p {
margin-bottom: 6px;
font-size: 12px;
color: #757575;
}
.fu-ri a {
display: inline-block;
margin-top: 20px;
height: 28px;
line-height: 28px;
width: 118px;
font-size: 14px;
color: #ff6700;
border: 1px solid #ff6700;
}
.fu-ri a:hover {
background-color: #ff6700;
color: #fff;
}
/*------------------------------------------------*/
/*------------------------------------------------copyright*/
.copyright {
height: 55px;
padding: 40px 10px 0 0;
}
.logo {
float: left;
width: 55px;
height: 55px;
background: url(images/logo.png) no-repeat 0 0 ;
}
.co-nav {
float: left;
padding-left: 10px;
width: 688px;
height: 55px;
}
.co-nav a,
.co-nav span,
.co-nav p {
font-size: 12px;
}
.co-nav a,
.co-nav span {
color: #757575;
}
.co-nav p {
color: #B0B0B0;
}
.co-img {
float: right;
height: 55px;
width: 438px;
}
/*-----------------------------------------------*/
.xiaomi {
text-align: center;
height: 80px;
line-height: 80px;
}
.xiaomi h4 {
font-size: 18px;
font-weight: 400;
font-family: "楷体" ;
color: #BEBEBE;
}