CSS实践06：用户交互图片

1、美食页效果

添加登录条，设置样式，在右上角显示
替换logo，将之前的logo.png换成一张gif图片。
效果如下：

2、设置CSS

添加登录名，并设置类名

<div class="login-bar">
	<a class="qq-login" href="#">QQ登录</a>
	<a class="wb-login" href="#">微博登录</a>
</div>

设置登录条的CSS

/* 登录条 */
.login-bar{
	text-align: right;
	margin: 10px 30px 0 0 ;
}
.login-bar a{
	color: #ffffff;
	text-decoration: none;
}
.login-bar a:hover{
	text-decoration: underline;
}

为2个超链接添加小图标：设置背景，设置文字的补白，让图标显示在文字的左边

.login-bar a{
	color: #ffffff;
	text-decoration: none;
	background: url(images/login-icon.gif); /* 小图标一般不设置备用的颜色 */
	padding-left: 28px;
}

显示各自的图标

.login-bar a.qq-login{
	background-position: 0 0; /* 可以省略不写 */
}
.login-bar a.wb-login{
	background-position: 0 -28px;
}

此时图标没有完全显示出来，设置height也无效果，height标签针对内联标签是不起作用的，可以改成块标签。但QQ登录和wb登录就会各占一行。所以可以改成内联块标签。并且让图标和文字上下居中

.login-bar a{
	……
	height: 28px;/* a标签的背景图,所以高度设在a标签上 */
	display: inline-block;
	line-height: 28px;
}

让行高和图标的高度一致，是让一行文字和图片垂直居中的一个小技巧。
替换logo

<!-- <img src="images/logo.png" alt="美食网" title="美食网"> -->
<img src="images/new_year_logo.gif" alt="美食网" title="美食网">

logo.png是184140，而new_year_logo.gif是226129，所以图片有点失真，修改图片样式如下：

/* .logo img{
	width: 184px;
	height: 140px;
} */
.logo img{
	width: 226px;
	height: 129px;
}