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

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

<>思路说明

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

热门工具换一换