思路分析:
这部分我们需要实现如下样式:
先整体分析:
- 这部分也是在页面中居中,并不是撑满整个页面,所以我们到时候需要记得让整体模块居中
- 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="fr