只用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>

# 网页代码CSS部分 这里要注意手机页面与pc页面最主要的区别是宽度要用百分比来表示，高度一般自适应就好，不用特意去设置，有时候去设置高度反而出现页面变形，这样页面就可以适应手机屏幕的大小。

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}

网页效果展示

需要更全面的SEO优化网站软件工具及软件操作文档可以联系博主，会有更详细的教程，系统的帮助您的网站关键词40天上百度首页

博主微信在下面，欢迎来扰