【京东商城首页实战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的样式还是无效。水平有限百思不得其解，有大神看到希望不吝赐教，谢谢！