手把手教你做小米商城顶部导航栏
思路说明
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