小米官网竖直导航栏html,手把手教你做小米商城顶部导航栏

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

发布时间：2019-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 首先我们的内容都在版心之中，所以