仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 553|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来看看:CSS网页计划技能:表单button的text-indent

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:11:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
结构清晰,容易被搜索引擎搜索到,天生优化了seo

破洛洛文章简介:表单button的text-indent成绩。
HTML
<inputtype="submit"value="Submit"id="btn"/>
HTML
<inputtype="submit"value="Submit"id="btn"/>

CSSCode
在这个实例中,经由过程图片背景来制造Button,接纳了图片替换笔墨最经常使用的一种办法“text-indent”来制造

#btn{
width:114px;
height:37px;
border:none;
background:transparenturl(images/submit_btn.gif)no-repeatcenter;
overflow:hidden;
text-indent:-999px;
}
下面代码,在古代扫瞄器中不会有任何成绩,但是在IE下“text-indent:-999px”是不起感化的,请看最终效果:
怎样办理
为了让各扫瞄器下能一般化显现,我一样平常碰着如许的成绩都是在下面的代码基本上加上“font-size和line-height之类的设置”:
#btn{
width:114px;
height:37px;
border:none;
background:transparenturl(images/submit_btn.gif)no-repeatcenter;
overflow:hidden;
text-indent:-999px;
font-size:0;
line-height:0;
display:block;
}
如许一来就可以到达各扫瞄器下一样的效果了。最初我们在来看看他是怎样事情的。大概说为何要加上这几行代码?

font-size:0加上font-size:0后,能够办理IE7下显现笔墨的成绩(换句话来讲,经由过程设置font-size即是0后,button在IE7扫瞄器中不会显现文本出来,到达想要的效果),可是在IE6下会有分明的一条直线,并且线条色和远景色不异。
line-height:0第一条中说过了,font-size只要办理IE7下的成绩,留下了一条直线在IE6中显现,要办理这个成绩也复杂,我们能够经由过程line-height设置为0来办理。
display:block将button按块元素显现
这就是为什么要如许设置的缘故原由了。偶然候在如许设置了今后还会给你的button留下一个小点点,我通常为经由过程color来设置:

#btn{
width:114px;
height:37px;
border:none;
background:transparenturl(images/submit_btn.gif)no-repeatcenter;
overflow:hidden;
text-indent:-999px;

font-size:0;
line-height:0;
display:block;


color:#fff;
text-align:right;

}
这有一个小技能必要出格注重:这里的color色选择其背景邻近的色,让人肉眼看不出来,我通常为将其文本安排右边或右侧,然后择其最邻近的色彩做为背景致。好比这个实例,我们选了红色。
</p>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
兰色精灵 该用户已被删除
沙发
发表于 2015-1-17 20:10:11 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
愤怒的大鸟 该用户已被删除
板凳
发表于 2015-1-24 15:23:24 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
小妖女 该用户已被删除
地板
发表于 2015-2-1 23:37:10 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
飘飘悠悠 该用户已被删除
5#
发表于 2015-2-7 17:49:07 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
不帅 该用户已被删除
6#
发表于 2015-2-22 22:35:31 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
莫相离 该用户已被删除
7#
发表于 2015-3-7 05:38:37 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
只想知道 该用户已被删除
8#
发表于 2015-3-14 14:54:05 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-10 07:13

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表