1. 美化表格中的元素

使用background-color属性定义表单元素背景色；
例子1：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>注册页面</title><style type="text/css">input{color: #429DDD;}input .text{border: 1px inset #cad9ea;background-color: #D9EDF7;}input .bb{color: #00008B;background-color: #9f79ee;border: 1px outset #CAD9EA;padding: 1px 2px 1px 2px;}select{width: 80px;color: #00008B;background-color: #9F79EE;border: 1px inset #CAD9EA;}textarea{width: 200px;height: 40px;color: #00008B;background-color: #9F79EE;border: 1px inset #CAD9EA;}</style></head><body><table border="1" width="48%"><tr><td>称谓：</td><td><input type="text" name="" id="" value="" />1~12个字符<div id="cw"></div></td></tr><tr><td width="35%">密码：</td><td><input type="password" src="" />长度为8~10位</td></tr><tr><td>确认密码：</td><td><input type="password" /></td></tr><tr><td>姓名：</td><td><input type="text" name="name"/></td></tr><tr><td>性别:</td><td><select><option>男</option><option>女</option></select></td></tr><tr><td>E-mail：</td><td><input type="" name="" id="" value="" /></td></tr><tr><td>备注：</td><td><textarea rows="15" cols="40"></textarea></td></tr><tr><td><input type="button" value="提交" class="bb"/></td><td><input type="reset" value="重填" class="cc"/></td></tr></table></body>
</html>

2. 美化下拉菜单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>美化下拉菜单</title><style type="text/css">.green{background-color: #0785D1;color: #000;font-size: 15px;font-weight: bolder;font-family: 楷体;}.red{background-color: #e20a0a;color: #ffffff;font-size: 15px;font-weight: bolder;font-family: 楷体;}.yellow{background-color: #ffff6f;color: #000;font-size: 15px;font-weight: bolder;font-family: 楷体;}.orange{background-color: orange;color: #000;font-size: 15px;font-weight: bolder;font-family: 楷体;}</style></head><body><form action="" method="post"><p><label for="co">选择证件类型：</label><select name="co" id="co"><option value ="">请选择：</option><option value ="red" class="red">身份证</option><option value ="green" class="green">军官证</option><option value ="yellow" class="yellow">学生证</option><option value ="orange" class="orange">其他证件</option></select></p><p><input type="submit" value="提交" /></p></form></body>
</html>

CSS 3之美化表格样式相关推荐

前端知识-表格知识+美化表格样式项目
表格table 构成: caption表名+thead表头+tbody+tr行+td表格+tfoot表尾常用属性 colspan="2" rowspan="2" ...
php优秀表格样式,用html和css代码实现各种表格样式的总结
在我们日常开发工作中,基本上都会有表格的设置,我们都知道表格是展示数据的重要形式,也是网页中非常重要的元素之一,他可以使数据以表格的形式展现在网页中,今天我们就给大家总结一下表格样式! html实现表 ...
利用 CSS selector 改变悬停表格样式
在WEB应用中,为了方便用户查看表格,将鼠标悬停的表格行改变样式,如改变底色,会给用户很好的体验,特别是表格比较宽的时候,不会看串行. 原来为了实现这个功能,我的办法是用js捕获鼠标事件来完成: ...
CSS（4）表格样式
表格边框表格边框使用 border 属性为表格添加边框,border属性值可以按顺序设置的属性为:border-width.border-style和border-color. th, td {b ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
分享7款颜色的CSS表格样式美化网页表格用户体验
原文出处:http://www.laozuo.org/4631.html 老左并不是一名网页设计师,但是经常在博客上捣鼓.修改一些自认为不太好的用户体验也仅仅局限在修改一些简单的CSS样式上,遇到不能 ...
html表格美化模板,JavaScript + CSS 美化出的条纹表格样式
表格样式 body{ margin: 6px; padding: 0; font-size: 12px; font-family: tahoma, arial; background: #fff; } ...
美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
漂亮的表格样式(使用CSS样式表控制表格样式)
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择. 现在使用介绍使用CSS样式表来控制.美化表格的 ...
CSS实例(一)：漂亮的表格样式(使用CSS样式表控制表格样式)
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择. 现在使用介绍使用CSS样式表来控制.美化表格的 ...

CSS 3之美化表格样式

美化表格样式

1. 美化表格中的元素

2. 美化下拉菜单

CSS 3之美化表格样式相关推荐

最新文章

热门文章