手把手教你做小米商城-商品展示页面

手把手教你做小米商城商品展示页面

思路说明

1 先确定清除基本的默认样式跟基本的css 样式

 /* 清除默认样式 */

    * {
      margin: 0;
      padding: 0;
    }

    input {
      outline: none;
      border: 0;
    }
     a {
     text-decoration: none;
   }

    /* 清除浮动的样式 */

    .clearfix::after,
    .clearfix::before {
      content: "";
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }


    基本的css样式
      /* 浮动样式 */

    .fl {
      float: left;
    }

    .fr {
      float: right;
    }

2确定版心的样式

     /* 确定版心 */

   .banxin {
     margin: 0 auto;
     width: 1200px;
     background: pink;
   }

3分析整个布局

1 首先看大致看一下整个布局，在这里我们可以分成2个盒子
2 而且内容在版心里面
1 左边一个大图片盒子 leftBox
2 右边一个大图片盒子 rightBox
3 css样式如下:

  <div class="banxin">
        <div class="leftBox"></div>
        <div class="rightBox"></div>
     
  </div>

4我们再来分析里面的两个盒子

 1  首先我们的内容都在版心之中，所以我们需要给我的父盒子加一个class="banxin",目的就是把我们的内容限制在版心当中

  <div class="banxin">
        <div class="leftBox"></div>
        <div class="rightBox"></div>   
  </div>

2 再来分析版心里面的两个盒子,我们观察发现 里面的两个大盒子在一排显示，但是我们的div 却又是块级元素，默认占一整行，所以这个时候我们可以考虑用定位和浮动，但是我们一般对整个大的布局，一般采用浮动，这样更加高效，快捷，方便 
 2.1 我们观察发现  leftBox 可以设置左边浮动 
 2.2 rightBox 内容是靠着右边，可以设置右边浮动

  <div class="banxin">
        <div class="leftBox fl"></div>
        <div class="rightBox fr"></div>   
  </div>

3.1 由于我们给版心里的两个盒子都设置了浮动，而且版心我们又没有设置高度,所以这个时候我们版心的高度为0 
  解决办法： 1 给版心盒子设置一个高度（500px）
           2 给版心清除浮动 
3.3  这里我们选择给banxin清除浮动 
代码如下:

 <div class="banxin clearfix">
        <div class="leftBox fl"></div>
        <div class="rightBox fr"></div> 
 </div>

3.4 为了更好的控制banxin 下面的2个盒子，我们给版心增加一下 bigBox的类名

<div class="banxin clearfix bigBox">
        <div class="leftBox fl"></div>
        <div class="rightBox fr"></div> 
 </div>

5 接下来我们可以分别给左右两个盒子设置一个宽度 css 代码如下

     .bigBox .leftBox 
     {
      width: 235px;
      /* height: 615px; */
    }
    .bigBox .rightBox
       {
      width: 940px;
     
    }

6接下来我再来写左边leftBox盒子里面的内容

  6.1 左边盒子是一个商品展示 图片,  这个图片可以点击  那么我的HTML 样式结构可以写成下面这个结构样式

  <div class="leftBox fl">
      <a href="">
        <img src="./mi3.jpg" alt="">
      </a>
    </div>

 6.2 设置这个图片的样式 
  
    由于a 标签是行内元素，那么我们可以先让a标签变成块级元素或者行内块元素

  .leftBox a 
    {
      display: block
    }

6.3   由于图片是一个行内块元素，而且默认有3像素的边框  
     所以我们有2种方法解决这个问题

   .bigBox .leftBox img 
   {
      display: block;
      width: 235px;
      height: 615px;
        /* float: left;    第一种写法: a 盒子里的图片浮动,那么这样就有一个不好的影响，a 的高度变为0 了   */
      display: block/*第二种写法： img本来就行内块元素，可以转换成块级元素 */
    }

7在我再来写右边的商品展示盒子

    7.0  我们发现里面的文字都是居中对齐的,所以这个时候我们可以给父盒子一个文字对齐的样式

   .bigBox .rightBox 
   {
      width: 940px;
      /* height: 60px; */
      /* background: red; */
      text-align: center
    }

    7.1  我们接着分析得出右边盒子商品展示,可以发现里面是一个大的ul盒子里面包含8 个li标签组成的  
    代码如下：

 <div class="rightBox fr">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>

   7.2.1 我们再分析，发现里面的8个li盒子,有4个li盒子在一排显示，但是我们的li标签又是块级元素，默认是独占一行，所以这个我们需要用到浮动来进行布局 
   7.2.2 分析发现li 标签默认有一个小黑色圆点,这个不是我们需要的 
   7.2.3 分析每个li 标签里面的内容,发现 
   里面的商品展示高度跟宽度可以测量出来 
   代码如下 :

  .rightBox li 
  {
    list-style: none;
    float: left;
    width: 220px;
    height: 300px;
  }

  7.3 我们来写第一个li 盒子里面的内容,只要我们把第一个li盒子里的内容写好了,后面只需要复制就可以了 
  7.3.1 通过分析我们发现这个li 盒子里面的商品展示可以分为三个部分 
  1 第一个部分是 “减50元”
  2 第二个部分商品图片展示
  3 第三个部分是商品文字说明

      <li>
        <a href="#" class="hotwords">
          <img src="./hotwords.png" alt="">
        </a>
        <a href="" class="showP">
           <img src="./pms220x220.jpg" alt="">
          <span>红米6A</span>
        </a>
        <div class="description"> 
        商品文字说明</div>
      </li>

  7.4 由于发现这个盒子是一张图片，那么就会有3px边框间隙的问题，所以我们也可以把 img 转成了 块级元素  
  而且 a 标签行内元素，这个时候为了让a 标签包含img 我们可以把a 标签转换成 块级元素

     .rightBox .showP 
     {
      display: block;
    }
     .rightBox img 
     {
      display: block;
    }

  7.5 接下来我们再来分析 商品描述盒子里面内容 可以发现里面有三部分组成 
  代码如下

  <div class="description">
    <p>AI人脸解锁，小巧全面屏，高性能处理器</p>
    <span class="zPrice">549</span>
    <span class="yPrice">599</span>
  </div>

7.6.1 这个我们再来分析hotwords 这部分的内容,发现是用定位最容易实现 
 子盒子用绝对定位，父盒子用相对定位

代码如下:

 .rightBox li 
 {
      width: 220px;
      height: 300px;
      list-style: none;
      float: left;
       background-color: white; 
       /*设置li 的背景颜色为白色*/
      position: relative;
    }

.hotwords 
    {
      position: absolute;
      top:0;
      left:50%;
      transform: translateX(-50%)
    }

7.6.2 发现默认字体太大了,所以这个时候我们可以设置一个合适的字体大小,这里我设置的是12px

     .rightBox li 
 {
    font-size: 12px;  /*新增加设置字体的大小*/
    width: 220px;
    height: 300px;
    list-style: none;
    float: left;
    background-color: white; 
        /*设置li 的背景颜色为白色*/
  position: relative;
    }

7.6.3 我们再来分析商品文字描述盒子里面的内容 
 1 发现p标签里面的文字都是一行显示，而且是超多盒子里面的内容是用省略号表示的  
 2 原价被划掉 
 3 折扣价是大红色显示的 
 所以我们的代码如下:

 .description p {

      white-space: nowrap;
      /*强制不换行*/
      text-overflow: ellipsis;
      /*超出显示省略号*/
      overflow: hidden;
    }

    .yPrice {
      text-decoration: line-through;

    }

    .zPrice {
      color: red;
    }

7.6.4 当我们打开网页发现，我们离设计图还有差距
为了让我们尽量100%还原设计图
1 给每个li 标签一个右边跟下边的距离
2 给整个body 一个背景颜色

 body {
      background: #f5f5f5;
    }

 .rightBox li {
      width: 220px;
      height: 300px;
      margin: 0 0 15px 15px;  /*这是为了给每个li 标签一个向下跟向右的距离*/
      list-style: none;
      float: left;
      font-size: 12px;
      background-color: white;
      position: relative;
      /* border: 1px solid transparent; */
     


    }

8总结收获

1 我们进行写页面之前一定要分析分析分析,重要的事说三遍
2 在进行布局的时候，先整体布局，设置几个大盒子
3 先把常用的默认样式，公共样式写好
4 大的布局首选浮动进行布局，然后里面的内容根据实际情况进行定位
5 定位的时候，子盒子绝对定位，父盒子相对定位
6 文字居中一般用 text-align:center
7 img 图片可以多设置 display:block 可以消除图片的3px 的间隙
8 单行文字，单行文字居中，可以考虑设置
高度等于行高
9 块级元素（有宽高的块级元素）水平居中可以设置成：margin:0 auto