1.整体结构分析
首先header是一个大盒子,与版心相同(因此直接加上版心的类就行)。然后是header可分为四个区域:左边是logo盒子,中间是搜索框盒子和热点词盒子,右边是购物车盒子。
<!-- header头部模块-->
<div class="header w">
四个盒子的位置需要用到定位
2.左侧logo制作
(1)logo的制作要符合LOGO SEO优化:
1.logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
2.h1里面再放一个可以返回首页的链接,把logo的背景图片给链接(也就是要把a转化为块元素)
3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来:
第一种方法:text-indent:-9999px; 然后overflow:hidden
第二种方法:直接给font-size:0; 这样就看不到文字了。
4.最后给链接一个title属性,这样鼠标放在链接上可以看到提示文字。
<!-- logo模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
(2)关于logo的位置:
要使用子绝父相的定位方法,宽度和高度测量出来,top是离盒子顶端的距离
/* header头部制作 */
.header {
position: relative;/*子绝父相*/
height: 105px;
/* background-color: pink; 辅助功能的背景色*/
}
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
/* background-color: skyblue; */
}
(3)对logo里a的处理:
注意a的width需要根据背景图片大小进行变化(或者调整背景图片大小 background-size)
.logo a {
display: block; /*转换为块级元素,否则不能调整长宽也不能加背景图片*/
width: 175px;
height: 61px;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
font-size: 0;
}
3.中间搜索框制作
(1)结构分析
搜索框是一个大盒子,大盒子里面有两个小盒子,左边是搜索盒子,右边是按钮盒子
运用<input>和<button>两个标签,其中placeholder属性用于初始化搜索框里的文字
<!-- search搜索模块 -->
<div class="search">
<input type="search" placeholder="语言开发">
<button>搜索</button>
</div>
用定位把search盒子定位好,加上红色边框
.search {
position: absolute;
left: 346px;
top: 25px;
width: 538px;
height: 36px;
border: 2px solid #b1191a;
}
(2)左侧搜索栏制作
.search input {
float: left;
width: 455px;
height: 36px;
padding-left: 10px;
}
由于input和button都是块级元素,因此两者不能出现在一行。因此要给两者加上浮动
padding-left是令盒子与大盒子左边留有一点空隙,从而使"语言开发"这几个字更美观
高度保持一致
(3)右侧按钮制作
.search button {
float: left;
width: 83px;
height: 36px;
background-color: #b1191a;
font-size: 16px;
color: #fff;
}
font-size用于调整字体大小,color是字体颜色,background-color是背景颜色。同样使用左浮动
(4)搜索框和按钮的初始化
由于搜索框和按钮自带有边框,并且搜索框在搜索时还会变为蓝色边框,因此要在base.css中去掉
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 去掉默认边框和点击之后的边框 */
border: 0;
outline: none;
}
4.中间热点词模块(horwords)制作
跟制作快捷导航栏的思路一样:用li包含a
<!-- hotwords模块制作 -->
<div class="hotwords">
<ul>
<li><a href="#" class="style_red">优惠购首发</a></li>
<li><a href="#">优惠购首发</a></li>
<li><a href="#">亿元优惠</a></li>
<li><a href="#">9.9元团购</a></li>
<li><a href="#">每满99减30</a></li>
<li><a href="#">办公用品</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">通信</a></li>
</ul>
</div>
其中字体颜色为红色的,可以加入“style_red”类名。
然后是用定位把热点词定位到搜索框下面
.hotwords {
position: absolute;
top: 66px;
left: 346px;
}
由于li是块级元素,因此要让所有元素都排列在一行上,需要用到浮动,然后用margin制作间隔
.hotwords ul li {
float: left;
margin: 0 10px;
}
5.shopcar模块制作
(1)结构分析
整体是一个盒子,用定位定到右边。文字要放在最中间。然后左边是一个购物车,右边是一个右箭头——使用字体图标。右上角是一个小盒子,可以用<i>来表示,用定位的负值来制作
(2)整体的盒子
<div class="shopcar">
<span class="iconfont gouwuche">󰅹</span>我的购物车<span class="iconfont youjiantou"></span>
<i class="count">8</i>
</div>
.shopcar {
position: absolute;
right: 60px;
top: 25px;
width: 140px;
height: 35px;
line-height: 35px;
/* 使文字在竖直上居中 */
text-align: center;
/* 使文字在水平上居中 */
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
}
比较重要的就是让文字处于中心的方法:1.line-height=height; 2.text-align:center;
(3)对字体图标的处理
.shopcar .gouwuche {
position: absolute;
left: 23px;
color: red;
font-size: 15px;
}
.shopcar .youjiantou {
position: absolute;
right: 15px;
}
要注意的地方有两点:1.如何调整字体图标的位置:由于<span>的父元素是绝对定位,无法使用子绝父相的方法。但是依然可以把字体图标设为绝对定位,此时为子绝父绝,子元素依然根据父元素的位置进行定位。 2.字体图标属于字体,因此可以使用font-size与color调整字体图标的属性。
(4)右上角提示count统计模块制作
.count {
position: absolute;
top: -5px;
right: 20px;
left: 105px;
/* 打印文字时,文字段向右移动 */
/* height: 14px; */
/* 打印文字时,问字段向左移动 */
line-height: 14px;
/* 修改文字的位置 */
color: #fff;
background-color: #e60012;
padding: 0px 5px;
/* 把盒子撑大 */
border-radius: 7px 7px 7px 0;
/* 一个边为直角,剩下为圆弧 */
}
注意的点:
1.与<span>相同,count模块也是使用子绝父绝的方法来调整位置的。
2.top等为负值的时候可以让元素的位置离开大盒子。
3.用padding可以把盒子撑大(前提是撑大后不会遇到其他盒子的边界,否则CSS3会自动调整)
4.用left和right的区别:用left调整位置的话,撑大盒子(如文字过长)会向右撑大,而用right调整则是向左撑大。
5.一个边为直角剩下是圆弧的制作:用border-radius,从左上角开始,到左下角结束,顺时针规则。