@效果预览
感觉身体里有一股真气在逐渐升腾，糟了！可能是心动的感觉？
@布局思路
宏观拆分
- 给整个页头以197的高度 + 白色背景 + 怪异盒模型（即197包含内容高+上下内边距）；
- 用一个div1盛放logo + 搜索框，宽度1190居中，高度108，顶部预留30内边距，怪异盒模型；
- 用一个div2盛放水平主菜单，宽度1190居中，高度51，怪异盒模型；
- 以上完成大格局的铺排，接下来我们往上述两个div中填充具体内容；
搜索框布局
- 用一个div11盛放input框 + 搜索按钮，宽度553，令其在div1中水平居中；
- 在div11内部使用左浮动放置input + button,令其水平排列；
logo图片布局
- 使用绝对定位使其位于div1最左侧；
水平菜单布局
- 将一个宽740的ul放置在div2的正中央，高度随后让li将其自然撑开；
- 此处我们刻意使用绝对定位+偏移实现ul在div2中的宽高居中；
- 使用浮动实现ul中li的横排；
@HTML部分
根据上面的思路，我们设置页头的HTML如下
<!-- 页头 -->
<div class="header">
<!-- 顶栏内容 -->
<div class="topbar">...</div>
<!-- 盛放logo + 搜索框 -->
<div class="search-box">
<!-- logo -->
<img src="./imgs/logo.png" alt="logo">
<!-- 搜索框 -->
<div class="box">
<input class="left" type="text" placeholder="搜索商家或地点">
<button class="left">
<i class="iconfont icon-fangdajing"></i>
</button>
</div>
</div>
<!-- 盛放水平菜单 -->
<div class="menu-box">
<!-- 水平菜单 -->
<ul>
<li class="left">美团外卖</li>
<li class="left">猫眼电影</li>
<li class="left">美团酒店</li>
<li class="left">民宿／公寓</li>
<li class="left">商家入驻</li>
<li class="left">美团公益</li>
<li class="clearfix"></li>
</ul>
</div>
</div>
@样式部分
宏观拆分
- 准备盛放logo+搜索框的盒子（即上面布局思路中的
div1）
.search-box {
/* 设计图中测量出盒子的宽高 */
width: 1190px;
height: 108px;
// 顶部内边距
padding-top: 30px;
// 怪异盒模型（即1190*108实际包含了内容+内边距）
box-sizing: border-box;
// 在父盒子中的外边距 上下为0 左右居中
margin: 0 auto;
// 稍后logo图片子元素要相对于当前盒子做绝对定位
position: relative;
}
- 盛放水平菜单的盒子（即上面布局思路中的
div2）
/* 准备盛放水平菜单 */
.menu-box {
/* 在设计图中测量出的盒子宽高 */
width: 1190px;
height: 51px;
// 在父盒子中水平居中
margin: 0 auto;
// 所有子元素的字号大小
font-size: 16px;
// ul子元素稍后要相对当前盒子做绝对定位
position: relative;
}
搜索框布局
- 用一个div盛放input框 + 搜索按钮，宽度553，令其在父盒子中水平居中；
- 在div内部使用左浮动放置input + button,令其水平排列；
/* 定义左右浮动类 */
.left {
float: left;
}
/* 准备盛放logo + 搜索框 */
.search-box {
...
/* 搜索框盒子 */
.box {
/* 效果图宽高 */
width: 553px;
height: 40px;
// 在父元素中水平居中
margin: 0 auto;
/* 输入框 */
input {
/* 当前元素还有一个left类在控制其左浮动 */
/* 效果图中测量宽高 */
width: 473px;
height: 100%;
// 宽高中包含了内边距
box-sizing: border-box;
/* 设置边框 左上左下角有圆角 */
border: 1px solid #f1f1f1;
border-radius: 5px 0 0 5px;
// 文本缩进
text-indent: 15px;
// 去掉聚焦时的默认高亮黑框
outline: none;
}
/* 搜索按钮 */
button {
/* 当前元素还有一个left类在控制其左浮动 */
/* 效果图中测量出宽高 */
width: 80px;
height: 100%;
// 背景色
background-color: #ffc300;
// 取消默认边框
border: none;
// 右上 右下 5px圆角
border-radius: 0 5px 5px 0;
/* iconfont图标字体 */
i {
// 加粗
font-weight: bold;
// 图标字体的字号大小
font-size: 18px;
}
}
}
}
logo图片布局
- 使用绝对定位使其脱离文档流并位于父盒子最左侧；
/* 准备盛放logo + 搜索框 */
.search-box {
/* logo图片 */
img {
// 效果图宽度（高度会根据比例自适应）
width: 126px;
// 相对于父盒子做绝对定位（脱离了文档流，其它兄弟元素无视它的存在）
position: absolute;
// 距离父盒子左侧为0
left: 0;
}
}
水平菜单布局
- 将一个宽740的ul放置在父盒子的正中央，高度随后让li将其自然撑开；
- 此处我们刻意使用绝对定位+偏移实现ul在父盒子中的宽高居中；
- 使用浮动实现ul中li的横排；
/* 准备盛放水平菜单 */
.menu-box {
...
/* 水平菜单 */
ul {
/* 宽度测量而来 高度自然撑开 */
width: 740px;
// 在父盒子中水平居中
margin: 0 auto;
// 清除子元素浮动对后来元素的影响，使当前盒子成为一个BFC
overflow: hidden;
/* 使用绝对定位+偏移校正使当前盒子在父盒子中宽高居中 */
// 绝对定位
position: absolute;
// 左上角对其父盒子的中心点
top: 50%;
left: 50%;
// 向左+向上校正当前盒子宽高的一半
transform: translate(-50%, -50%);
/* 注意这些li都有一个left类在控制它们左浮动 */
li {
// 左右有margin
margin: 0 20px;
// 字体加粗
font-weight: bold;
}
/* 被鼠标覆盖时鼠标变手型 + 文字变色 */
li:hover {
color: red;
cursor: pointer;
}
}
}
源码在此 收刀下课！
