前端联系项目------Day3 header

前端联系项目------Day3 header

 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">&#xf0179;</span>我的购物车<span class="iconfont youjiantou">&#xe603;</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,从左上角开始,到左下角结束,顺时针规则。

上一篇:AD添加图片logo教程(PCB Logo Creator)


下一篇:HTML5 logo源代码