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制作表单（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表格，表格是表单布局的得力助手。

对于最终的表单来说，表格对数据的排列方式非常适合于表单元素的排列。

一、介绍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样式⽤户留⾔表单如今我们的⽹站、页⾯更加需要注重细节，不论是字体的样式、还是图⽚的分辨率清晰度都会影响到⽤户的访问体验和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>&nbsp;</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完成斑马条纹表单今天学习了<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;} 效果展⽰：哈哈，还有更多的⽅法让表格变得好看起来，可以多尝试。

使⽤css美化html表单控件详细⽰例（表单美化）⼀、html submit与bottom按钮基本语法结构1、html submit按钮在input标签⾥设置type="submit"即可设置此表单控件为按钮。

submit按钮代码：复制代码代码如下:<input name="" type="submit" value="提交" />submit按钮效果截图html submit按钮效果截图2、html bottom按钮在input标签⾥设置type="bottom"也是即可设置此表单控件为按钮。

bottom按钮代码：复制代码代码如下:<input name="" type="button" value="提交" />bottom按钮截图：html botton按钮效果截图⼆、html submit与bottom按钮区别type=button 就单纯是按钮功能type=submit 是发送表单但是对于从事WEB UI的⼈应该要注意到，使⽤submit来提⾼页⾯易⽤性：使⽤submit后，页⾯⽀持键盘enter键操作，⽽很多WEB软件设计师，可能没有注意到submit统⼀.⽤button后往往页⾯不⽀持enter键了。

所以需要⽀持enter键，必须要设置个submit，默认enter键对页⾯第⼀个submit进⾏操作。

复制代码代码如下:<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">执⾏完onClick，转到action。

可以⾃动提交不需要onClick。

⽤CSS_DIV画表格（table）进⾏⽹页排版【转】以往传统⽹页设计都喜欢使⽤table(表格)來建构⽹页，這樣的建构⽅式对于⽹页整体排版來讲并沒有太⼤的问题，可以完美相容于各个浏览器。

但是時代在进步，还在⽤table排⽹页感觉就有点过时了。

会这样说并不是想引起table和div之战，⽽是想要说对于⽹页的维护，table表格是⽐较⿇烦⼀点的，再加上程式码不太⼲净、过多的巢状，对于搜索引擎来讲，也⽐较难发现其中重要的部分。

那如果⽤CSS+DIV进⾏⽹页排版，就会⽐较好吗？基本上是可以这样讲，但是⼤家⼜会遇到⽹页校正的问题，⼀⼝⽓要调整四、五种版本的浏览器，这样很可能让⽹页设计者⼜跑回去⽤table表格排版。

但其实在CSS中，已经有语法是⽀援表格的了，并不是对表格进⾏样简单的样式定义，⽽是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。

本來想说使⽤table來产⽣清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的⽹页不好解析其內容，所以还是使⽤DIV排版，并默默的校正⼀堆浏览器。

但是这回因为⽹页化，因此所有的CSS与DIV⼏乎是重构的状态，所以在本來的分类⽂章清单中，样式也順便进⾏重构，可是问题來了？「重构=花时间」，因为要⽤CSS+DIV模拟成table的样式，如果⼀直使⽤float來排版，校正上其实很⿇烦，当然在浏览器的校正上，更是头⼤。

后來找了⼀下发现有不错的好东西，在diplay的属性上，有table相关的属性值可以使⽤！传统的table排版的问题⼀般來讲，table打好语法就可以呈现效果了，⽽且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显⽰。

如果觉得排版不漂亮，就直接在语法內加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。

对于搜寻引擎來讲，他们抓⽹站內容通常不会⼀次抓完，会先抓到⼀定的⽹页⼤⼩，之后再來，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还沒抓到重点就已经达到抓取額度了，重要的资料沒被收录，倒是收录了⼀些不重要的样式设定。

基于案例教学法的CSS+DIV网页表单圆角的制作摘要：css+div是目前网页设计中所使用的核心技术，如何引导学生更好的掌握这门技术，本文提出案例教学法，学生通过设计网页表单圆角这个案例，进而掌握css+div的各项知识点，避免以往先学习代码，而不知其用的痛苦，让学生体会在乐中学习。

关键词：案例教学法 css+div 样式选择器中图分类号：g712 文献标识码：a 文章编号：1673-9795（2013）04（b）-0168-01随着现代网页设计技术的发展，css+ div成为网页设计中的核心技术，如何制作精美的网站，本文旨在引导学生分析网页表单圆角案例，运用css+div知识点完成设计。

1 案例教学法案例教学法由美国哈佛商学院提出，是一种以案例为基础的教学法，通过学生间的相互讨论或研究，提高学生的学习兴趣，从而培养学生主动学习的能力。

本文用css+div制作表单圆角案例，形成学生思考和分析问题的能力，从而提高学生制作网页的技能。

案例教学法以注重学生的基本能力为基础，避免单纯理论知识的学习，在实践过程中，可以鼓励学生进行单独的思考和创造，提高学生学习的积极性。

2 表单表单（form）作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置。

而表单也常常用于用户注册、登录、投票等功能，用于吸引新用户，留住新用户的重要工具。

设计一个表单很简单，但设计一个用户体验高，漂亮的表单却并不易。

如果表单设计用户体验不高，无疑将会对网站用户粘性大大降低。

3 设计过程3.1 展示案例，启发思考把此案例效果图展示给学生，吸引学生的注意力，激发学生探究学习案例的热情，让学生带着例子去探讨课本上的理论知识，为学生学习理论知识打下坚实的基础。

3.2 探究讨论案例，解决问题根据表单圆角的案例，让学生展开分析和讨论在案例中所用到的理论知识，分析表单的布局结构、分析实现的代码，学生试着写出css代码，并预览调整，测试优化页面。

一体化课程教案编号：QD-0707-05版本号：D/0 流水号：编制：教研室批准:成振洋2011/2012 学年度第二学期计算机系（部）任课教师颜虹一体化课程网络编程基础学习任务CSS表格表单样式设计授课时数 6 授课日期2012.5.17 周次13 审批年月日教学班级10计网1学习目标学习重点及其化解方法根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。

本次课程的学习内容应该是学生比较感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。

这样学生既理解了书上的表格表单CSS样式设计的用法，真正具备进行网页设计的能力。

学习重点：分析并制作出网页表格、表单的样式表。

学习难点及其化解方法学习难点：指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。

教学准备➢教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件➢教学准备：示例网页、素材图片、任务书教学内容（课时 6 ）：学习任务书教学任务一绘制交换颜色变化的表格【任务内容】讲解表格CSS样式表设置的方式方法【任务目的】使学生掌握表格样式，学会熟练设置表格边框、背景色、单元格间距等属性。

【学习重点】CSS样式表的灵活运用【学习难点】理解表格的各个属性、间距设置的意义【教学方式】案例分析式、任务教学【教学内容】一、制作4X5的表格，并输入相应的文字内容提示：没有特殊合并格式的表格，可以使用<table>、<tr>、<td>标签完成。

或直接用dw生成。

二、设置表格CSS样式1、设置table的样式为border-collapse:collapse;2、设置tbody、td的样式为color:#333;padding:8px;border-right-width: 1px;border-bottom-width: 1px;border-right-style: solid;border-bottom-style: solid;border-right-color: #F60;border-bottom-color: #F60;border-top-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #F60;border-left-color: #F60;border-left-width: 1px;3、设置两种颜色的表格单元格样式类分别为in\on，颜色可自行设计。

前端开发实训案例利用HTML和CSS实现表单验证功能前端开发实训案例：利用HTML和CSS实现表单验证功能在前端开发中，表单验证是一个非常重要的功能。

通过对用户输入数据的合法性进行验证，可以提高用户体验和数据的完整性。

本文将介绍利用HTML和CSS实现表单验证功能的实训案例，并给出详细的步骤和代码示例。

一、HTML表单的结构搭建在开始实现表单验证功能之前，首先需要搭建HTML表单的结构。

以下是一个简单的表单结构示例：```<!DOCTYPE html><html><head><title>表单验证</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><form id="myForm" action="submit.php" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" required><span id="nameError" class="error"></span><label for="email">邮箱：</label><input type="email" id="email" name="email" required><span id="emailError" class="error"></span><label for="password">密码：</label><input type="password" id="password" name="password" required> <span id="passwordError" class="error"></span><input type="submit" value="提交"></form></body></html>```以上代码定义了一个包含姓名、邮箱和密码三个输入字段的表单。

标题：深入探讨CSS中表单整体右移的语句在网页设计与开发中，表单元素是不可或缺的一部分，它为用户提供了输入信息与与之交互的途径。

而在表单的样式设计中，整体右移是一个常见的需求，因为它可以让页面更加美观、布局更加合理。

在CSS中，我们可以通过一些语句来实现表单整体右移的效果，本文将深入探讨这一技术，并共享一些个人观点和理解。

一、整体右移的需求在实际的网页设计中，我们经常会遇到需要将表单整体右移的情况。

当页面的设计布局需要在左侧留出空白区域，或者希望整体布局更加对齐美观时，我们就需要对表单进行整体右移的处理。

这时，我们就需要在CSS中使用相应的语句来实现这一效果。

二、CSS中的表单整体右移语句要实现表单整体右移，我们可以使用CSS中的margin属性来进行调整。

通过设置表单元素的margin值，我们可以让表单整体向右移动，从而达到我们想要的效果。

可以通过设置margin-left属性来让表单整体右移，实现页面布局的需要。

下面是一个简单的示例代码：```cssform {margin-left: 20px;}```通过上面的代码，我们可以使页面中的表单整体右移20像素，从而达到我们想要的整体布局效果。

这是一个简单而有效的方法，能够很好地满足我们的需求。

三、深入理解表单整体右移的技术细节虽然通过简单的margin属性就可以实现表单整体右移的效果，但是在实际应用中我们还需要考虑一些细节问题。

当页面响应式设计时，我们可能需要针对不同的屏幕尺寸来调整表单的右移效果；又或者在使用框架或者组件库时，需要考虑它们对表单样式的影响等等。

在实际使用中，我们还可以结合其他CSS属性来进一步优化表单的布局效果。

可以使用flex布局或者grid布局来对表单进行排版，从而让整体布局更加灵活和美观。

我们还可以通过设置表单元素的宽度、浮动等属性来进一步调整表单的布局效果，使其更符合我们的设计需求。

四、总结与回顾在本文中，我们深入探讨了CSS中表单整体右移的语句和技术细节。