Thinking analysis:
In this part, we need to implement the following styles:
first overall analysis:
- This part is also centered in the page, not to fill the entire page, so we need to remember to center the overall module
- 6.1 This part of the carnival can be regarded as a separate picture, and when the mouse is hovered, it will become a small hand, so we can use hyperlinks to nest pictures here.
- The last five styles are obviously five very similar styles and are in the same row, so we can use unordered lists ul and li for layout
Whole part:
Embed a centered div in the part to wrap the part, clear the float, don’t forget, and then add a background color to it
<div id="headAd">
<div class="clearfix layer">
</div>
</div>
#headAd {
background-color: rgb(241, 47, 4);
}
6.1 Carnival
Layout according to the first part, because this part is left-aligned, so we add left float, and add a class name to it to set the size:
<a href="#" class="fl go"><img src="./img/go.png" alt=""></a>
Check the page to understand the size of the inner margin, and since a is an inline element, we convert it to a block-level element and then set the inner margin
#headAd .go{
display: block;
padding: 10px 10px 10px 15px;
}
Unordered list ul
We first observe the internal structure of li:
two paragraphs of text and a picture, we use h3, p tags and picture tags (remember to add float), here are two points of knowledge:
- Block-level elements wrap in-line elements, but in-line elements are not allowed to wrap block-level elements under strict regulations
- Why use h3 tags?
H1: Usually used in the most important part of a page, its title, etc.
H2: Classification headlines and navigation generally use H2
H3: Normal headlines can be H3
code show as below:
<ul class="fr">
<li class="item1">
<!-- h和p是块级元素，而a是行内元素，行内不能嵌套块级，因此需要放在外面，img不属于行内元素也不属于块级元素，有一个单独的名称叫做行内替换元素-->
<a href="#" class="fr">
<img src="img/adimg_01.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item2">
<a href="#" class="fr">
<img src="img/adimg_02.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item3">
<a href="#" class="fr">
<img src="img/adimg_03.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item4">
<a href="#" class="fr">
<img src="img/adimg_04.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item5">
<a href="#" class="fr">
<img src="img/adimg_05.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
</ul>
Set style
6.1 Carnival logo setting size
Move the unordered list down by 13 pixels,
set the font size, width and height for each li,
set the background image
Code:
/* 头部广告 */
#headAd {
background-color: rgb(241, 47, 4);
}
#headAd .go{
display: block;
padding: 10px 10px 10px 15px;
}
#headAd .go img{
width: 80px;height: 80px;
}
#headAd ul{
padding-top: 13px;
}
#headAd li{
float: left;
width: 209px;
height: 75px;
margin-right: 10px;
padding: 12px 15px 0 15px;
/*
普通盒模型中宽高需要进行计算，因为包含边框和内边距
而border-box可以设置成另一种盒子模型，此时其宽高就是正常宽高
*/
box-sizing: border-box;
}
#headAd li a img{
width: 52px;
height: 52px;
border-radius: 5px;
}
#headAd li h3{
font-size: 20px;
line-height: 28px;
}
#headAd li a{
color: #fff;
display: block;
}
#headAd li.item1{
background: url(../img/adbg_01.png) no-repeat;
}
#headAd li.item2{
background: url(../img/adbg_02.png) no-repeat;
}
#headAd li.item3{
background: url(../img/adbg_03.png) no-repeat;
}
#headAd li.item4{
background: url(../img/adbg_04.png) no-repeat;
}
#headAd li.item5{
background: url(../img/adbg_05.png) no-repeat;
margin-right: 0;
}
Self-picking of pictures:
