CSS制作网页布局实例:隐藏input文字

以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>隐藏 input 内文字的方法</title>
<style type="text/css">
/*<![CDATA[*/
input {
 margin:5px 0;
 width:200px;
 height:20px;
 display:block;
 overflow:hidden;
 background:#f9f9f9;
 border:1px solid orange;
 }
input.a {
 ie:expression(bb.value="提交");
 text-indent:-200em;
 }
input.b {
 padding-top:20px;
 }
input.c {
 font-size:100em
 }
/*]]>*/
</style>
</head>
<body>
<input type="button" value="提交" id="bb" class="a" />
<input type="button" value="提交" class="b" />
<input type="button" value="提交" class="c" />
</body>
</body>
</html>

 

      我们需要特别注册的是下面的代码：

以下是引用片段：
input {
 margin:5px 0;
 width:200px;
 height:20px;
 display:block;
 overflow:hidden;
 background:#f9f9f9;
 border:1px solid orange;
}

      我们看下面的分析：

      第一种方法

以下是引用片段：
input.a {
 ie:expression(bb.value="提交");
 text-indent:-200em;
}　

　
      在opera上有问题

      第二种方法

以下是引用片段：
input.b {
 padding-top:20px;
}　　

      如果这个值太小了在opera上文字还是可见，所以设置大一些就没问题了，但FF中又会出现把高度撑大的现象；
 
     第三种方法

以下是引用片段：
input.c {
 font-size:100em
}　　

      这种方法应该说是兼容性最好的。

时间： 2025-01-29 14:04:14

CSS制作网页布局实例:隐藏input文字的相关文章

CSS制作网页布局实例：隐藏input 文字

css|网页 我们来看下面的代码,成功的实现了隐藏input 文字.但分为三种情况,我们在后面进行分析. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"

初学者指导：如何来学习DIV CSS制作网页技术

css|初学|网页 我接触的很多人都问,如何学习Web标准制作网页呢?我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的.DW工具也可以使用,但是要看着代码写网页了.首先是xhtml代码,不是很多,知道他们如何使用,怎么正确书写,而且要记得封闭tag.如<img/><br/>.建议看看一些html参考

CSS3网页布局实例代码:始终在网页底部代码2则

文章简介:CSS3网页布局实例代码:始终在网页底部代码2则 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>始终在底部(1)</title><style>body{margin:0} html, body{height:100%}

DIV CSS网页代码学习:2个小时学会CSS制作网页

文章简介:2个小时学会CSS制作网页. 第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站. 其基本布局见下图: 主要由五个部分构成: 1.Main Navigation 导航条,具有按钮特效. Width: 760px Height: 50px 2.Header 网站头部图标,包含网站的logo和站名. Width: 760px Height: 150px 3.Content 网站的主要内容. Width: 480px Height: Changes dep

CSS定义网页布局漂亮的Button按钮代码

css定义网页布局漂亮的button按钮代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

DIV CSS网页布局实例：十步学会用CSS建站

css|网页 Update:本篇已得到原作者Steve Dennis的翻译准予,在此Jorux表示感谢! 本教程主要参考Creating a CSS Layout from scratch,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴. 目录: 第一步:规划网站,本教程将以图示为例构建网站: 第二步:创建html模板及文件目录等: 第三步:将网站分为五个div,网页基本布局的基础: 第四步:网页布局与div浮动等: 第五步:网页主要框架之外的

DIV CSS网页布局实例：自定义标签布局页面

css|网页|页面 我们可以自定义标记来布局页面. 有的朋友可能有这样的疑问,自己随便定义的标记浏览器怎么能正确的认识呢? 这里我们就要用到文档的命名空间,那么命名空间又是指什么? 大家知道XML有一个很大的特点就是他的可扩展性.你可以创建你自己的标记或使用别人创建的标记,这里就存在了一个问题,即你所定义的标记和别人定义的标识有可能相同,但他们各自所表示的意义却不同. 打一个形象的比喻,比如有两个人名字都叫webjx_com,一个人在中国,一个人在外国,如果你要找他们就可以说,中国的,外国的,这

网页制作教程：用CSS实现网页布局

css|教程|网页 页面布局 用CSS 来布局很容易.如果你已经习惯用表格布局的话,起先会感觉比较困难.其实不难,只不过动机不同,并且在实践中更有意义. 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块.你可以绝对或相对地用彼块取代此块. 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定). static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般. relat

CSS制作网页时的优化与技巧

css|技巧|网页|优化 使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 区分大小写