【京东商城首页实战5】给网页添加logo

下面，接着做topbanner下面的部分，如图：

图1
要点分析：
1.图中5个元素都在一个大盒子。
2.大盒子内容不通栏，要设置版心。
3.搜索框下面的推荐列表既可以跟搜索框同在一个盒子，也可以单独一个盒子。由于两者没有语义的关联，这里让它是个独立的盒子。logo和动图紧密连接，把他们归到一个盒子。所以这个大盒子可分为4个盒子来做。

分析完之后就按照思路动手敲代码了。为了避免篇幅过长，看着累，本篇只写添加logo部分。

1.添加logo

附上logo图和动图：

图2

图3

在做网页时，并没有显示“多快好省”几个字。这里通过给后面的动图绝对定位盖住这个几个字。当然，方法并不是唯一的，也可以用其他办法达到目的，闲时可以试试。

HTML代码：

<div class="logo">
     <a href="http://www.jd.com" target="_blank" class="jd-a" title="京东">京东</a>
     <!--标签a里面的字不需要显示，之所以写上内容，是为了搜索引擎优化，增大搜索权重-->
      <div class="db11">
           <a href="#"><img src="images/dong.gif" alt=""/></a>
          <!--插入动图-->
     </div>
</div>

CSS代码：

.logo {
    width: 360px;
    height: 75px;
    /*给logo大盒子设置宽高*/
    /*background-color: pink;*/
    float: left;
    /*左浮动*/
    padding-top: 25px;
    /*logo盒子上padding为25px*/
    background: url(../images/logo.png) no-repeat 0 25px;
    /*背景属性综合写法：背景图地址，不重叠，向右移动量 向下移动量*/
    position: relative;
}
.jd-a {
    display: block;
    width: 270px;
    height: 60px;
    /*整个图片都是a链接，所以要把a转块设置宽高*/
    text-indent: -2000em;
    /*通过这个属性，隐藏a标签里面的内容*/
}
.db11 {
    position: absolute;
    /*利用绝对定位，固定动图的位置，盖住logo多余的部分*/
    width: 180px;
    height: 80px;
    /*background-color: pink;*/
    top: 10px;
    left: 168px;
}

效果：

图4

作者尝试的一种写法：
HTML：

 <div class="logo">
      <div class="jd-logo">
          <a href="http://www.jd.com" target="_blank" class="jd-a" title="京东">京东</a>
      </div>
      <a href="#" class="pic2"></a>
      <!--插入动图-->
</div>

css代码：

.logo{
    width: 360px;
    /*height: 100px;*/
    /*儿子的内容能撑开父亲盒子的高度，所以这里可以不要高*/
    background-color: pink;
    float: left;
}
.jd-logo .jd-a{
    /*background-color: blue;*/
    float: left;
    /*左浮动，可以设置宽高*/
    padding-top: 25px;
    width: 170px;
    height: 75px;
    /*设置盒子的宽高和样图上的相同，logo右边多余的部分就不能显示出来了。*/
    background:url(../images/logo.png) no-repeat 0 25px;
    /*图片为a标签的背景，所以整个图片都是链接。*/
    text-indent: -9999em;
    /*隐藏“京东”二字*/
}
.logo .pic2{
    float: left;
    /*左浮动*/
    width: 180px;
    height: 100px;
    /*设置图片所在的a标签的宽高，使高度和父亲盒子相同*/
    background: url(../images/dong.gif) no-repeat 0 10px;
    /*设置背景图片，调整图片位置即可*/
}

效果：

有一点困惑的是，在CSS样式里可以不需要设置jd-logo类名的样式，但是当我删掉这个div盒子时，logo图片就不见了。。。检查元素，.jd-logo .jd-a标签没有获得样式。也浮动了，就算转块，.jd-logo .jd-a的样式还是无效。水平有限百思不得其解，有大神看到希望不吝赐教，谢谢！