使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面
创作不易，可否给作者点个赞再走
html部分：
/**
* author 阿木木
* date 10/01 14:32
* /
`
title
"css/style.css" type="text/css" rel="stylesheet" />
"header">
"main">
"first">
"logo fl">"">
"img/logo_top.png"/>
"menu fl">
"fl">"">小米手机
"fl">"">红米手机
"fl">"">智能电视
"fl">"">笔记本
"fl">"">智能家电
"fl">"">路由器
"fl">"">智能硬件
"fl">"">服务
"fl">"">社区
"search fr">
"clear">
"second">
"black fl">"">"img/listbanner01.jpg"/>
"clear">
"third">
"one fl">
"o fl">"">"img/hjh_01.gif"/>
"o fl">"">"img/hjh_02.gif"/>
"o fl">"">"img/hjh_03.gif"/>
"clear">
"o fl">"">"img/hjh_04.gif"/>
"o fl">"">"img/hjh_05.gif"/>
"o fl">"">"img/hjh_06.gif"/>
"three fl">"">![]()
"316px 170px" src="img/ban2.jpg"/>
"threefour fr">"">![]()
"316px 170px" src="img/ban3.jpg"/>
"clear">
"four">
"banner1">
"">"img/banner01.jpg"/>
"five">
"title1 fl">明星单品
"title2 fl">
"">![]()
"235px 340px" src="img/pinpai6.png"/>小米9
"titlemodul1">7月9日-21日享花呗12分期免息
"titlemodul2">2999元起
"title3 fl">
"">![]()
"235px 340px" src="img/pinpai7.png"/>小米CC9
"titlemodul1">8月9日-10日，下单立减200元
"titlemodul2">1999元
"title3 fl">
"">![]()
"235px 340px" src="img/pinpai8.png"/>小米壁画电视65英寸
"titlemodul1">7月9日，下单立减100元
"titlemodul2">6999元
"title3 fl">
"">![]()
"235px 340px" src="img/pinpai9.png"/>小米MIX3
"titlemodul1">10月9日-10日，下单立减100元
"titlemodul2">2999元
"title2 fr">
"">![]()
"235px 340px" src="img/pinpai10.png"/>小米游戏本
"titlemodul1">第八代酷睿处理器，双烤不限频不降频
"titlemodul2">3599元
"clear">
"six">
"banner2">
"">
"img/banner02.jpg" />
"seven">
"titlex">热门配件
"modue1 fl">"">![]()
"235px 300px" src="img/peijian1.jpg"/>
"modue2 fl">
"">![]()
"235px 300px" src="img/peijian11.jpg"/>小米无线车充
"titlemodul3">169元
"titlemodul4">1372人评价
"modue2 fl">
"">![]()
"235px 300px" src="img/peijian3.jpg"/>小米手机4c 小米4c 智能
"titlemodul3">29元
"titlemodul4">372人评价
"modue2 fl">
"">![]()
"235px 300px" src="img/peijian4.jpg"/>红米note4 4x 红米note4x
"titlemodul3">19元
"titlemodul4">372人评价
"modue2 fr">
"">![]()
"235px 300px" src="img/peijian5.jpg"/>小米支架式自拍杆
"titlemodul3">89元
"titlemodul4">372人评价
"clear">
"modue3 fl">"">![]()
"235px 300px" src="img/peijian6.png"/>
"modue4 fl">
"">![]()
"235px 300px" src="img/peijian12.jpg"/>九号平衡车
"titlemodul3">3999元
"titlemodul4">372人评价
"modue4 fl">
"">![]()
"235px 300px" src="img/peijian8.jpg"/>米家随身风扇
"titlemodul3">19.9元
"titlemodul4">372人评价
"modue4 fl">
"">![]()
"235px 300px" src="img/peijian9.jpg"/>红米4X高透软胶保护套
"titlemodul3">59元
"titlemodul4">775人评价
"modue5 fr">"">![]()
"235px 300px" src="img/hongmin4.png"/>
"modue5 fr">"">![]()
"235px 300px" src="img/liulangengduo.png"/>
"clear">
css部分
/**全局样式**/
*{
margin: 0px;
padding: 0px;
}
body{
font-size: 14px;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
.fl{
float:left;
}
.fr{
float:right;
}
.clear{
clear: both;
}
/**index.html**/
.header{
width:100%;
background-color: #333333;
margin: 0px auto;
}
.middle{
height: 40px;
width: 1227px;
margin: 0px auto;
}
.navlist{
width:401px;
height: 40px;
margin: 0px auto;
}
.navlist ul{
padding: 15px 0px;
}
.navlist ul li {
width: 55px;
height: 11px;
float: left;
text-align: center;
line-height: 7px;
}
.navlist ul li:nth-child(1),.navlist ul li:nth-child(2),.navlist ul li:nth-child(3),.navlist ul li:nth-child(4),.navlist ul li:nth-child(5),.navlist ul li:nth-child(6)
{
border-right:1px #B0B0B0 solid;}
.navlist ul li a{
font-size: 10px;
color: #B0B0B0;
}
.login{
width: 302px;
height: 40px;
}
.login ul{
padding: 15px 0px;
}
.login ul li{
width: 55px;
height:11px;
float: left;
text-align: center;
line-height: 7px;
}
.login ul li:nth-child(1)
{
border-right:1px #B0B0B0 solid ;}
.login ul li a{
font-size: 10px;
color: #B0B0B0;
}
.main{
width: 100%;
height: 2170px;
margin: 0px auto;
}
.first{
width: 1227px;
height: 54px;
margin: 0px auto;
padding-top: 26px;
}
.logo{
width: 234px;
height: 54px;
}
.menu{
width: 643px;
height: 54px;
font-size: 15px;
margin-top: 20px;
}
.menu a{
margin-left: 20px;
}
.search{
height: 54px;
width: 310px;
}
.second{
width: 1227px;
height: 460px;
background-color: #FFFF00;
margin: 23px auto;
}
.black{
width: 1226px;
height: 460px;
background-color: black;
}
.third{
width: 1227px;
height: 170px;
margin: 17px auto;
}
.one{
width: 234px;
height: 170px;
background-color: #FF00FF;
}
.one.o{
width: 78px;
height: 85px;
background-color: aqua;
}
.two{
width: 315px;
height: 170px;
background-color: #FF00FF;
margin-left: 15px;
}
.three{
width: 315px;
height: 170px;
background-color: #FF00FF;
margin-left: 15px;
}
.threefour{
width: 315px;
height: 170px;
background-color: #FF00FF;
margin-left: 15px;
}
.four{
width: 1227px;
height: 120px;
margin: 22px auto;
}
.banner1{
height: 120px;
width: 1227px;
background-color: aqua;
}
.five{
width: 1227px;
height: 400px;
margin: 25px auto;
}
.title1{
width:1227px;
height: 59px;
background-color: #f5f5f5;
font-size: 22px;
line-height: 60px;
}
.titlemodul1{
font-size: 13px;
color: #b0b0c0;
margin-top: 15px;
}
.titlemodul2{
font-size: 15px;
color: #fe674c;
margin-top: 15px;
}
.title2{
width: 235px;
height: 340px;
background-color: #F5F5F5;
border-top: 1px orange solid;
text-align: center;
}
.title3{
width: 235px;
height: 340px;
background-color: #F5F5F5;
margin-left: 13px;
border-top: 1px solid green;
text-align: center;
}
.six{
width: 1227px;
height: 120px;
margin: 25px auto;
}
.banner2{
width: 1227px;
height: 120px;
background-color: #00FFFF;
}
.seven{
width: 1227px;
height: 672px;
margin: 20px auto;
background-color: #F5F5F5;
}
.titlex{
font-size: 22px;
}
.titlemodul3{
font-size: 13px;
color: #fe674c;
}
.titlemodul4{
font-size: 15px;
color: #b0b0c0;
}
.modue1{
margin-top: 28px;
background-color: #FAFAFA;
width: 235px;
height: 300px;
text-align: center;
}
.modue2{
margin-top: 28px;
background-color: #FAFAFA;
width: 235px;
height: 300px;
margin-left: 13px;
text-align: center;
}
.modue3{
margin-top: 15px;
background-color: #FAFAFA;
width: 235px;
height: 300px;
text-align: center;
}
.modue4{
margin-top: 15px;
background-color: #FAFAFA;
width: 235px;
height: 300px;
margin-left: 13px;
text-align: center;
}
.modue5{
margin-top: 15px;
background-color: #FAFAFA;
width: 235px;
height: 143px;
margin-left: 13px;
text-align: center;
}
.footer{
width: 100%;
height: 140px;
background-color: #fafafa;
margin: 0px auto;
}
.middle1{
width: 260px;
height: 140px;
background-color: #fafafa;
margin: 0px auto;
}
.middle1 ul{
padding: 50px 0px;
}
.middle1 ul li{
width: 64px;
float: left;
font-size: 13px;
text-align: center;
}
.middle1 ul li:nth-child(1),.middle1 ul li:nth-child(2),.middle1 ul li:nth-child(3)
{
border-right:1px black solid;}
.banquan{
font-size: 12px;
text-align: center;
}
效果图：