豆瓣网站仿写1-头部（隐藏logo的文字）

今天仿写了页面头部，如图。

• logo部分要放在 h1 标签里面，并且用a标签包裹
• 直观上只显示了logo图标，a标签里面的文字是如何隐藏的呢？

• 解释：

			<div class="logo left">
				<h1><a href="">豆瓣</a><h1>
			</div>

（html代码）

.header .logo a{
	width:160px;
	height: 0;
	display: block;
	background: url(../img/logo_db.png) no-repeat left top/100%;
	padding-top: 34px;
	overflow: hidden;
}

（css代码）

1.添加logo背景图
2. 将a元素设置成块盒并添加宽度，宽度设置为0
3. 设置上内边距，高度与logo图相同
4. 此时文字被内边距挤出了内容区域
5. 图片不会被寄出去
6. 设置溢出部分隐藏
7. 这样既不影响搜索引擎找到这个网站也不影响美观啦！
8. 写静态网页一定要心细，一个一个部分去完成就像闯关一样
9. 第一次在csdn写博客，写得不好的地方希望大家见谅，一起加油！