CSS表单设计
Web前端开发案例教程(HTML5 CSS3)第2版 任务8 制作学生信息注册表单
8.2.3 表单控件
在表用单户中登通录常表包单含中一包 括个两或个多文个本表框单和控两件个。 命令按钮控件。
8.2.3 பைடு நூலகம்单控件
<input>控件
表单中最为核心的是<input>标记，使用<input>标记可以定义很多 控件，譬如，文本框、单选按钮、复选框、提交按钮、重置按钮等等。
格式：<input type="控件类型" />
8.2.2 表单标记
4. autocomplete属性
用于指定表单是否有自动完成功能。所谓“自动完成”，是指将表单 控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一 个下拉列表中，以实现自动完成输入。该属性的取值有on和off，当为on 时，表示有自动完成功能，否则没有。该属性是HTML5的新增属性。
8.2.1 认识表单
• 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集 信息。
• 浏览者在表单中输入信息，然后将这些信息提交给网站服务器， 服务器中的应用程序会对这些信息进行处理并响应，这样就完成 了浏览者和网站服务器之间的交互。
• HTML5新增了很多表单控件，完善了表单的功能，新特性提供 了更好的用户体验和输入控制。
8.2.3 表单控件
<input>控件
• <input />标记为单标记，type属性为其最基本的属性，其取值 有多种，用于指定不同的控件类型。
8.2.3 表单控件
<input>控件
需要注意的是，在HTML5提供了 不同输入类型的输入框，比如 email、url等在提交时，自动验 证输入的内容是否符合要求，不 符合要求时会有错误提示。
CSS列表样式自定义方法
CSS列表样式自定义方法CSS（层叠样式表）是一种用于定义网页布局和外观的语言。
使用CSS，我们可以更改列表的样式，以使其与网页的整体风格相匹配。
本文将介绍一些常用的CSS列表样式自定义方法。
一、使用内置列表样式CSS提供了一些内置的列表样式，包括无序列表（ul）和有序列表（ol）。
1. 无序列表样式：通过设置列表项（li）的样式（list-style-type）属性，我们可以更改无序列表的样式。
常见的样式选项包括：- none：不显示任何符号。
- disc：显示为实心圆点。
- circle：显示为空心圆点。
- square：显示为方块。
例如，可以使用以下CSS代码将无序列表的样式更改为方块：```ul {list-style-type: square;}```2. 有序列表样式：有序列表的样式可以通过设置列表项（li）的样式属性（list-style-type）进行更改。
常见的样式选项包括：- decimal：按数字顺序显示。
- lower-alpha：按小写字母顺序显示。
- upper-alpha：按大写字母顺序显示。
- lower-roman：按小写罗马数字显示。
- upper-roman：按大写罗马数字显示。
例如，可以使用以下CSS代码将有序列表的样式更改为小写字母：```ol {list-style-type: lower-alpha;}```二、使用自定义图像作为列表符号除了使用内置的列表样式外，我们还可以使用自定义图像作为列表项的符号。
这需要使用CSS的background-image属性。
1. 准备图像：首先，我们需要准备一个用作列表符号的图像，可以是PNG、JPEG或GIF格式。
确保图像的大小适合作为列表符号，并上传至服务器。
2. 设置背景图像：然后，使用CSS的background-image属性将图像设置为列表项的背景图像。
可以使用以下CSS代码来设置背景图像：```ul {list-style-image: url("path/to/image.png");}```请将"path/to/image.png"替换为实际图像文件的路径。
基于案例教学法的CSS+DIV网页表单圆角的制作
接、 最频繁的页面元素 ， 其在 网站 用 户 体 验 动 （ ｒ ｉ ｇ ｈ ｔ ） 。
中 占有 最 重要 的 位 置 。 而 表 单 也 常 常 用 于
ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ —ｉ ｍａ ｇ ｅ： ｕ ｒ ｌ （ ． ／ ｉ ｍａ ｇ ｅ ｓ ／ ｂ ｇ ＿ ０ ３ ． ｇ ｉ ｆ ） ｌ
案 例 教 学 法 以 注 重学 生 的 基 本 能 力 为
基础， 避免单纯理论知识的学习 ， 在 实践 过 性 可 以 确 定 元 素 在 网 页 中 的 位 置 ， 分 为 静 程 中， 可 以 鼓 励 学 生 进 行 单 独 的 思 考 和 创 态定 位 （ ｓ ｔ ａ ｔ ｉ ｃ ） 、 相对 定位 （ ｒ ｅ ｌ ａ ｔ ｉ ｖ ｅ ） 和绝对 定 造， 提 高 学 生 学 习 的 积 极性 。 位（ ａ ｂ ｓ ｏ ｌ ｕ ｔ ｅ ） 。 （ ４ ） 浮动 （ ｆ ｌ ｏ ａ ｔ ） 属性 ： 浮动 属 性 是ＣＳ Ｓ 布
＃ｂ ｇｌ ｛ ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ —ｃ ｏ ｌ ｏ ｒ ：＃Ｆ ＦＣＣ ６ ６ｌ ／ ・ 背景
精 美 的 网站 ， 本 文 旨 在 引导 学 生 分 析 网 页 点 评 ， 分 析 不 同学 生 在 案 例 中存 在 的 优 、 缺 颜 色｝ ／ 有 针 对 性 的 进行 深 入 的分 析 ， 对 出现 的 表 单 圆 角案 例 ， 运用Ｃ Ｓ Ｓ ＋ ＤＩ Ｖ知 识 点 完 成 点 ，
（ ｂ ｏ ｒ ｄ ｅ ｒ ） ￣ Ｉ Ｉ 边 距（ ｍａ ｒ ｇ ｉ ｎ ） 构成。 （ ３ ） 位置控 ￥ １ Ｊ （ ｐ ｏ ｓ ｉ ｔ ｉ ｏ ｎ ） 属性 ： 位 置控制 属 ｝ ＜Ｉ ＿ 一 表单 标 题 属 性 一 一 ＞
使用css制作表单
使用CSS制作表单（Form）表单是功能型网站中经常使用的元素，是网站交互中最重要的元素。
在网页中，小到搜索按钮，大到用户注册表单，以及用户控制面板，都需要使用到表单及其表单元素。
表单元素主要用来收集用户信息，帮助用户进行功能性控制，表单的交互设计与视觉设计都是网站设计中的重要部分。
本节将介绍如何使用CSS设计表单。
1.制作登录表单登录表单是各大网站都会用到的一个非常实用的模块，是用来进入其他相关页面的入口。
本节将使用form表单以及label标签制作一个样式精美的登录表单。
1.1 label标签语法结构<label for=”#” accesskey=”#”></label> Label标签具有提示表单含义的功能，是成堆出现的。
●for：表示label标签要绑定的XHTML元素，当点击这个标签的时候，所绑定的元素将获取焦点。
<label for=”InputBox”>姓名</label><input id=”InputBox” type=”text”>●accesskey：表示访问label标签所绑定的元素的热键，当按下热键，所绑定的元素将获取焦点。
（热键：Alt+N）<label fo r=”InputBox” accesskey=”N”>姓名</label><input id=”InputBox” type=”text”>1.2 制作登录表单实例使用表单元素和label标签设计一个登录表单。
分成两个div层级关系，外层为layout层，用来定义表单框架样式，内层为member层，用来放置表单等主体元素。
内层member又分成标题区域和表单区域，分别为title和form控制样式。
2.制作用户注册表单表单布局除了需要应用表单中的各个元素之外，还需要使用到table表格，表格是表单布局的得力助手。
对于最终的表单来说，表格对数据的排列方式非常适合于表单元素的排列。
css 实现表格合并单元格的实现方法
一、介绍CSSCSS，全称为层叠样式表（Cascading Style Sheets），是一种对网页进行样式和布局美化的技术。
通过CSS，网页设计者能够控制页面元素的外观、排版和布局，使得网页看起来更加美观、专业。
二、表格合并单元格的需求在网页设计中，表格是经常使用的一种元素，用于展示数据和信息。
有时候，我们需要将表格中的若干个单元格合并成一个大的单元格，以便更好地展示和组织信息。
当需要制作一个课程表或者日程安排表格时，通常会有需要将某些时间段内的课程或活动合并在一个单元格内。
三、实现方法在CSS中，要实现表格中单元格的合并，可以使用一些技巧和属性来实现。
1. 使用colspan和rowspan属性在HTML的表格标签中，可以使用colspan和rowspan属性来实现单元格的合并。
例如：```html<table border="1"><tr><td colspan="2">1</td><td>2</td></tr><tr><td>3</td><td>4</td><td>5</td></tr></table>```上面的例子中，使用colspan属性将第一行的前两个单元格合并成一个单元格。
2. 使用CSS的position属性和z-index属性在CSS中，还可以使用position属性和z-index属性来实现单元格的合并。
例如：```html<style>.cell1 {position: relative;z-index: 1;}.cell2 {position: relative;z-index: 2;}</style><table border="1"><tr><td class="cell1">1</td> <td class="cell2">2</td> </tr><tr><td>3</td><td>4</td></tr></table>```上面的例子中，使用position属性和z-index属性来控制单元格的层级关系，从而实现单元格的合并。
网页设计之表单的美化
网页设计之表单的美化网页设计之表单的美化很多时候，我们仅仅为了实现数据采集这个功能来使用表单，常看到的表单都是“千人一面”、毫无生气，本专题尝试着来改变这一现象，试图赋予表单一个丰富多彩的面貌。
表单的外观，也是最为直接的花样，可以通过改变它来实现特效，本文分两个出发点来讲述：CSS魔法和图像魔法。
1、CSS魔法CSS，就是大家知道的层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等，下面就从这几个方面出发，讨论怎样将CSS应用到表单中，彻底美化它！1.1 字体样式的应用字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)，具体的定义方法，在这里不详细讲述，可以参考它的资料。
也许你已经注意到，按钮上的文字不漂亮，其实可以通过CSS字体样式来解决，同样地，其它的几个涉及到文字的表单项，例如，文本框、多行文本框、口令框、下拉选择框都可以应用字体样式。
为了充分展示这些应用，下例特别设计了几种样式，在实际应用中，不必这么凌乱，灵活运用：样例12：表单元素的字体样式展示 underline css style分析：文本框里的文字是加粗的，大小是9pt，字体是宋体，代码：＜input type=text name=formExam size=10 maxlength=10 style=font-family:宋体; font-size: 12px; font-weight: bold value=加粗＞口令框文字是红色的，代码：＜input type=password name=formExam3 style=font-size: 9pt; color: #FF0000 size=8 maxlength=8＞下拉框文字颜色是红色的，字体是Verdana，大小是9pt，代码：＜select name=select size=1 style=font-family:Verdana,Arial; font-size: 9pt; color: #FF0000＞＜option value=2 selected＞＜/option＞＜option value=1＞＜/option＞＜/select＞多行文本框了的字体是Verdana，有下划线，大小是9pt，代码：＜TEXTAREA name=formExam2 cols=30 rows=3 style=font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline align=right＞underline css style＜/TEXTAREA＞发送1和发送2按钮的文字不同，是因为发送1按钮使用了9pt 的宋体文字，所以比较美观，发送1按钮的代码：＜input type=submit name=Submit value=发送1 style=font-family:宋体; font-size: 9pt;＞小结：只要我们对字体的样式熟悉了，就可以灵活多变，不一定要在标签里面使用style来定义，完全可以在＜head＞里定义，或者外部引用CSS文件，用到的时候引用一下就能达到预期的效果。
6款漂亮HTMLCSS样式用户留言表单
6款漂亮HTMLCSS样式⽤户留⾔表单如今我们的⽹站、页⾯更加需要注重细节，不论是字体的样式、还是图⽚的分辨率清晰度都会影响到⽤户的访问体验和PV，以及⽤户以后是否会回访我们的⽹站/博客。
如果有时间的时候，⽼左也会浏览和阅读相关的前端⽹站和积累⼀些不错的前端资源，在""中展⽰了⼏款不错的价格列表，在这篇⽂章中整理6个⽤户留⾔HTML CSS样式。
标记⾸先我们要在⽹页中加上常⽤的⼏个标签⽂本，⽐如姓名，电⼦邮件，内容以及提交按钮，然后我们针对这些字段⽂本增加和修改样式就可以。
<form action="" method="post" class="STYLE-NAME"><h1>Contact Form<span>Please fill all the texts in the fields.</span></h1><label><span>Your Name :</span><input id="name" type="text" name="name" placeholder="Your Full Name"/></label><label><span>Your Email :</span><input id="email" type="email" name="email" placeholder="Valid Email Address"/></label><label><span>Message :</span><textarea id="message" name="message" placeholder="Your Message to Us"></textarea></label><label><span>Subject :</span><select name="selection"><option value="Job Inquiry">Job Inquiry</option><option value="General Question">General Question</option></select></label><label><span> </span><input type="button" class="button" value="Send"/></label></form>第⼀、基本灰⾊样式：/* Basic Grey */.basic-grey {margin-left:auto;margin-right:auto;max-width: 500px;background: #F7F7F7;padding: 25px 15px 25px 10px;font: 12px Georgia, "Times New Roman", Times, serif;color: #888;text-shadow: 1px 1px 1px #FFF;border:1px solid #E4E4E4;}.basic-grey h1 {font-size: 25px;padding: 0px 0px 10px 40px;display: block;border-bottom:1px solid #E4E4E4;margin: -10px -15px 30px -10px;;color: #888;}.basic-grey h1>span {display: block;font-size: 11px;}.basic-grey label {display: block;margin: 0px;}.basic-grey label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;color: #888;}.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { border: 1px solid #DADADA;color: #888;height: 30px;margin-bottom: 16px;margin-right: 6px;margin-top: 2px;outline: 0 none;padding: 3px 3px 3px 5px;width: 70%;font-size: 12px;line-height:15px;box-shadow: inset 0px 1px 4px #ECECEC;-moz-box-shadow: inset 0px 1px 4px #ECECEC;-webkit-box-shadow: inset 0px 1px 4px #ECECEC;}.basic-grey textarea{padding: 5px 3px 3px 5px;}.basic-grey select {background: #FFF url('down-arrow.png') no-repeat right;background: #FFF url('down-arrow.png') no-repeat right);appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;height: 35px;line-height: 25px;}.basic-grey textarea{height:100px;}.basic-grey .button {background: #E27575;border: none;padding: 10px 25px 10px 25px;color: #FFF;box-shadow: 1px 1px 5px #B6B6B6;border-radius: 3px;text-shadow: 1px 1px 1px #9E3F3F;cursor: pointer;}.basic-grey .button:hover {background: #CF7A7A}第⼆、优雅的Aero样式样式：.elegant-aero {margin-left:auto;margin-right:auto;max-width: 500px;background: #D2E9FF;padding: 20px 20px 20px 20px;font: 12px Arial, Helvetica, sans-serif;color: #666;}.elegant-aero h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 10px 10px 10px 20px;display: block;background: #C0E1FF;border-bottom: 1px solid #B8DDFF;margin: -20px -20px 15px;}.elegant-aero h1>span {display: block;font-size: 11px;}.elegant-aero label>span {float: left;margin-top: 10px;color: #5E5E5E;}.elegant-aero label {display: block;margin: 0px 0px 5px;}.elegant-aero label>span {float: left;width: 20%;text-align: right;padding-right: 15px;margin-top: 10px;font-weight: bold;}.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select { color: #888;width: 70%;padding: 0px 0px 0px 5px;border: 1px solid #C5E2FF;background: #FBFBFB;outline: 0;-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;box-shadow: inset 0px 1px 6px #ECF3F5;font: 200 12px/25px Arial, Helvetica, sans-serif;height: 30px;line-height:15px;margin: 2px 6px 16px 0px;}.elegant-aero textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.elegant-aero select {background: #fbfbfb url('down-arrow.png') no-repeat right; background: #fbfbfb url('down-arrow.png') no-repeat right; appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;}.elegant-aero .button{padding: 10px 30px 10px 30px;background: #66C1E4;border: none;color: #FFF;box-shadow: 1px 1px 1px #4C6E91;-webkit-box-shadow: 1px 1px 1px #4C6E91;-moz-box-shadow: 1px 1px 1px #4C6E91;text-shadow: 1px 1px 1px #5079A3;}.elegant-aero .button:hover{background: #3EB1DD;}第三、简单绿⾊样式：.smart-green {margin-left:auto;margin-right:auto;max-width: 500px;background: #F8F8F8;padding: 30px 30px 20px 30px;font: 12px Arial, Helvetica, sans-serif;color: #666;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.smart-green h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 20px 0px 20px 40px;display: block;margin: -30px -30px 10px -30px;color: #FFF;background: #9DC45F;text-shadow: 1px 1px 1px #949494;border-radius: 5px 5px 0px 0px;-webkit-border-radius: 5px 5px 0px 0px;-moz-border-radius: 5px 5px 0px 0px;border-bottom:1px solid #89AF4C;}.smart-green h1>span {display: block;font-size: 11px;color: #FFF;}.smart-green label {display: block;margin: 0px 0px 5px;}.smart-green label>span {float: left;margin-top: 10px;color: #5E5E5E;}.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {color: #555;height: 30px;line-height:15px;width: 100%;padding: 0px 0px 0px 10px;margin-top: 2px;border: 1px solid #E5E5E5;background: #FBFBFB;outline: 0;-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);font: normal 14px/14px Arial, Helvetica, sans-serif;}.smart-green textarea{height:100px;padding-top: 10px;}.smart-green select {background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width:100%;height:30px;}.smart-green .button {background-color: #9DC45F;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-border-radius: 5px;border: none;padding: 10px 25px 10px 25px;color: #FFF;text-shadow: 1px 1px 1px #949494;}.smart-green .button:hover {background-color:#80A24A;}第四、⽩⾊样式样式：.white-pink {margin-left:auto;margin-right:auto;max-width: 500px;background: #FFF;padding: 30px 30px 20px 30px;box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;-webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;font: 12px Arial, Helvetica, sans-serif;color: #666;border-radius: 10px;-webkit-border-radius: 10px;}.white-pink h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 0px 0px 10px 40px;display: block;border-bottom: 1px solid #F5F5F5;margin: -10px -30px 10px -30px;color: #969696;}.white-pink h1>span {display: block;font-size: 11px;color: #C4C2C2;}.white-pink label {display: block;margin: 0px 0px 5px;}.white-pink label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;color: #969696;}.white-pink input[type="text"], .white-pink input[type="email"], .white-pink textarea,.white-pink select{ color: #555;width: 70%;padding: 3px 0px 3px 5px;margin-top: 2px;margin-right: 6px;margin-bottom: 16px;border: 1px solid #e5e5e5;background: #fbfbfb;height: 25px;line-height:15px;outline: 0;-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);}.white-pink textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.white-pink .button {-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;box-shadow:inset 0px 1px 0px 0px #fbafe3;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');background-color:#ff5bb0;border-radius:9px;-webkit-border-radius:9px;-moz-border-border-radius:9px;border:1px solid #ee1eb5;display:inline-block;color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;font-style:normal;height: 40px;line-height: 30px;width:100px;text-decoration:none;text-align:center;text-shadow:1px 1px 0px #c70067;}.white-pink .button:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');background-color:#ef027d;}.white-pink .button:active {position:relative;top:1px;}.white-pink select {background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;line-height: 15px;height: 30px;}第五、Bootstrap风格样式样式：.bootstrap-frm {margin-left:auto;margin-right:auto;max-width: 500px;background: #FFF;padding: 20px 30px 20px 30px;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #888;text-shadow: 1px 1px 1px #FFF;border:1px solid #DDD;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.bootstrap-frm h1 {font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;padding: 0px 0px 10px 40px;display: block;border-bottom: 1px solid #DADADA;margin: -10px -30px 30px -30px;color: #888;}.bootstrap-frm h1>span {display: block;font-size: 11px;}.bootstrap-frm label {display: block;margin: 0px 0px 5px;}.bootstrap-frm label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;color: #333;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: bold;}.bootstrap-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select{ border: 1px solid #CCC;color: #888;height: 20px;line-height:15px;margin-bottom: 16px;margin-right: 6px;margin-top: 2px;outline: 0 none;padding: 5px 0px 5px 5px;width: 70%;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}.bootstrap-frm select {background: #FFF url('down-arrow.png') no-repeat right;background: #FFF url('down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;height: 35px;line-height:15px;}.bootstrap-frm textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.bootstrap-frm .button {background: #FFF;border: 1px solid #CCC;padding: 10px 25px 10px 25px;color: #333;border-radius: 4px;}.bootstrap-frm .button:hover {background-color: #EBEBEB;border-color: #ADADAD;}第六、暗⿊⾊样式样式：.dark-matter {margin-left: auto;margin-right: auto;max-width: 500px;background: #555;padding: 20px 30px 20px 30px;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #D3D3D3;text-shadow: 1px 1px 1px #444;border: none;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.dark-matter h1 {padding: 0px 0px 10px 40px;display: block;border-bottom: 1px solid #444;margin: -10px -30px 30px -30px;}.dark-matter h1>span {display: block;font-size: 11px;}.dark-matter label {display: block;margin: 0px 0px 5px;}.dark-matter label>span {float: left;width: 20%;text-align: right;padding-right: 10px;margin-top: 10px;font-weight: bold;}.dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select { border: none;color: #525252;height: 25px;line-height:15px;margin-bottom: 16px;margin-right: 6px;margin-top: 2px;outline: 0 none;padding: 5px 0px 5px 5px;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);background: #DFDFDF;}.dark-matter select {background: #DFDFDF url('down-arrow.png') no-repeat right;background: #DFDFDF url('down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;height: 35px;color: #525252;line-height: 25px;}.dark-matter textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;}.dark-matter .button {background: #FFCC02;border: none;padding: 10px 25px 10px 25px;color: #585858;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;text-shadow: 1px 1px 1px #FFE477;font-weight: bold;box-shadow: 1px 1px 1px #3D3D3D;-webkit-box-shadow:1px 1px 1px #3D3D3D;-moz-box-shadow:1px 1px 1px #3D3D3D;}.dark-matter .button:hover {color: #333;background-color: #EBEBEB;}总结，⼩⼩的CSS样式能够让⽤户更加欣赏和留住，⽹站模板不⼀定要经常改变，但是可以在原有的基础上慢慢修改和提升⽤户体验，那就从CSS做起。
用CSS完成斑马条纹表单
⽤CSS完成斑马条纹表单今天学习了<table> <th> <tr> <td> 标签的⽤法，下⾯⽤ＨＴＭＬ和ＣＳＳ来画⼀个简单的斑马条纹表单，让表单更好看⽰例代码：ｚｅｂｒａ．ｈｔｍｌ<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML CSS Exercise CSS3 Zebra Striping a Table</title><style type="text/css">table{border:1px solid silver;}th{background-color:#ccc;}tbody tr:nth-child(even){background-color:#abe;}</style></head><body><table><tr><th> Id </th><th> Name </th><th> Major </th></tr><tr><td> 1001 </td><td> Gopl Murthy </td><td> Physics </td></tr><tr><td> 1002 </td><td> Joy Sen </td><td> Economics </td></tr><tr><td> 1003 </td><td> Chandu Yadav </td><td> Chemistry </td></tr><tr><td> 1004 </td><td> Shalini </td><td> Zoology </td></tr><tr><td> 1005 </td><td> Sameer Ali </td><td> Botany </td></tr></table></table></body></html>⽰例效果：我⽤了 tbody tr:nth-child(even) 来完成奇数⾏的颜⾊填充，如果想要填充偶数列，那么就将这⾥的（ｅｖｅｎ）改为（ｏｄｄ）：tbody tr:nth-child(odd){background-color:#abe;} 效果展⽰：那如果想要奇数列着⾊呢？只需要把ｔｒ改成 ｔｄ即可：tbody td:nth-child(odd){background-color:#abe;} 效果展⽰：哈哈，还有更多的⽅法让表格变得好看起来，可以多尝试。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS表单设计文章出处：今天我们开始学习《十天学会web标准(div+css)》的css表单设计，包含以下内容和知识点：改变文本框和文本域样式用图片美化按钮改变下拉列表样式用label标签提升用户体验一、改变文本框和文本域样式如果前边几章学习的比较扎实的话，本节教程就相当容易了。
下边先说一下文本框，文本框和文本域都是可以用css进行美化的。
比如改变边框精细，颜色，添加背景色、背景图像等。
请看下边的实例：.text1 { border:1px solid #f60; color:#03C;}.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}.text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;}.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}这四个样式表分别对应第2、3、4、5行表单，第一行是文本框的默认样式；第二行为设置边框和字体颜色的样式；第三行为设置边框、宽度、高度、字体大小、行高的样式；第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片，看起来是不是生动许多，具体步骤不再赘述。
下面我们看一下文本域的样式设置：.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}上图中第一个为默认的文本域样式，第二个为设置边框、宽度为百分比、高度和景图片。
overflow:auto定义当内容不超过现在文本域高度时不出现滚动条。
好了，下面运行一下代码看看两者的效果吧<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">.text1 { border:1px solid #f60; color:#03C;}.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}.text3 { border:2px solid #C3C; height:20px; background:#ffeeff url(images/2010-08/28/icon9.gif) right 3px no-repeat;}.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(images/2010-08/28/bg_9.gif) 0 0 no-repeat;}.area { border:1px solid #F90; overflow:auto; background:#fff url(images/2010-08/28/bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}</style></head><body><p><input type="text" name="textfield" id="textfield" />这是默认样式</p><p><input name="textfield2" type="text" class="text1" id="textfield2" value="我是蓝色的" />这是改变边框的样式和文字颜色</p><p><input name="textfield3" type="text" class="text2" id="textfield3" value="看我大吧" />这是改变边框并设置高宽和字体大小的样式</p><p><input class="text3" type="text" name="textfield4" id="textfield4" />这是增加背景图片实例，也可放左侧</p><p><input class="text4" type="text" name="textfield5" id="textfield5" />这是增加了一个背景图片为gif动画</p><p><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></p><p><textarea class="area" name="textarea2" id="textarea2" cols="45" rows="5"></textarea></p></body></html>标准之路 提示：可以先修改部分代码后再运行二、用图片美化按钮按钮也是网页中经常见的元素，但默认的样式有时候和页面整体效果不协调，需要把它美化一下，它的样式设置和文本框如出一辙，没有什么特别之处。
下面以三个实例来说明一下：.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}.btn09 { background:url(images/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}图中的按钮，前两个为固定宽度，但宽度可以根据需要随意调整；中间两个为自适应宽度，根据字数多少去适应；这四个样式都是采用一个背景图片横向循环实现，所以宽度不受限制，最后一个完全采用背景图片，这样宽度就得固定死了，要不会影响美观。
需要注意的是这种方式需要去掉按钮边框。
采用以上的按钮有一个好处是当css样式表没有加载上时，将会显示为默认按钮样式，这样用户可以清楚地知道这是个按钮，正常加载后，会使按钮更加美观。
它和我们第五天讲的css按钮有所不同，那里的按钮实际还是个链接，而这里的是按钮元素。
注：不同浏览器下显示效果略有不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">.btn02 { background:#fff url(images/2010-08/28/btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}.btn04 { background:url(images/2010-08/28/btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}.btn07 { background:url(images/2010-08/28/submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;} .btn08 { background:url(images/2010-08/28/submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}.btn09 { background:url(images/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}</style></head><body><p><input name="button" type="submit" class="btn02" id="button" value="提交" /></p><p><input name="button2" type="submit" class="btn04" id="button2" value="提交" /></p><p><input name="button" type="submit" class="btn07" id="button" value="提交" /></p><p><input name="button2" type="submit" class="btn08" id="button2" value="看看我的宽度有多宽" /></p><p><input name="button" type="submit" class="btn09" id="button" value="免费注册" /></p></body></html>标准之路 提示：可以先修改部分代码后再运行三、改变下拉列表样式下拉列表（菜单）是大家最头疼的一个元素，因其对许多样式不生效，故而在页面中显示很丑陋，而且在IE6下总在最上层，造成许多弹出层不能把其遮挡（可恶的IE6呀），使页面的用户检验大打折扣，所以一些设计师想出了许多办法来改变这种情况。