手把手教你做小米商城顶部导航栏

手把手教你做小米商城顶部导航栏

思路说明

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

 /* 清除默认样式 */

    * {
      margin: 0;
      padding: 0;
    }

    input {
      outline: none;
      border: 0;
    }

    /* 清除浮动的样式 */

    .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 首先看大致看一下整个布局， 在这里我们可以分成3个盒子

1 左边 一个logo 盒子 
2 中间是 816+加上小米手机等文字盒子  
3 右边的搜索盒子  

<div class="banxin">
     <div class="logoBox"></div>
     <div class="listBox"></div>
     <div class="searchBox"></div>
</div>

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

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

<div class="banxin">
     <div class="logoBox"></div>
     <div class="listBox"></div>
     <div class="searchBox"></div>
</div>

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

  <div class="banxin">
      <div class="logoBox fl"></div>
      <div class="listBox fl"></div>
      <div class="searchBox fr"></div>
</div>

3.1 由于我们给版心里的三个盒子都设置了浮动，而且版心我们又没有设置高度,所以这个时候我们版心的高度为0 
  解决办法： 1 给版心盒子设置一个高度（50px）
           2 给版心清除浮动  
  这里我们选择给banxin盒子加一个类名为bigBox  

  <div class="banxin  bigBox">
      <div class="logoBox fl"></div>
      <div class="listBox fl"></div>
      <div class="searchBox fr"></div>
  </div>

3.2设置bigBox 的样式 给他一个高度

 .bigBox {
      line-height: 55px;
      /*这里设置行高等于高度是为了让这个盒子里的文字垂直居中*/
      height: 55px;
    }

5在我再来写左边logo的盒子

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

    <div class="logoBox fl">
    <a href="">
      <img src="./logo.png" alt="">
    </a>
  </div>      

 5.2 设置这个图片的样式 
    由于a 标签是行内元素，那么我们可以先让a标签变成块级元素或者行内块元素   
  .logoBox a {
  display: block
} 
5.3   由于图片是一个行内块元素，而且默认有3像素的边框  
     所以我们有2种方法解决这个问题  

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

6在我再来写中间的816+列表导航的盒子

    6.0  我们分析发现 listBox 与左边的logoBox 有一定的距离  那么我们给一个margin-left 

    .listBox 
    {
      margin-left: 50px;
    }

    6.1  我们还是先分析  得出  中间的盒子可以分成2个子盒子组成  
    代码如下： 

    <div class="listBox fl">
      <div class="mi816"></div>
      <ul></ul>
    </div>

   6.2  通过分析 我们再次发现 这两个盒子也要同时显示在一行内容，由于我们的div 是块级元素，默认独占一行，这个时候
    我们有2中种方法  1  .mi816盒子和ul 盒子都设置浮动                2  都转换成行内块元素   
    在这里 我们采用 浮动的做法，因为大的布局用浮动的写法更加方便，快捷  

  <div class="listBox fl">
    <div class="fl mi816"></div>
    <ul class="fr"></ul>
  </div>     

  6.3 我们来写 .mi816的盒子 

    <div class="fl mi816">
      <a href="">
        <img src="./816.gif" alt="">
      </a>
    </div>

  6.3.1 由于发现这个盒子是一张图片，那么就会有3px边框间隙的问题，  所以我们也可以把 img 转成了 块级元素  

.listBox .mi816 img 
{
    display: block;
    height: 55px;   /*这里设置高度等于55px 是让图片的高度跟外面的盒子的高度保存一致*/
  } 

  6.4  我们再来写这个ul 盒子  
     1 分析 发现里面是很多个li 标签组成的

<ul class="fr">
      <li>小米手机</li>
      <li>红米</li>
      <li>电视</li>
      <li> 笔记本</li>
      <li>盒子</li>
      <li>新品</li>
      <li>路由器</li>
      <li>智能硬件</li>
      <li>服务</li>
      <li>社区</li>
</ul>

6.5.1 这个时候我们发现  li 也是块级元素，默认占一行 所以我们也需要对li标签进行浮动  

  .listBox li 
  {
    float: left;
    list-style: none;    /*去掉li标签的默认小圆点*/ 
  }  

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

     .listBox li 
     {
      float: left;
      list-style: none;
      font-size: 12px;
    }

6.5.3  当我们再打开网页的时候，发现所有的li 标签都紧靠在一起，不太好看，这个我们需要调整一下每个li标签文字之间的距离，这个时候我们有2种方法 
      1 margin-right   
      2 padding-right  
在这里我采用padding  去写，

    .listBox li 
    {
      float: left;
      list-style: none;
      padding-left: 20px;
      font-size: 12px;
    }      

7 我们再来写右边的搜索框盒子里的内容

  7.1  我们分析发现右边搜索盒子里包含两部分内容 
     1  一个是搜索输入框 
     2  一个是搜索按钮  
  7.2  那么我们的基本布局格式如下

      <div class="searchBox fr ">
      <input type="text" value="搜索框">
      <button value="">搜索</button>
    </div>   

 7.3  这个时候我们再来分析  经过测量 
      input  的搜索框的高度是44px,宽度是220px  
      buton  的高度也是44px   
      那么代码如下  

     .searchBox input 
     {
         height: 44px;
         width: 220px;     
    }
    .searchBox button 
    {
     
      height: 44px;
    }        

7.4 这个时候我们发现 input 跟button 之间没有紧靠在一起 那么这是什么原因导致的呢？ 我们又怎么去解决呢
1 我们通过查文档 发现 input button 都是行内块元素，两个行内块元素默认的情况下，会有间隙
2 解决办法 ： 1 我们是不是学过浮动
浮动的作用：1 可以让块级元素在同一行显示
2 可以让行内元素设置宽高
3 可以让元素紧靠在一起
3 所以这个时候 我们可以给input button 设置一个浮动
代码如下

    .searchBox input 
    {
         height: 44px;
         width: 200px;
         float: left;
        
    }
    .searchBox button 
    {
      float: left;
      height: 44px;
    }

4 这个时候我们再来看看我们的html结构 

     <div class="searchBox fr ">
        <input type="text" value="搜索框">
        <button value="">搜索</button>
    </div>

 发现 .searchBox 里面的input button 都浮动了，而且我们的.searchBox也没有给高度，这个时候是不是应该.searchBox的高度应该为0 ，这个时候发现 我们.searchBox的高度为44px  
 为什么会是这样呢？？？  
    1  我们分析发现，.searchBox 也浮动，所以他跟着子盒子一起飞走了，当父盒子，子盒子同时都浮动了的时候，如果父盒子没有设置高度，那么父盒子的高度由子盒子的高度撑开 
    2 如果父盒子有高度，那就取父盒子的高度  

解决方案  
 
  1 给父盒子设置margin-top  

​

​

转载：https://blog.csdn.net/weixin_42839094/article/details/88956344