使用 CSS 文本缩进和 Padding 隐藏文本 - 文章教程

使用 CSS 文本缩进和 Padding 隐藏文本

发布于 2018-10-22 字数 1351 浏览 2265 评论 0

一个网站都会有一个 LOGO,这似乎是一条通用的布局和内容,而对于这个 LOGO 的代码编写,一般都会使用 <img /> 插入 LOGO 图片,然后再写上文字的描述,其实这样的方法有点过时了,因为这些描述文本只针对于这张 LOGO 图片,而放置更多的内容时候,搜索引擎不认为和网页的内容有多大的关系。

text-indent

CSS中的 text-indent 属性是设置段落文本缩进,如果我们给他设置 text-indent:100%,那么文本将会空一行出来,通过这个属性,我们可以应用到我们 LOGO 布局中。

我们将 LOGO 图片作为背景图放置到标签里面,然后添加 text-indent 属性,文本不换行,超出部分隐藏,那么这些文本将不会显示,也不会被搜索引擎判断为作弊。

.logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background:url(images/logo.png) no-repeat;
  height:24px;
  width:72px;
}

.logo 容器里面放置再多的内容,都不会显示出来。

Padding

Padding 属性用于设置元素的填充,同样我们定义背景图,而将 padding 设置为和容器一样的宽度,然后容器的宽度设置为 0,那么容器里面的内容也不会显示出来。

.logo {
  padding-left:72px;
  overflow: hidden;
  background:url(images/logo.png) no-repeat;
  height:24px;
  width:0;
}

上面两个隐藏文本的方法不同于以往的搜索引擎作弊方法,他不是直接将文本设置 display:none; 隐藏起来,而是通过合理的计算方式,让文本隐藏。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0