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

一个网站都会有一个 LOGO,这似乎是一条通用的布局和内容,而对于这个 LOGO 的代码编写,一般都会使用 插入 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; 隐藏起来,而是通过合理的计算方式,让文本隐藏。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/521505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何查看一个组件的 classid是多少_如何查看iphone电池使用次数?6s电池容量多少需要更换?...

手机用久了之后,总感觉电池特别不耐用,特别是到了冬天,我相信很多人都会有种感觉,就是手机电池也越来越不耐用,待机时间变短,一天甚至需要三充。手机的电池确实和温度有关,但在使用一段时间后&a…

SLB访问日志分析:基于客户端来源和HTTP状态码的实践

摘要: 阿里云负载均衡SLB可以对多台云服务器(ECS)进行流量分发,支持TCP的四层负载均衡和基于HTTP/HTTPS的七层负载均衡。使用SLB可以降低单台ECS异常时对业务的冲击,提升系统可用性。同时,结合弹性伸缩服务…

android选择多个文件_一分钟合并多个Excel、PDF文件,3种方法任你选择,好用到没朋友...

一分钟合并多个Excel、PDF文件,3种方法任你选择,好用到没朋友前情提要:Excel、PDF多个文件怎样合并成一个文件?需求场景:PDF文件合并当一份完成的PDF资料分为很多份的时候,我们怎样将他们合并起来呢&#x…

Spring 常犯的十大错误,打死都不要犯!

戳蓝字“CSDN云计算”关注我们哦! 作者 | Toni Kukurin责编 | 刘丹错误一:太过关注底层我们正在解决这个常见错误,是因为 “非我所创” 综合症在软件开发领域很是常见。症状包括经常重写一些常见的代码,很多开发人员都有这种症状…

电阻用计算机怎么算,电阻分压计算器_电阻分压计算公式_电阻分压计算软件 - 电子发烧友(www.elecfans.com)...

电阻分压计算公式电阻分流分压总电阻计算公式设R1,R2并联,通过它们的电流为I1和I2U1U2I1*R1I2*R2I1/I2R2/R1I1/(I1I2)R2/(R1R2) I2/(I1I2)R1/(R1R2)设R1,R2串联,通过它们的电压为U1和U2I1I2U1/R1U2/R2U1/U2R1/R2U1/(U1U2)R1/(R1R2) U2/(U1U2)R2/(R1R2)电阻分压公式所谓分压公式…

confluence启动不起来_汽车“一键启动”只用来点火?太浪费!你不知道的还有这3个功能...

说到“一键启动”,相信大多车主都不陌生。在早些年,这个配置只有B级以上的车才会有,而现在普遍都具备了。那这个“一键启动”到底有什么作用呢?只能用来点火和无钥匙启动?不,还有这几点,我们一起…

findler mac 隐藏文件_Fiddler配合Proxifier抓包PC客户端HTTPS明文数据

正 文:一般在浏览器场景下,我们可以利用Fiddler很好的完成抓包,对HTTP或HTTPS连接可以清晰地看到各种数据包。但是对于一些pc端的客户端,比如各种exe可执行文件,就很有可能无法直接使用fiddler抓包。本文就来看下fiddl…

数据可视化揭晓NBA球星顶薪背后的真相

戳蓝字“CSDN云计算”关注我们哦!作者 | pk哥责编 | 刘丹7月1日凌晨6点,2019年NBA自由市场正式拉开大幕。之后的故事,我们都知道了,很多球员都签了顶薪合同,在我们看来,这是一堆的天文数字。美媒统计了一个…

RabbitMQ的5种队列_简单队列_入门试炼_第4篇

Statement 文章目录一、队列总览1.1. 图示1.2. 说明二、简单队列2.1. 图示2.2. 导入RabbitMQ的客户端依赖2.3. 获取MQ的连接2.4. 生产者发送消息到队列2.5. 管理工具中查看消息2.6. 消费者从队列中获取消息一、队列总览 1.1. 图示 1.2. 说明 说明模式①简单队列②work模式 多…

阿里云操作审计 - 日志安全分析(一)

摘要: 阿里云操作审计ActionTrail审计日志已经与日志服务打通,提供准实时的审计分析、开箱机用的报表功能。本文介绍背景、配置和功能概览。背景安全形式与日志审计伴随着越来越多的企业采用信息化、云计算技术来提高效率与服务质量。针对企业组织的网络…

spark中local模式与cluster模式使用场景_不可不知的Spark调优点

不可不知的Spark调优点​mp.weixin.qq.com在利用Spark处理数据时,如果数据量不大,那么Spark的默认配置基本就能满足实际的业务场景。但是当数据量大的时候,就需要做一定的参数配置调整和优化,以保证业务的安全、稳定的运行。并且在…

阿里云IoT将举办第三届极客创新挑战赛,吸引全球极客参赛

摘要: 为支持和推动全球极客文化发展,近日,阿里云IoT宣布将举办第三届极客创新挑战赛(GXIC)。该赛事是阿里云旗下IoT事业部所主办的智能创新比赛,本届大赛将首次对外开放征集报名参赛队伍。比赛将召集所有在…

命令逐行显示_Linux命令和Shell脚本学习随笔3

一、处理目录创建目录:mkdir Test创建多级目录: mkdir -p Test1/testsub删除目录:rmdir 该命令只允许删除空目录,删除非空命令提示:Directory not empty,如果文件夹下有文件可以配合命令rm进行删除二、查看文件内容命令…

html5画布 文本无法显示,淡出HTML5画布中的文本效果

Ori..13如果使用rgba()表示法来设置fillStyle而不是十六进制表示法,则会更容易.这是一个工作示例(演示):// Create a canvas element and append it to var canvas document.createElement(canvas),context canvas.getContext(2d);document.body.appendChild(canvas);functio…

【图解分布式架构】看不懂直接面壁

戳蓝字“CSDN云计算”关注我们哦!作者 | 佚名责编 | 阿秃初始阶段架构初始阶段的小型系统、应用程序、数据库、文件等所有的资源都在一台服务器上。通俗称为LAMP。特征:应用程序、数据库、文件等所有的资源都在一台服务器上。描述:通常服务器…

RabbitMQ的5种队列_Work模式_入门试炼_第5篇

文章目录一、work模式1.1. 图示1.2. 消费者11.3. 消费者21.4. 生产者1.5. 测试二、Work模式的“能者多劳”2.1. 关键配置2.2. 测试:一、work模式 1.1. 图示 一个生产者、2个消费者。 一个消息只能被一个消费者获取。 1.2. 消费者1 package com.gblfy.rabbitmq.w…

阿里云云数据库RDS秒级监控功能解锁,通宵加班找故障将成为过去式

摘要: 每一个奋斗在前线的数据库管理员和运维人员似乎运气都不太好,这些人都绝对经历过的诡异事件就是:逢年过节必出故障,明明眼看着要休假了,又接到故障通知,只好通宵加班找问题。没问题的时候可能大家都不…

阿里云DDoS高防 - 访问与攻击日志实时分析(三)

摘要: 本文介绍了DDoS日志分析功能的日志报表的使用方法。概述本文介绍DDoS日志分析功能的日志报表的使用方法。前提配置刚进入DDoS高防控制台的全量日志下,在界面引导下开通日志服务并授权操作后。就可以给特定的网站启用日志分析功能了。报表界面介绍在…

vue获取输入框得内容_React入坑(四):获取输入框内的内容

方法一:通过event对象信息获取import React from react;class Show extends React.Component {//state 相当于是Vue里面的data state {text: "",//默认初始值 }; hanChange ev > {//onChange 为Change事件,ev是传递的参数 …