HTML学习:LOGO图用H1标签并隐藏标签文字,添加的伪元素是子元素,并对该伪元素设置属性

一 LOGO图使用H1标签,以便于SEO优化,并对H1标签实现文字隐藏

放置logo图的位置一般要设置为h1标签,在h1标签里面设置a标签,对a标签设置背景图
这个方法是为了SEO优化

隐藏某标签的文字: font-size: 0;

.header .logo h1 a{
	display: block;  为什么设置为inline-block时,背景图片会向下掉?
	width: 207px;height: 70px;
	background-image: url(../images/logo.png);
	background-size: 100%;
	font-size: 0;
	/* 让背景图上面的文字隐藏掉 */
}

二 绝对定位的元素具备宽高等块元素和行内块元素的特征,宽高生效,不必再设置转为行内块元素或者块元素

三 生成的伪元素是行内子元素,设置了定位或者转换为行内块元素或者块元素以后,宽高属性才能生效

li::before{
	position: absolute;
	content: '';
	width: 58px;height: 58px;
	background-image: url(../images/sprites.png);
	vertical-align: middle;
}
对伪元素设置属性
.footer .top li:nth-child(2)::before{
	background-image: url(../images/sprites.png);
	background-position: -130px 0;
}

四 改变背景图的位置background position 属性值  水平  垂直   ,如果只写一个属性值,那么另一个属性值默认为center