css3漂亮的表格

发布时间:2017-07-27 来源: 表格 点击:

篇一:HTML5+CSS3 新的表单元素

HTML5+CSS3 新的表单元素

在上述内容中,详细了解一下表单中所新增的<input>标签的类型,以及属性内容。此外,HTML 5中还新增了以下3个表单元素。

1.Datalist元素

datalist元素规定输入域的选项列表。列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域,在<input>标签中,通过list属性引用datalist的id。

示例:3-12 datalist.html

篇二:HTML5+CSS3 新增表单属性

HTML5+CSS3 新增表单属性

在HTML5中,除了兼容以前<form> </form>标签中的属性以外,还新增了以下两个属性。

1.autocomplete 属性

该属性规定表单是否应该启用自动完成功能。当用户在某些文本框输入过一些内容时,如果再次输入内容时,文本框会出现一个下拉框显示出以前输入过的内容。 这是浏览器默认的一个功能,利用autocomplete属性可以关闭该功能。

该属性 默认值为on,即规定启用自动完成功能。而当值为off时,则禁用自动完成功能。

示例:3-1 autocomplete.html

篇三:超酷HTML 5和CSS3实现登录及注册功能表单

超酷HTML 5和CSS3实现登录及注册功能表单

2012-04-10 10:31 gbin1 博客园 我要评论(0) 字号:T | T

我们将会谈到登录和注册功能使用纯CSS3和HTML 5来实现。这里我们使用CSS3的伪类:target。我们使用CSS3和图标字体。

AD:

在线演示 本地下载

过去我们开发登录和注册功能大都使用javascript来实现,今天我们介绍的这个登录及其注册表单不走常人路,使用纯CSS3和HTML5来实现同样的功能。

这里我们使用CSS3的伪类:target。我们使用CSS3和图标字体。主要的想法是展示登录表单并且提供一个链接可以转向注册表单。

请大家注意这里只是一个简单的演示,不是所有的浏览器都支持:target,如果你需要在产品环境中使用,你需要使用对应的代码来处理对于老浏览器支持的fallback。

HTML

在html代码中,我们构建俩个表单并且把第二个表单隐藏。如下:

1. <div id="container_demo" >

2. <!-- hidden anchor to stop jump

/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->

3.

4.

5.

6.

7.

8.

9.

10.

11. <a class="hiddenanchor" id="toregister"></a><a class="hiddenanchor" id="tologin"></a><div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"><h1>Log in</h1><p> <label for="username" class="uname" data-icon="u" ><input id="username" n(来自:WwW.xltkwJ.cOm 小龙 文档 网:css3漂亮的表格)ame="username" Your email or username </label>

required="required" type="text" placeholder="myusername or

mymail@mail.com"/>

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35. </p><p> <label for="password" class="youpasswd"<input id="password" name="password" </p><p class="keeplogin"> <input type="checkbox" name="loginkeeping"<label for="loginkeeping">Keep me logged in</label></p><p class="login button"> <input type="submit" value="Login" /></p><p class="change_link"> Not a member yet ? <a href="#toregister" class="to_register">Join us</a></p> </form> </div> <div id="register" class="animate form"> <form action="mysuperscript.php" autocomplete="on"><h1> Sign up </h1><p> <label for="usernamesignup" class="uname" data-icon="p"> Your password </label> required="required" type="password" placeholder="eg. X8df!90EO" /> id="loginkeeping" value="loginkeeping" />

data-icon="u">Your username</label>

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.<input id="usernamesignup" name="usernamesignup" </p><p> <label for="emailsignup" class="youmail"<input id="emailsignup" name="emailsignup" </p><p> <label for="passwordsignup" class="youpasswd"<input id="passwordsignup" name="passwordsignup" </p><p> <label for="passwordsignup_confirm"<input id="passwordsignup_confirm" name="passwordsignup_confirm" </p><p class="signin button"> <input type="submit" value="Sign up"/></p><p class="change_link"> Already a member ? <a href="#tologin" class="to_register"> Go and log in </p> </form> </div></div> </div>required="required" type="text" placeholder="mysuperusername690" /> data-icon="e" > Your email</label> required="required" type="email" placeholder="mysupermail@mail.com"/> data-icon="p">Your password </label> required="required" type="password" placeholder="eg. X8df!90EO"/> class="youpasswd" data-icon="p">Please confirm your password </label> required="required" type="password" placeholder="eg. X8df!90EO"/> </a>

我 们在这里添加了HTML5相关元素,并且使用了一些新的输入控件。input=password自动隐藏用户输入。input=email使得浏览器检查 是否用户输入是正确的email。同时我们添加了require=required属性。支持这个属性的浏览器将不允许用户递交表单除非所有的输入区域都 是正确,大家可能注意到这里不需要使用javascript。autocomplete=on属性将会基于用户输入预先的填入内容。我们同时也可以使用一 些不错的placeholder来提示用户应该输入的内容。

接下来可能是俩个比较有趣的部分。你或许注意到了顶端的俩个<a href>链接。这是一个能够帮助我们的表单更加方便的使用anchor处理的小技巧,这样当我们点击切换链接并且触发:target的时候将不会跨越很长的页面。

第二个小技巧是使用icon字体。我们将会使用一个data-attribute来展示图标。通过使用对应的字符来设定data-icon="icon_charactoer",我们只需要一个CSS属性选择器来样式化所有的图标。如果你对这个有兴趣,可以阅读:24 Ways: Displaying Icons with Fonts and Data- Attributes。

CSS

为了使得代码更加清晰,在教程里我们忽略了浏览器提供商指定的前缀, 当然你可以在对应代码中找到相关的设定。当然我们使用了很多不错的CSS3技巧可能不在所有的浏览器中生效。

俩个表单的样式

首先我们配置容器的样式:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17. #subscribe,#login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px;}#login{ z-index: 22;}

这里我们添加了一个漂亮的盒式阴影(box shadow)来创建2个阴影:一个inset用来创建内部蓝色,还有一个外部阴影。这里我们稍微解释一下z-index。

在下面代码中,我们定义了标题的样式,使用了background-clip。

1.

2.

3.

4.

5.

6.

7.

8.

9. /**** general text styling ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px;

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38. } /** For the moment only webkit supports the background-clip:text; */ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text;} #wrapper h1:after{ content:' '; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left,rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);}

大家注意目前只有webkit的浏览器支持background-clip,所以我们将只为webkit创建条纹式的背景,我们将这个特效添加到H1标题。 因为目前只能在webkit浏览器上生效,我们将使用webkit前缀。只使用-webkit-prefix是一个糟糕的习惯,这里只是为了演示,你不应 该在一个正式的网站中使用!-webkit-text-fill-color:trasparent帮助你生成一个透明的背景。当然其它浏览器都会忽略。

我们使用:after伪类来在标题下创建了一个淡出的直线效果。我们对直线两端使用2px的高度渐变并且淡出背景到0。

接下来我们使的输入更好漂亮。

1.

2.

3.

4.

5. /**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic;

相关热词搜索:表格 漂亮 css3 css3表格模板 css3 表格

版权所有 小龙文挡网 www.xltkwj.com