用CSS轻松实现网上填空

2016-01-29 12:00 79 1 收藏

用CSS轻松实现网上填空,用CSS轻松实现网上填空

【 tulaoshi.com - Html 】

 

    在网上做有奖信息的时候,经常看见一些注册表单,只有一条线供你填写,就跟做考卷时的填空题一样,很Cool!

    其实要做成这样的效果并不难,只需用一段很简短的CSS代码即可搞定!

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

    < style type="text/css"
  < !--
  .xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none}
  --
  < /style

    其中代码的作用如下:

    “BORDER-LEFT-STYLE:none”: 不显示左边框
  “BORDER-RIGHT-STYLE: none”: 不显示右边框
  “BORDER-TOP-STYLE: none”: 不显示上边框
  “BORDER-bottom-STYLE: none”: 不显示上边框,加上这条,什么边框也没有了

    让我们一起来看一个应用实例吧:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

    < html
  < head
  < title网上填空< /title
  < style type="text/css"
  < !--
  .xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none ;}
  --
  < /style< !--注:此段为css代码,在这里更改参数可以设置出更cool的效果--
  < /head
  < body bgcolor="#FFFFFF" text="#000000"
  隐藏你的边框
  < p用户名:
  < input type="text" name="name" class=xian < !--注:class=这条一定要加,设置你的css应用在表单里面--
  < /p
  < /body
  < /html

    实现的效果简洁清爽,怎么样,也改改你的表单吧!

 

来源:http://www.tulaoshi.com/n/20160129/1484203.html

延伸阅读
标签: Web开发
有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。 为什么使用预载 你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片...
标签: Web开发
如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法: HTML代码: div class="alpha1" div class="ap2" p背景为红色(#FF0000),透...
标签: PS PS教程
  文/宋文奇 大家都知道,在利用Photoshop处理图像时,为了各种输出的需要,有时要把某些图像格式转换成为其他格式。在一般情况下,我们都用“文件/另存为”将某图片用另外的格式再存一份的方法来转换。但是如果有成百上千张图片需要进行格式转换,也这样一张张进行处理吗?当然不用,利用Photoshop的动作以及批处理功能,就可...
标签: Web开发
有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。 为什么使用预载 你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片...
标签: Web开发
现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法! 用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。 布局class是骨架,风格class是衣服。 举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。...

经验教程

434

收藏

84
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部