织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

CSS3 创建漂亮的表单(1) 概述

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
CSS3 创建漂亮的表单(1) 概述

今天开始的小系列主要集中看下CSS3在表单方面的应用,其实作者重点是要演示一下阴影和背景渐变的使用。

究竟搞什么飞机呢,我们首先来看下目标范例; 朦朦胧胧的蛮好看哦,不过我个人觉得用表单元素演示CSS3外部阴影的效果不是很合适,感觉输入框都凸出来了,好像摆着几块瓷砖一样。

 

主要用到的几个CSS3样式属性是box-shadow, gradients, opaque colors和rounded corners;目前浏览器方面比较给劲的有Chrome 4.0+,Firefox 3.6+,Safari 4.0+和刚刚发布的Opera 10.50;今天主要看下页面代码:

[html]
<form class="form">
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>

<p class="email">
<input type="text" name="email" id="email" />
<label for="email">E-mail</label>
</p>

<p class="web">
<input type="text" name="web" id="web" />
<label for="web">Website</label>
</p>

<p class="text">
<textarea name="text"></textarea>
</p>

<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
[/html]

作者使用<p>做容器;因人而异吧,没必要求同,只要保证每个表单元素的容器有各自的class名称就OK;
接下来的一篇中我们来看基础样式及阴影的设置。

(责任编辑:eric)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容