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

心已赠人 2022-12-28 00:50 172阅读 0赞

# 思路分析： #

这部分我们需要实现如下样式：  
![在这里插入图片描述][20201212220858247.png_pic_center]  
先整体分析：

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

# 整体部分： #

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

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

# 6.1狂欢 #

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

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

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

# 无序列表ul #

我们先观察li内部结构：  
![在这里插入图片描述][20201212224606199.png]  
两段文字和一个图片，我们采用h3、p标签和图片标签（记得加上浮动），这里延伸两个知识点:

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

代码如下：

# 设置样式 #

6.1狂欢logo设置大小  
将无序列表往下挪13个像素  
给每个li设置字体大小，宽高  
设置背景图片

代码：

/* 头部广告 */
    #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;
    }

## 图片自取： ##

![在这里插入图片描述][20201212232315785.jpg]  
![在这里插入图片描述][20201212232315770.jpg]  
![在这里插入图片描述][20201212232315733.jpg]  
![在这里插入图片描述][20201212232315735.jpg]  
![在这里插入图片描述][20201212232315734.png]  
![在这里插入图片描述][20201212232315734.jpg]  
![在这里插入图片描述][20201212232315729.png]  
![在这里插入图片描述][20201212232315671.png]  
![在这里插入图片描述][20201212232315672.png]  
![在这里插入图片描述][20201212232315665.png]

[20201212220858247.png_pic_center]: /images/20221120/fb9c0b7e4f3c41d89a160475498d5dce.png
[20201212224606199.png]: /images/20221120/bab520b1bdeb4598b1324759b2efa788.png
[20201212232315785.jpg]: /images/20221120/893ab3cb67384463ab5d9ea99fa83571.png
[20201212232315770.jpg]: /images/20221120/6e82f141a6ba4255933bb78fe1f40d50.png
[20201212232315733.jpg]: /images/20221120/50da1d06f51c4c179ee2eecf10063194.png
[20201212232315735.jpg]: /images/20221120/7e88ed3d386f4df0aecfd8a20d94c910.png
[20201212232315734.png]: /images/20221120/3d9af0cfbb7e4c6fbf1b821d81cd6077.png
[20201212232315734.jpg]: /images/20221120/0ec9f50fdb884cd195c960f4167cb8cd.png
[20201212232315729.png]: /images/20221120/99c0a9191cb34f5a83765f6e6a420857.png
[20201212232315671.png]: /images/20221120/b2b6a99e78f44422b301522fa2b11fc9.png
[20201212232315672.png]: /images/20221120/6babacca923741088f34ab4b9b15d8b2.png
[20201212232315665.png]: /images/20221120/f630f84ea2a547048238c4da525647bb.png