淘宝-静态页面编写(3)--头部广告

思路分析：

这部分我们需要实现如下样式：

先整体分析：

• 这部分也是在页面中居中，并不是撑满整个页面，所以我们到时候需要记得让整体模块居中
• 6.1狂欢这部分我们可以看做单独一块的图片，而当鼠标悬浮上去的时候会变成小手，所以我们这里可以采用超链接嵌套图片的方式
• 后面五个样式，显而易见是五个很相似的样式，且处于同一行，所以我们可以利用无序列表ul、li进行布局

整体部分：

先在该部分再嵌入一个居中的div进行包裹该部分，清除浮动不要忘记，然后再给它加上背景色

<div id="headAd">
<div class="clearfix layer">
</div>
</div>

#headAd {
   
	background-color: rgb(241, 47, 4);
}

6.1狂欢

按第一部分说的进行布局，由于该部分是左对齐，所以我们将其添加左浮动，并给它添加一个类名以设置大小：

<a href="#" class="fl go"><img src="./img/go.png" alt=""></a>

通过查看页面来了解内边距的大小，并且由于a是行内元素，我们将其转换为块级元素然后再设置内边距

#headAd .go{
   
	display: block;
	padding: 10px 10px 10px 15px;
}

无序列表ul

我们先观察li内部结构：

两段文字和一个图片，我们采用h3、p标签和图片标签（记得加上浮动），这里延伸两个知识点:

• 块级元素包裹行内元素，但行内元素在严格规范下是不允许包裹块级元素的
• 为什么采用h3标签？
  H1：通常用于一个页面最重要的地方，它的title等
  H2：分类大标题、导航一般采用H2
  H3：普通标题就可以是H3

代码如下：

     <ul class="fr">
            <li class="item1">
                <!-- h和p是块级元素，而a是行内元素，行内不能嵌套块级，因此需要放在外面，img不属于行内元素也不属于块级元素，有一个单独的名称叫做行内替换元素-->           
                <a href="#" class="