编写网页代码中 LOGO 的处理

发布于 2018-09-11 字数973 浏览 876 评论 0

一个网站一定要有一个 LOGO,他属于模版中的一部分,很多人都是使用的 IMG 标签插入 LOGO 图片,然后给 LOGO 图片加上 Alt 文字描述,其实这样是不利于优化的,下面的两种方法或许更适合你。

利用 text-indent 隐藏文本

大家都知道 text-indent 可以让文本或者是图片偏移,常用于段落前空两个字的位置,不过这个也可以用于 LOGO 上面的设置

h1 {
  text-indent: -9999px;
  margin: 0 auto;
  width: 320px;
  height: 85px;
  background: transparent url("images/logo.png") no-repeat;
}

利用 Padding 隐藏文本

如果设置了背景图,Padding 属性不会影响背景图片的位置,所以可以这样设置

h1 {
  margin: 0 auto;
  width: 0;
  height: 85px;
  padding-left:320px;
  overflow:hidden;
  background: transparent url("images/logo.png") no-repeat;
}

设置 padding-left 的值就是 LOGO 的宽度,整个容器的宽度为 0,又设置了超出部分隐藏,所以多余的文字不会显示出来。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!