169it科技资讯
169it -->


当前位置:  编程技术>WEB前端

CSS小例子(只显示下划线的文本框,像文字一样的按钮)

    来源: 互联网  发布时间:2014-10-07

只显示下划线的文本框,像文字一样的按钮 body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ color:#005aa7; border-bottom:1px solid #005aa7; /* 下划线效果 */ border-top:0px; border-left:0px; border-right:0px; background-color:transparent; /* 背景色透明 */ } .btn{ background-color:transparent; /* 背景色透明 */ border:0px; /*border:0px solid #005aa7;边框取消 */ cursor:pointer; }
用户名: 密 码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    
相关技术文章:
    ▪可以给img元素设置背景图

     实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值。 Image Demo div { background: url('http://img./images/blur.jpg') no-repeat top left; width: 232px; height: 200px; } img { display: block; background: url('http://img./images/parallax.gif') no-repeat bottom left; padding: 93px 100px 75px 100px; } ......


    ▪不通过JavaScript实现的自动滚动视差效果

     这个效果是仿照Chirs Coyier的视差教程实现的,经过Chirs的允许使用了其中的星空背景。 运行效果:在这里观看:http://www.fofronline.com/experiments/parallax/#experiment该效果可以在Safari 4 Beta和Google Chrome中正常预览,实现该效果无需JavaScript。(但是在IE7及以下版本中无法观看) 实现方法:这个页面的HTML代码非常简单,通过一个div来定义背景,另一个div来定义内容,这里使用了CSS3中的多重背景技术,所以需要另外的标记来表示其它的背景图片......


    ▪div+CSS 兼容小摘

     区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> HEAD 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6、IE7识别 _ 可被IE6识别 *+ 可被IE7识别 2. IE专用的条件注释 <!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" />......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号