DAY 03 品优购项目
学习目标：学会设置顶部快捷导航
品优购首页布局
2、 header制作
- header盒子必须要有高度
- 主要分为四个模块
- 1号盒子是logo 标志
- 2号盒子是search 搜索模块
- 3号盒子是hotwords 热词模块
- 4号盒子是shopcar 购物车模块
本次不用margin，使用的主要是定位
-
logo标志
logo标志是最重要的部分，先用ps将其裁剪下来，注意要设置为在透明底上进行裁剪。之后存储在根目录中的img中。（对于logo的宽高设置，直接选择logo标志看宽高）
logo优化
- logo 首先放入一个h1标签，其目的在于提权，告诉搜索引擎，这个地方很重要
- h1里面要放入一个链接，可以返回首页的，要给链接一个 大小 和 logo 的图片
- 链接里面要放文字，但是不要显示出来，不显示有两种方式：1、text-indent移到盒子外面，再利用溢出隐藏：overflow：hidden；2、直接给font-size：0；
- 最后要给链接一个title，这样鼠标放在logo上，就可以看到提示文字了。
-
search搜索模块
search模块也是放在盒子里，对于导航栏的四部分来说，都是兄弟关系，即并列的，在每次写模块时可以先声明是哪一模块，给出注释，方便辨别。
search模块也是使用的定位，也是需要先在ps中先量出该模块的与边的距离，之后再common.css中加入定位样式设置。
.search {
position:absolute;
top:25px:
left:348px;
}
？没听清：左右型，行内块元素
行内块元素表单和表单之间势必会有缝隙，如果想要没有缝隙，必须要加浮动。
对于search模块来说，分为左右两部分，先加入button，之后在调整样式。
<div class='search'>
<input type='text' class='text' value='请搜索内容'>
<button class='btn'>搜索<button>
</div>
样式调整
.search {
position: absolute;
top:25px;
left:348px;
}
.text {
float: left;
width:455px;
height:32px;
border:2px solid #b1191a;
}
.btn {
float: left;
width:82px;
height:36px;
background-color:#b1191a;
border:0;
font-size:16px;
color:#fff;
}
对于左右行内块元素来说，间隙难以避免，直接使用float：left消除间隙。
对于搜索框点击出现蓝色轮廓线，想要取消主要是在base.css中取消
button,
input {
/*取消蓝色边框线*/
outline: none;
}
3. hotwords 模块
热词模块也是先定位，之后列出a，热词之间的空隙可以利用行内元素的特点：行内元素可以给出左右间距，只要不给上下间距就可以。
<div class='hotwords'>
<a href='#' class='style-red'>优惠购首发</a>
<a href='#'>亿元优惠</a>
<a href='#'>9.9团购</a>
<a href='#'>满99元减30</a>
<a href='#'>办公用品</a>
<a href='#'>电脑</a>
<a href='#'>通信</a>
</div>
样式部分也是一致的
.hotwords {
position:absplute;
top:68px;
left:345px;
}
.hotwords a {
margin:0 10px;
}
4. shopcar 模块
对于购物车模块来说，是一个放在右边的盒子，这次定位可以改为右对齐。
<div class='shopcar'>
<span class='iconfont icon-xxx01'></span>我的购物车<span class='iconfont icon-xxx02'></span>
</div>
.shopcar {
position:absolute;
top:25px;
right:64px;
width:138px;
height:34px;
border:1px solid #dfdfdf;
background-color:#f7f7f7;
line-height:34px;
text-align:center;
}
测量其盒子大小时，不测量盒子的边框，测量的是盒子边框的内部宽高。
对于定位的问题：定位的左右对齐是根据网页的版心来定的。
.iconfont icon-xxx01 {
font-family:'icomoon';
color:#da5555;
}
.iconfont icon-xxx01 {
font-family:'icomoon';
margin-right:5px;
}
margin的用法待补充
