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