div+CSS教你做出淘宝手机端首页
为什么只用div做网页
因为div页面兼容效果是最好的,而且前端所有样式都可以用div+CSS展示出来的,其实根本不必用什么li、ul、h等等标签,这些乱起八糟的标签,记起来不仅麻烦,还容易记混,而且说不定什么时候又在哪个浏览器不兼容,显示排版又出现变形。在这里不要有错误认识,人为什么代码复杂的页面才是好的,其实通过最通用简单的代码实现要有的功能才是最好的,这样搜索引擎也愿意收录您的页面。
网页代码
<div class="search">
<input type="text" placeholder="中长款风衣 女">
</div>
<div class="banner">
<!--<img src="http://localhost:63342/www/ceshi/10/imgs/6.png"/>-->
<img src="https://m.chloe99.com/chloetel/10/imgs/6.png" style="width: 100%"/>
</div>
<div class="nav">
<div class="nav1">
<!--<img src="http://localhost:63342/www/ceshi/10/imgs/5.png"/>-->
<img src="https://m.chloe99.com/chloetel/10/imgs/5.png"/>
<div class="nav2">我的淘宝</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/11.png"/>
<div class="nav2">天猫</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/10.png"/>
<div class="nav2">聚划算</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/15.png"/>
<div class="nav2">淘抢购</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/12.png"/>
<div class="nav2">淘热卖</div>
</div>
<div class="nav3"></div>
<div class="nav1">
<!--<img src="http://localhost:63342/www/ceshi/10/imgs/5.png"/>-->
<img src="https://m.chloe99.com/chloetel/10/imgs/8.png"/>
<div class="nav2">一淘秒杀</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/9.png"/>
<div class="nav2">天猫国际</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/13.png"/>
<div class="nav2">天猫超市</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/14.png"/>
<div class="nav2">大额券</div>
</div>
<div class="nav1">
<img src="https://m.chloe99.com/chloetel/10/imgs/7.png"/>
<div class="nav2">分类</div>
</div>
</div>
<div class="mainBody5" style="width: 100%;height: 3em;float: left"></div>
<div class="mainBodyHead">
<img src="https://m.chloe99.com/chloetel/10/imgs/18.png"/>
</div>
<div class="mainBody2">
<div class="mainBody1">
<img src="https://m.chloe99.com/chloetel/10/imgs/17.png"/>
</div>
<div class="mainBody1">
<img src="https://m.chloe99.com/chloetel/10/imgs/16.png"/>
</div>
</div>
<div class="mainBodyAll" style="float: left;background: #ffffff;width: 100%">
<div class="mainBody5" style="width: 100%;height: 3em;float: left"></div>
<div class="mainBody3">
连衣裙
<div class="mainBody4">
|
</div>
</div>
<div class="mainBody3">
沙发
<div class="mainBody4">
|
</div>
</div>
<div class="mainBody3">
窗帘
<div class="mainBody4">
|
</div>
</div>
<div class="mainBody3">
衬衫
</div>
<div class="mainBody5" style="width: 100%;height: 3em;float: left"></div>
<div class="mainBody3">
男内裤
<div class="mainBody4">
|
</div>
</div>
<div class="mainBody3">
抱枕
<div class="mainBody4">
|
</div>
</div>
<div class="mainBody3">
电脑椅
<div class="mainBody4">
|
</div>
</div>
<div class="mainBody3">
牛仔裤
</div>
<div class="mainBody5" style="width: 100%;height: 3em;float: left"></div>
</div>
</div>
body {
background: #f6f6f6;
}
.all{width: 100%;margin: 0 auto;
}
.headAll{width: 100%;background: #ff3e3e;float: left;
}
.head1{
float: left;width: 6%;
}
.head1 img{width: 100%}
.head2{
float: left;width:26.2%;height: 50px;
}
.head3{
float: left;width: 4%;height: 50px;
}
.head4{
float: left;width: 100%;height: 1.5em;
}
.head5{
width: 25%;float: left;
}
.head5 img{width: 100%;
}
.search{
float: left;width: 100%;height: 5em;background: #ff3e3e;text-align: center;
}
.search input{
width: 93%;height: 90%;background: #ff6064;border-radius: 45px;
border: 1px solid #ff9ca5;margin:0 auto;text-align: center;color: #ffdcd2;font-size: 2.1em;
}
.banner{
width: 100%;float: left;text-align: center;
}
.nav{
width: 100%;float: left
}
.nav1{
width: 20%;float: left;text-align: center
}
.nav1 img{
width: 80%
}
.nav2{
width: 100%;text-align: center;font-size: 2.1em
}
.nav3{
float: left;width: 100%;height: 1em;
}
.mainBodyHead{
float: left;width: 100%
}
.mainBodyHead img{
float: left;width: 100%
}
.mainBody2{
float: left;width: 100%
}
.mainBody1{
float: left;width: 50%
}
.mainBody1 img{float: left;width: 100%}
.mainBody3{float: left;width: 25%;text-align: center;font-size: 2.1em}
.mainBody4{float: right;font-size: 1.1em;color: #d8d8d8}