手把手教你做小米商城顶部导航栏
发布时间：-04-01 20:19,
浏览次数：985
<>手把手教你做小米商城顶部导航栏
<>思路说明
<>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 右边的搜索盒子
class="logoBox">
>
<>4我们再来分析里面的三个盒子
1 首先我们的内容都在版心之中，所以我们需要给我的父盒子加一个class="banxin",目的就是把我们的内容限制在版心当中
class="banxin">
class="searchBox">
2 再来分析版心里面的三个盒子,我们观察发现 里面的三个盒子在一排显示，但是我们的div
却又是块级元素，默认占一整行，所以这个时候我们可以考虑用定位和浮动，但是我们一般对整个大的布局，一般采用浮动，这样更加高效，快捷，方便 2.1
我们观察发现 logoBox 和listBox 可以设置左边浮动 2.2 searchBox 内容是靠着右边，可以设置右边浮动
class="banxin">
3.1
由于我们给版心里的三个盒子都设置了浮动，而且版心我们又没有设置高度,所以这个时候我们版心的高度为0 解决办法： 1 给版心盒子设置一个高度(50px) 2
给版心清除浮动 这里我们选择给banxin盒子加一个类名为bigBox
class="logoBox fl">
3.2设置bigBox 的样式 给他一个高度
.bigBox { line-height: 55px; /*这里设置行高等于高度是为了让这个盒子里的文字垂直居中*/ height: 55px; }
<>5在我再来写左边logo的盒子
5.1 左边盒子是一个logo 图片, 这个图片可以点击 那么我的HTML 样式结构可以写成下面这个结构样式
fl"> 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个子盒子组成 代码如下：
class="listBox fl">
6.2 通过分析 我们再次发现
这两个盒子也要同时显示在一行内容，由于我们的div 是块级元素，默认独占一行，这个时候 我们有2中种方法 1 .mi816盒子和ul 盒子都设置浮动 2
都转换成行内块元素 在这里 我们采用 浮动的做法，因为大的布局用浮动的写法更加方便，快捷
class="fl mi816">
6.3 我们来写 .mi816的盒子
class="fl mi816">
6.3.1
由于发现这个盒子是一张图片，那么就会有3px边框间隙的问题， 所以我们也可以把 img 转成了 块级元素 .listBox .mi816 img {
display: block; height: 55px; /*这里设置高度等于55px 是让图片的高度跟外面的盒子的高度保存一致*/ } 6.4
我们再来写这个ul 盒子 1 分析 发现里面是很多个li 标签组成的
小米手机红米电视 笔记本盒子新品路由器智能硬件服务社区 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 那么我们的基本布局格式如下
class="searchBox fr ">
value="">搜索
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结构
class="searchBox fr ">
value="">搜索
发现 .searchBox 里面的input button
都浮动了，而且我们的.searchBox也没有给高度，这个时候是不是应该.searchBox的高度应该为0 ，这个时候发现
我们.searchBox的高度为44px 为什么会是这样呢？？？ 1 我们分析发现，.searchBox
也浮动，所以他跟着子盒子一起飞走了，当父盒子，子盒子同时都浮动了的时候，如果父盒子没有设置高度，那么父盒子的高度由子盒子的高度撑开 2
如果父盒子有高度，那就取父盒子的高度 解决方案 1 给父盒子设置margin-top
