建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。
在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条:
1、display:none;
这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间。GG也搜CSS文件?不过如果用这个方法,
如何设计,也是难题。
2、visibility:hidden;
和display:none;相对应,为隐藏的对象保留物理占位空间。
3、overflow:hidden;
这是网上用的最多的方法,但是我认为对于隐藏h1标签的“站点名称”文字,不太合适,原因我在最后说。
.texthidden{ display:block; overflow:hidden; width:0; height:0;}
4、positon:absolute;
用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,另外我个人不喜欢用绝对坐标定位magin这个属性,margin在不同浏览器中总是带来不可预料的Bug。
.texthidden{ positon:absolute; margin-top:-9999px; margin-left:-9999px;}
5、text-indent:-9999px;
把h1作为一个块来显示(display:block;),指定长宽(和图片一样大小),然后指定h1的背景图片,也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的,仍然是作为字符形式出现的博客标题,然后用text-indent:-9999px;将文字甩到屏幕看不到的地方,9999px应该是足够了,谁的屏幕也没那么大吧。
h1 a{ height:30px; width:165px; float:left; text-indent:-9999px; background-image:url(images/logo.gif); background-repeat:no-repeat; display:block; position:relative;}
在h1使用上语义明确,符合语义化定义。text-indent就是首行缩进,大家都在中文段落,首行空两格用过它。这里通过负值缩进,使文字超出可视区,而这时h1下的背景就显示出来了,h1中包含的标签又不影响使用,对于隐藏文字“站点名称”应该是最佳方案了。但对于多段文字的隐藏这个方法就不适合了。
这里还有个问题,就是点击
链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。但是Firefox就有些麻烦,它把缩进的文字范围也包含进来了,这样不是很美观。 于是需要屏掉点击时产生的虚线框,IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下Firefox如何去掉链接的虚线框的方法。
a{ outline:none;/*去掉Firefox点击时产生的虚线框*/}
PS:全文都只是作者的观点,至于使用text-indent:-9999px;来解决问题是否可行,有人赞同有人反对。所以还是有待进一步讨论。

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver CS6
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
