搭建小米商城 框架div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
</head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<body>
<div class="top">
<div class="topmain">
</div>
</div>
<div class = "topmenu">
</div>
<div class = "topcontent1">
</div>
<div class = "topcontent2">
</div>
<div class = "topcontentflashshop">
小米闪购
</div>
<div class = "topcontentad">
</div>
<div class = "topcontentphone">
手机
</div>
<div class = "topcontentad1">
</div>
<div class = "topcontentapplication">
家电
</div>
<div class = "topcontentad2">
</div>
<div class = "topcontentsmart">
智能
</div>
<div class = "topcontentad3">
</div>
<div class = "topcontentother">
搭配
</div>
<div class = "topcontentad4">
</div>
<div class = "topcontentaccesorries">
配件
</div>
<div class = "topcontentad5">
</div>
<div class = "topcontentother1">
周边
</div>
<div class = "topcontentad6">
</div>
<div class = "topcontentrecommend">
为你推荐
</div>
<div class = "topcontentrecommend1">
热评产品
</div>
<div class = "contentcon">
内容
</div>
<div class = "contentvideo">
视频
</div>
<div class="footer">
</div>
</body>
</html>
css文件
html body
{
margin: 0px; padding: 0px;
}
.top
{
width: 100%;
height: 40px;
background-color: #333;
margin-bottom: 10px;
}
.topmain
{
width: 1226px;
height: 40px;
background-color: #330;
margin: 0px auto;
}
.topmenu
{
width: 1226px;
height: 60px;
margin: 0px auto;
background-color: #ccc;
margin-bottom: 20px;
}
.topcontent1
{
width: 1226px;
/*height: 460px;
background-color: #ccc;*/
margin: 0px auto;
margin-bottom: 20px;
}
.topcontent1l
{
width: 246px;
height: 460px;
background-color: blue;
margin: 0px auto;
float: left;
}
.topcontent1r
{
width: 980px;
height: 460px;
background-color: pink;
margin: 0px auto;
float: left;
}
.topcontent2
{
width: 1226px;
height: 170px;
background-color: #ccc;
margin: 0px auto;
}
.topcontentflashshop
{
width: 1226px;
height: 340px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentphone
{
width: 1226px;
height: 615px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad1
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentapplication
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad2
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentsmart
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad2
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentother
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad3
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad4
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentaccesorries
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad5
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentother1
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentad6
{
width: 1226px;
height: 120px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentrecommend
{
width: 1226px;
height: 350px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentrecommend1
{
width: 1226px;
height: 350px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.contentcon
{
width: 1226px;
height: 480px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.contentvideo
{
width: 1226px;
height: 350px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}