仓酷云

标题: DIV教程之比来收拾的一份CSS笔墨埋没的demo [打印本页]

作者: 山那边是海 时间: 2015-1-15 23:17
标题: DIV教程之比来收拾的一份CSS笔墨埋没的demo
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
破洛洛文章简介：CSS笔墨埋没总结呈报.

{hide_text}CSS笔墨埋没总结呈报

比来收拾的一份CSS笔墨埋没的demo，总结了几种办法，但愿得出一种最完善的计划放进本人的代码片断，但是，到最初却堕入一种反复不休地颠覆结论的地步。由于必要思索的使用场景和元素其实太多，放下扫瞄器不谈，分歧的使用终端，分歧的标签布局会有纷歧样的最优计划，因而，与其但愿在事情上多“偷一些懒”，不如寻常多牢固堆集基本的常识，在必要衡量的时分，便能加倍轻车熟路。
由于本人履历尚浅，demo部分不免会有讹夺情形，如发明成绩，看人人能指出。
办法列表demo
1.毫无保存：display:none
代码片断：
(x)HTML
<pclass="hide_display">我是打酱油的文本</p>
CSS
/*暴力埋没*/
.hide_display{display:none;}
兼容性：

长处：

便利、快速
兼容性好

弱点：

屏幕浏览器没法浏览
超链接不合用
图片替换文本必要其他标签的背景
影响搜刮排名
大批利用简单被以为是SEO做弊

2.折衷选择：overflow:hidden/position:absolute/visibility:hidden
代码片断：
(x)HTML
<spanclass="hide_overflow">我是一号打酱油的文本</span>
<pclass="hide_position">我是二号打酱油的文本</p>
<pclass="hide_visibility">我是三号打酱油的文本</p>
CSS

破洛洛文章简介：CSS笔墨埋没总结呈报.

兼容性：

长处：

便利、快速
不但愿屏幕浏览器读取的内容可使用visibility

弱点：

超链接不合用
图片替换文本必要其他标签的背景

3.体验丧失：text-indent负值
代码片断：

(x)HTML
<pclass="hide_tex"><ahref="#">我是打酱油的超链接一号</a></p>
<aclass="hide_tex_span"href="#"><span>我是打酱油的
超链接二号</span></a>

<inputclass="hide_tex_input"type="submit"/>
<inputclass="hide_tex_input"type="submit"/>
<buttonclass="hide_tex_input">我是打酱油的文本
btn</button>
CSS

兼容性：

长处：

合用超链接的图片替换

弱点：

FF的虚边成绩
text-indent简单发生bug

破洛洛文章简介：CSS笔墨埋没总结呈报.

4.牛皮癣：font-size设零
代码片断：
(x)HTML

<pclass="hide_fs">我是擦不失落牛皮癣</p>
<buttonclass="hide_fs">我是打酱油的文本btn</button>
<inputclass="hide_fs"type="submit"/>
CSS

.hide_fs{font-size:0;}
兼容性：

长处：

便利、快速

弱点：

扫瞄器体现纷歧致，ie,safari有最小字号，chrome最小12px，ff不显现文本
合用情况少

5.强强团结：line-height三倍
代码片断：
(x)HTML
<pclass="hide_lh"><ahref="#">今朝为止被一般人类广泛承受的疑似最完善埋没笔墨计划，传说是tommy创造的</a></p>

<buttonclass="hide_lh_btn">我是打酱油的文本
btn</button>

<inputclass="hide_lh_btn"type="submit"/>

<inputclass="hide_lh_btn_final"type="submit"/>
CSS

/*设定高度，使用行高将文本撑到容器可视局限外*/
.hide_lha,.hide_lh_btn{
width:200px;
height:20px;
overflow:hidden;
line-height:60px;/*行高最好设3倍或以上，chrome简单后漏*/
display:block;/*行内元素必要*/
/*演示必要*/
background-color:#ccc;
margin-left:300px;
}
.hide_lh_btn_final{
width:200px;
height:20px;
overflow:hidden;
line-height:60px;
display:block;
font-size:0px;/*opera和ff撑持*/
}

破洛洛文章简介：CSS笔墨埋没总结呈报.

兼容性：

长处：

兼容性好
超链接和图片替换文本可用

弱点：

利用限定较年夜，必要定宽高
多一丁点：前置背景遮挡

代码片断：
(x)HTML

<aclass="hide_bg"href="#"><span
class="front_bg"></span>我是可会见性的化身</a>
CSS

.hide_bg{
width:200px;
height:20px;
position:relative;
display:block;/*行内元素必要*/
}
.hide_bg.front_bg{
background:url(bg_text.png)no-repeat;/*背景内容即是或年夜于容器巨细*/
position:absolute;/*相对定位，不影响文本*/
left:0px;
top:0px;
width:200px;/*与父元素等宽高*/
height:20px;
display:block;
/*cursor:pointer;ie6和链接必要用*/
}
兼容性：

长处：

兼容性好
超链接和图片替换文本可用
可会见性强

弱点：

利用限定较年夜，必要定宽高
代码冗余，必要空标签
另辟门路：content:”"

代码片断：

(x)HTML


<aclass="hide_ct"href="#">大概我才是最符合的，谁晓得呢，内容体现分别。只要opera撑持</a>
CSS

.hide_ct{content:"";}
兼容性：

长处：

复杂

弱点：

内容款式分别
不有用

原文：http://caib.me/hide-text/

.hide_texa,.hide_tex_span{
text-indent:-32767px;
display:block;/*text-indent合用块状元素中行内元素和
文本节点*/
/*演示必要*/
width:200px;
height:20px;
margin-left:300px;
background-color:#ccc;
/*outline:none;不倡议埋没outline，键盘流选手没法操纵*/
}
.hide_tex_input{
text-indent:-32767px;
width:200px;
height:50px;
display:block;
}

/*埋没元素，离开文本流，使元素不影响其他元素*/
.hide_overflow{
height:0px;
overflow:hidden;
display:block;/*行内元素必要*/
float:left;/*离开文档流大概position:absolute;*/
}
/*定位在可视局限外，离开文本流，使元素不影响其他元素*/
.hide_position{
position:absolute;
left:-32767px;
}
/*道理与.hide_position一样*/
.hide_visibility{
visibility:hidden;
position:absolute;/*离开文档流*/
margin-left:-32767px;
}
</p>
大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

作者: 飘灵儿 时间: 2015-1-17 21:36
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 只想知道 时间: 2015-1-22 13:44
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 飘飘悠悠 时间: 2015-1-31 07:39
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 若天明 时间: 2015-2-6 18:30
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 海妖 时间: 2015-3-6 02:13
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 简单生活 时间: 2015-3-12 20:38
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 灵魂腐蚀 时间: 2015-3-20 03:27
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)