界面组建

导航菜单

菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认列表项（li）是块级元素，因此它们会上下堆叠。

纵向菜单

标签：

<nav class="list1">
 <ul>
 <li><a href="#">Alternative</a></li>
 <li><a href="#">Country</a></li>
 <li><a href="#">Jazz</a></li>
 <li><a href="#">Rock</a></li>
 </ul>
</nav>

样式：

/*去掉默认的内边距和外边距*/
* {
  margin: 0;
  padding: 0;
}

/*设定菜单的大小和位置*/
nav {
  margin: 50px;
  width: 150px;
}

/*给菜单加上边框*/
.list1 ul {
  border: 1px solid #f00;
  border-radius: 3px;
  padding: 5px 10px 3px;
}

/*去掉项目符号并为链接添加间距*/
.list1 li {
  list-style-type: none;
  padding: 3px 10px;
}

/*“非首位子元素”选择符 （任何跟在li之后的li） */
.list1 li+li {
  border-top: 1px solid #f00;
}

/*为链接添加样式*/
.list1 a {
  text-decoration: none;
  font: 20px Exo, helvetica, arial, sans-serif;
  font-weight: 400;
  color: #000;
  background: #ffed53;
}

/*悬停高亮*/
.list1 a:hover {
  color: #069;
}

“非首位子元素”选择符 ：如：li+li ，对于连续的元素，这样，就可以给除第一个元素之外的所有元素设定相同的样式。

同样效果的其他方法 ：

/*给所有 li 上方添加一条边框*/
li {
  border-top:1px solid #f00;
}

/*去掉第一个 li 上方的边框*/
li:first-child {
  border-top:none;
}

让列表行可以点击

目前只有文本是可以点的，因为链接（a）是行内元素，它会收缩并包住其中的文本。然而，更好的用户体验是让列表项所在的整行都能点击。(很多站点都没有这么做)

将 li标签 的内边距调整到 a标签里，并且 a标签 的显示方式调整为 block.
将 li标签 的上边框调整到 a标签 中

/* 去掉li元素的上边框 */
.list1 li {list-style-type:none;}
/* 调整到a标签的上边框 */
.list1 li + li a {border-top:1px solid #f00;}
/* 调整内边距，显示方式调为 块 显示（让链接完全填满整个列表项） */
.list1 a {display:block; padding:3px 10px;
          text-decoration: none; font:20px Exo, helvetica, arial, sansserif;
          font-weight:400; color:#000; background:#ffed53;}

横向菜单

默认情况下，列表项是垂直堆叠在一起的。不过，要把它们变成水平排列的横向菜单。方法是浮动列表项。

<nav class="list1">
 <ul>
 <li><a href="#">Shirts</a></li>
 <li><a href="#">Pants</a></li>
 <li><a href="#">Dresses</a></li>
 <li><a href="#">Shoes</a></li>
 <li><a href="#">Accessories</a></li>
 </ul>
</nav>

.list1 ul {
  /*强制 ul 包围浮动的 li 元素*/
  overflow: hidden;
}

.list1 li {
  /*让 li 元素水平排列*/
  float: left;
  /*去掉项目符号*/
  list-style-type: none;
}

.list1 a {
  /*让链接填满 li 元素*/
  display: block;
  padding: 0 16px;
  /*去掉链接的下划线*/
  text-decoration: none;
  color: #999;
}

.list1 li+li a {
  border-left: 1px solid #aaa;
}

.list1 a:hover {
  color: #555;
}

这个水平菜单很常见,很多时尚的零售网店都有它们的身影。

浮动让 li 元素从垂直变成水平，display:block 让链接从收缩变成扩张，从而整个 li 元素都变成了可以点击的。
另外，选择符 li + li a 为除第一个链接之外的每个链接左侧都加了一条竖线，作为视觉分隔线。

下拉菜单

下拉菜单是以一组嵌套列表为基础，综合运用刚刚学到的纵向和横向菜单的CSS 技术创建的。

<nav class="multi_drop_menu">
 <!-- 一级开始 -->
 <ul>
  <li><a href="#">Power</a></li>
  <li><a href="#">Money</a></li>
  <li><a href="#">Love</a></li>
  <li><a href="#">Fame</a>
   <!-- 二级开始 -->
   <ul>
    <li><a href="#">Sports Star</a></li>
    <li><a href="#">Movie Star</a></li>
    <li><a href="#">Rock Star</a>
     <!-- 三级开始 -->
     <ul>
      <li><a href="#">Bruce Springsteen</a></li>
      <li><a href="#">Bono</a></li>
      <li><a href="#">Mick Jagger</a></li>
      <li><a href="#">Bob Dylan</a></li>
     </ul>
     <!-- 三级结束 -->
    </li>
    <li><a href="#">Web Designer</a></li>
   </ul>
   <!-- 二级结束 -->
  </li>
 </ul>
 <!-- 一级结束 -->
</nav>

为方便设定菜单样式，为列表容器 nav 添加了 multi_drop_menu 类。这个菜单的每一条CSS规则都以 .multi_drop_menu 开头，以确保它们只会应用给带有这个类的容器。

顶级菜单样式

/*添加视觉样式 开始*/
.multi_drop_menu {
  font: 1em helvetica, arial, sans-serif;
}

.multi_drop_menu a {
  /*让链接充满列表项*/
  display: block;
  /*文本颜色*/
  color: #555;
  /*背景颜色*/
  background-color: #eee;
  /*链接的内边距*/
  padding: .2em 1em;
  /*分隔线宽度*/
  border-width: 3px;
  /*可以有颜色，也可以透明*/
  border-color: transparent;
}

.multi_drop_menu li:hover > a {
  /*悬停时文本颜色*/
  color: #fff;
  /*悬停时背景色*/
  background-color: #aaa;
}

.multi_drop_menu li a:active {
  /*点击时背景变色*/
  background: #fff;
  /*点击时文本变色*/
  color: #ccc;
  /*背景只出现在内边距区域后面*/
  background-clip: padding-box;
}
/*添加视觉样式 结束*/

/*添加功能样式 开始 */
/* 布局，行为，*/
.multi_drop_menu * {
  margin: 0;
  padding: 0;
}

/*强制 ul 包围 li*/
.multi_drop_menu ul {
  float: left;
}

.multi_drop_menu li {
  /*水平排列菜单项*/
  float: left;
  /*去掉默认的项目符号*/
  list-style-type: none;
  /*为子菜单提供定位上下文*/
  position: relative;
}

.multi_drop_menu li a {
  /*让链接填充列表项*/
  display: block;
  /*给每个链接添加一个右边框*/
  border-right-style: solid;
  /*背景只出现在内边距区域后面*/
  background-clip: padding-box;
  /*去掉链接的下划线*/
  text-decoration: none;
}

.multi_drop_menu li:last-child a {
  border-right-style: none;
}

/*临时隐藏低级菜单*/
.multi_drop_menu li ul {
  display: none;
}
/*添加功能样式 结束 */

对于CSS的样式，首先要注意把菜单的视觉样式与功能样式分开来写。

视觉样式 : 控制字体大小、边框和文本的颜色.
功能样式 : 控制菜单的布局和行为。

两者的区别主要通过代码注释。对于像下拉菜单这么复杂的组件，分开来写视觉和功能代码是非常值得提倡的。

这样，将来如果有人要修改菜单外观，只要修改它的视觉样式就好了，而功能样式可以原封不动。

注： 如果在代码中像这样把视觉样式与功能样式分开来写，一定要用注释说明为什么。

目前最明显的变化是 li 通过浮动由垂直堆叠变成了水平排列。

至于为了让 ul包围列表项，没有使用 overflow:hidden，而是使用了 float:left，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示。【最终会显示在父元素 ul 的外面，结果会因为“溢出”（overflow）而被隐藏（hidden）】。

为了保证用户体验，所有视觉样式——内边距、背景、边框，等等，都要应用给链接 a，而不要应用给 ul 或 li，以便热区（可点击区域）最大化，让用户鼠标经过时不会产生前面例子中看到的状态切换。为达到这个目的，同时还要从视觉上分隔链接，使用 background-clip:padding-box 声明，这样可以阻止链接的背景（像常规状态下一样）延伸到边框后面。然后，让边框透明（也可显示为其他实色），在链接之间产生间隙，让后面的页面能够透过边框被看到。如此一来，不用外边距也能分隔链接，而且鼠标从一个菜单项移动到另一个菜单项时，也不会出现光标切换。菜单项之间从视觉上是分开，但实际上却是紧挨在一块的。

background-clip 和透明边框的更多用法： css-tricks

注意：

给 li 元素应用了 position:relative，这是给添加子菜单做的准备，在当前没有什么效果。
最后一行 CSS 隐藏了子菜单，以防显示它们影响我们创建顶级菜单。在后面会有怎么在菜单项处于悬停状态时显示它们。
为顶级菜单添加的样式都会被次级菜单继承。【需要应用给子菜单的样式大部分都已经写完啦！】

菜单的下拉部分：

虽然子菜单继承顶级菜单的样式为我们提供了方便，但其实有些样式在子菜单中并不是必要的。如：

下拉菜单（列表的第二级）是垂直堆叠的，所以不希望其中的列表项继承浮动而变成水平排列。
顶级菜单使用右边框作为分隔线，而下拉菜单需要使用上边框来分隔垂直堆叠的菜单项。
下拉菜单还会用到绝对定位下拉菜单，以便它能精确地对齐父元素（包含子菜单的 li），而这个父元素已经在上一步被设定成相对定位了。
为了看到设定的效果，还要显示二级下拉菜单，并继续隐藏三级下拉菜单（下一步再考虑它）。

以下是实现上述改变需要添加的 CSS：

/* 添加的视觉样式 */
/*二级菜单宽度*/
.multi_drop_menu li ul {
  width: 9em;
}

.multi_drop_menu li li a {
  /*去掉继承的右边框*/
  border-right-style: none;
  /*添加上边框*/
  border-top-style: solid;
}

.multi_drop_menu li li li a {
  /* 三级菜单的a标签左边框分割 */
  border-left-style: solid;
}

/* 添加的功能样式 */
.multi_drop_menu li ul {
  /*临时显示二级下拉菜单*/
  display: block;
  /*相对于父菜单项定位 使用到了定位上下文,父节点的定位为relative */
  position: absolute;
  /*左边与父菜单项对齐*/
  left: 0;
  /*顶边与父菜单项底边对齐*/
  top: 100%;
}

.multi_drop_menu li li {
  /*停止浮动，恢复堆叠*/
  float: none;
}

.multi_drop_menu li li ul {
  /*继续隐藏三级下拉菜单*/
  display: none;
}

二级下拉菜单显示在其父菜单项下方

这一步成功的关键是下拉菜单的绝对/相对定位。通过将其顶边位置（top）设定为100%（相对于其相对定位的父元素 li），其顶边会与父元素底边恰好对齐。它与父元素之间的间隙，实际上是下拉菜单中第一个链接的边框.

让下拉菜单响应鼠标事件

让下拉菜单拥有自己的功能【一开始是隐藏的，只有在其父元素处于鼠标悬停状态时，才需要显示】

.multi_drop_menu li ul {
  /*隐藏二级下拉菜单*/
  display: none;
  /*相对于父菜单项定位*/
  position: absolute;
  /*左边与父菜单项对齐*/
  left: 0;
  /*顶边与父菜单项底边对齐*/
  top: 100%;
}

.multi_drop_menu li:hover > ul {
  /*父元素悬停时显示*/
  display: block;
}

让菜单起作用的关键在于先把它藏起来：

/*隐藏二级菜单*/
li ul {display:none;}

然后，再在父元素悬停时把它显示出来：

/*显示二级菜单*/
li:hover > ul {display:block;}
/* 当鼠标移动到列表项上时，就显示它的子列表。 */

注意，这里的 :hover 触发器 是设定在 li 元素 而非链接(a标签) 身上的。这样做是因为想要显示li 的子元素 ul，而它(a标签)不是想链接的子元素。

此外，为了只显示其子元素，悬停列表项与子列表之间还有一个 子选择符 >，如果没有这个子选择符，当顶级菜单项处于悬停状态时，会同时显示二级和三级菜单。

添加三级菜单

这时候三级菜单已经算是能用了。只不过位置不对。

由于前面包含:hover 的 CSS 规则会像应用给二级菜单一样，应用给三级菜单，所以在父元素处于鼠标之下时，三级菜单自然也会显示出来。

可是图中的三级菜单被其父元素挡住了。这时候三级菜单与其二级父元素的位置是二级菜单与顶级菜单的关系。所以，三级菜单跑到了鼠标下的二级菜单后面去了，而且其第一项顶边与悬停的父菜单项底边是对齐的。从图中可以看到，三级菜单第一项“Bruce Springsteen”的上半部分被二级菜单最后一项“Web Designer”给盖住了。

在这一步要做的，就是把三级菜单放到二级菜单右侧，让它的顶边与鼠标所在菜单项的底边对齐。

.multi_drop_menu li li ul {
  /*相对于父菜单定位*/
  position: absolute;
  /*与父菜单右侧对齐*/
  left: 100%;
  /*与父菜单项顶边对齐*/
  top: 0;
}

现在的菜单能用了，可以在顶级添加更多列表项，在标记中添加更多子列表，然后无须多写一行 CSS，它们就能构成新的下拉菜单。

此时，还应该再作两个调整。首先，为了真正让这些代码有用，而且可以重用，需要再写一些样式，让顶级菜单能够 垂直显示，以便能将其用在导航 侧边栏 里。为此，我得先给 nav 容器添加第二个类 vertical。

<!-- HTML 类名之间要有空格 -->
<nav class="multi_drop_menu vertical">

/* CSS 类名之间没有空格 */
/* .multi_drop_menu.vertical */

/*只在导航容器有 vertical 类的情况下才起作用*/

/*顶级垂直菜单宽度*/
.multi_drop_menu.vertical {
  width:8em;
}

.multi_drop_menu.vertical li a {
  border-right-style:none;
  border-top-style:solid;
}
.multi_drop_menu.vertical li li a {
  border-left-style:solid;
}

.multi_drop_menu.vertical ul,
.multi_drop_menu.vertical li {
 /*让顶级菜单垂直显示*/
 float:none;
}

.multi_drop_menu.vertical li ul {
 /*子菜单左边与上一级菜单右边对齐*/
 left:100%;
 /*子菜单顶边与上一级菜单项顶边对齐*/
 top:0;
}

为了让菜单恢复默认的堆叠状态，这里重置了顶级 li 元素及其父元素 ul 的浮动属性，后者原来浮动是为了包围浮动的 li 元素。

这里还为 nav 容器设定了宽度。如果不设定导航容器宽度，那么 nav 及其包含的顶级菜单项都会尽可能伸展。最后，把二级菜单与顶级菜单的位置关系，设定成了前面三级菜单和二级菜单之间的关系，即让子菜单顶边与父菜单项顶边对齐。当然去掉了顶级菜单项的右边框，代之以上边框.

突出显示选择路径

只有位于鼠标下方的元素才会突出显示。为了让用户明确地知道自己是怎么一路选择下来的，还需要让每一级菜单中被选择的元素突出显示。实际上只要把 .multi_drop_menu a:hover 替换成以下 CSS 即可。

.multi_drop_menu li:hover > a {
 /*悬停时的文本颜色*/
 color:#fff;
 /*悬停时的背景颜色*/
 background-color:#aaa
}

这个小小的替换能够起作用，是因为:hover 事件会沿着元素的结构层次 “向上冒泡”。所以，把 :hover 设定在 li 元素，就相当于也把它设定给了所有祖先 li 元素。然后，只要再给其子元素（链接）设定样式即可。这个改进能够极大地提高菜单的易用性，下拉菜单到此讲完了，最终结果如上图所示。

有了以上 CSS 文件，只要把它链接到页面中，并给一个包含无序列表的容器加上 multi_drop_menu 类，该列表就会摇身一变，成为一个全功能的菜单，

表单

表单与其他页面元素的作用不同。

其他元素是把服务器发过来的内容显示给用户，而表单则是把用户的信息发送给服务器。

作为设计者，当然希望用户能够顺利地使用表单，从而得到他们的反馈、意见、联系信息……当然——还有他们的信用卡号。

大型表单的复杂程度较高，电商网站的购物车就是一例。假如设计得不好，让用户觉得费解，很可能转眼之间就丢掉了生意。可见，设计的品质是可以用白花花的银子来衡量的。

关于表单设计的参考 Web Form Design: Filling in the Blanks

HTML表单元素

HTML5表单

HTML5 为 input 元素新增了 13 种新类型（type 属性），也对表单进行了大幅增强，包括特别特别棒的 placeholder 属性，可以在文本框中显示说明文字（例如“在这里填写用户名”），只要用户一开始输入它就会消失。

了解新增的 HTML5 表单标签和属性，以及浏览器对它们的支持情况，可以参考这个网页和 html5forms.

更详细的input标签介绍：INPUT - Form Input 和 html-form-tutorial 标签：

<!-- 必要的 form 标签 -->
<form class="stylin_form1" action="process_form.php" method="post">
 <h3>A Stylin' Form</h3>
 <!-- 控件组，即各种控件的容器 -->
 <fieldset>
  <!-- 控件组的文字说明，或标题 -->
  <legend><span>Part 1 &#8226; Basic Controls</span></legend>
  <!-- 开始单行文本输入控件 -->
  <section>
   <p class="note">* indicates required field</p>
   <!-- for 属性把标注与控件关联起来，它的值必须与控件 ID 值相同 -->
   <label for="user_name">User Name<span> *</span></label>
   <!-- text 属性让这个控件可以输入文本 -->
   <input type="text" id="user_name" name="user_name" />
   <p>Please select a user name</p>
  </section>
  <!-- 开始密码控件 -->
  <section>
   <label for="password">Password<span> *</span></label>
   <!-- 密码文本显示为掩码 -->
   <input type="password" id="password" name="password" maxlength="20" />
   <p>Password must be 8 or more characters</p>
  </section>
  <!-- 开始多行文本输入控件 -->
  <section>
   <label for="description">Description</label>
   <textarea id="description" name="description" placeholder="Enter the description here."></textarea>
  </section>
  <!-- 开始 HTML5 日期控件 -->
  <section>
   <label for="description">Date</label>
   <input type="date" id="special_date" name="event_date" min="2012-09-05" />
  </section>
 </fieldset>
 <fieldset>
  <legend><span>Part 2 &#8226; Multiple-Choice Controls</span></legend>
  <!-- 开始复选框 -->
  <section>
   <h4>Select Any Number</h4>
   <section>
    <input type="checkbox" id="check1" name="checkset" value="1" tabindex="4" />
    <label for="check1">Choice 1</label>
   </section>
   <section>
    <input type="checkbox" checked="checked" id="check2" name="checkset" value="2" />
    <label for="check2">Choice 2 is pre-checked</label>
   </section>
   <section>
    <input type="checkbox" id="check3" name="checkset" value="3" />
    <label for="check3">Choice 3&mdash;add as many as you need!</label>
   </section>
   <p>You must choose one or more</p>
  </section>
  <!-- 开始单选按钮 -->
  <section>
   <h4>Select Only One</h4>
   <section>
    <input checked="checked" id="radio1" name="radioset" type="radio" value="Choice_1" />
    <label for="radio1">Choice 1 is pre-selected and shows the text wraps nicely if it goes to multiple lines.</label>
   </section>
   <section>
    <input id="radio2" name="radioset" type="radio" value="Choice_2" />
    <label for="radio2">Choice 2</label>
   </section>
   <section>
    <input id="radio3" name="radioset" type="radio" value="Choice_3" />
    <label for="radio3">Choice 3</label>
   </section>
  </section>
  <!-- 开始选项列表（下拉列表） -->
  <section>
   <label for="select_choice">Select Your Choice</label>
   <select id="select_choice" name="select_choice">
    <option value="0">None</option>
    <option value="1">Choice 1</option>
    <option value="2">Choice 2</option>
    <option value="3">Choice 3</option>
    <option value="4">Choice 4</option>
   </select>
  </section>
 </fieldset>
 <!-- 开始提交按钮 -->
 <section>
  <input type="submit" value="Submit This Form" />
 </section>
</form>

基于常用表单元素创建的表单

form 元素

所有表单的标记都包含在一个 form 元素中。

<form class="stylin_form1" action="process_form.php" method="post">
  <!-- 这里是表单标记 -->
</form>

form 元素有两个必要的属性：action 和 method。

action 属性用于指定服务器上用来处理表单数据的文件的 URL。

method（值要么是 post，要么是 get）用于指定怎么把数据发送到服务器。

服务器处理表单数据参考：html-form-tutorial。网页底部还有不少与表单相关的链接，

提交表单

用户提交表单后，他们在 表单控件 中填写的表单数据或者做出的选择，都会被发送到服务器。

控件，是对表单中用来收集数据的各种表单组件的通称，包括 文本框、复选框、单选按钮，等等。
表单中的数据是以“名=值”的形式发送给服务器的，比如 “username=chrisconsumer”，每个控件都是这么一个名/值形式。
这里的“名”就是你在控件 name 属性中设定的名字。
这里的“值”可能是用户在文本控件中输入的信息，也可能是表示可选控件（如复选框）中某一项是否被选中的布尔状态值（比如某个复选框中用 1 表示选中，用 0 表示未选中）。

在确定这些控件的名字时，最好跟编程人员以及数据库管理员共同协商，得到一个大家都认可的命名方案。

控件组

可以把一组相关的表单控件组织到一个控件组元素 fieldset 中。

比如: 在一个电商网站上，用于收集用户姓名和地址的控件组，可能会加上一个标题叫“收货人信息”。随后可能就是另一个用于填写信用卡信息的控件组。

前面表单标记使用了两个 fieldset 元素，把所有控件分成了两组。

第一组包含基本的标注和控件，第二组包含更复杂的控件，比如复选框（type="checkbox"）、单选按钮（type="radio"）和选项列表（select）。

fieldset 的第一个子元素一定得是 legend文本元素，其中包含这个控件组的标题。

<fieldset>
 <legend>Mailing Address</legend>
 <!--- 标注和控件 -->
</fieldset>

控件与标注

表单包含一或多个控件。如前所述，控件就是让用户勾选、点选、输入的组件。对于那些可以输入的控件，大家又俗称其为字段。每个表单控件（submit 按钮除外），都有一个对应的 label 文本元素，用于描述控件代表的数据。

<label for="user_name">User Name</label>
<!-- 创建一个文本字段 -->
<input type="text" id="user_name" name="user_name" />
<p>Please select a user name</p>

label 元素可以包含控件，也可以放在控件前头或后头。如果像前面那样没有用 label包含控件，那么 label 的 for 属性与控件的 id 属性必须匹配，以便把两者关联起来。

不过，控件与标注之间的关系是隐式存在的，而且如果 label 像下面这样包含控件，其 for 属性也不是必需的：

<label>User Name<input type="text" name="user_name" />
</label>

for 属性与 id 属性通过相同的值关联起来后，用户点击标注文本也可以选择单选按钮和复选框。

无论采用哪种方式关联标注与控件都没问题，重要的是一定要有这种关联。这种关联对于屏幕阅读器等辅助技术解读表单非常关键。

个人习惯于把 label 放在控件前面（当然对于复选框和单选按钮，还是要放在后面），因为这样更方便设定样式。除了标记和控件，有时候还需要告诉用户如何填写或选择，特别是在需要填写特定格式数据（如日期）的时候。 HTML 中没有为表单控件说明规定什么标签，因此就用 p 这个段落元素吧。另外，说明的文字最好方便在用户输入无效数据的情况下突出显示（比如变成红色），这样就不用单独准备和控制错误消息了。后面会介绍怎么做到这一点。

当然，如果希望在用户输入无效数据时显示不同于说明的错误消息，可以再添加一个 p 元素，并赋予它.error 类。

控件类型

最常用的 HTML 表单元素是 input , 因为它可以在屏幕上显示为多种不同的外观，并具有不同的行为。文本框、复选框、单选按钮等的背后都是 input 元素，区别在于它们的 type 属性。

下面列出了 type 属性部分可能的值：

text：基本的单行文本框。
password：文本显示为掩码。
checkbox：复选框。
radio：单选按钮。
submit：提交表单的按钮。
time、date、search：HTML5 文本框的变体。

这些类型值决定了相应 input 元素的外观和行为。

type 属性的所有值可参考： MDN-firefox 和中文版

有一个文本控件不是 input 元素的变体，那就是多行文本区 textarea 元素。另外，在用户输入之前一直显示的占位符文本，是通过 placeholder 属性设定的。

复选框、单选按钮和选项列表

这三种表单元素比一般的控件/标注组合要复杂一些：

复选框可以让用户从多个备选项中选择一或多个项。每个备选项都是非排他型的，即勾选同一组中的其他项，不会影响已经选择的项。
单选按钮限制用户只能从多个备选项中选择一项。每个备选项都是排他型的，即勾选同一组中的另一项，就会取消对前一项的选择。
特别注意一下，复选框和单选按钮都是成组出现的，分组的方法是为它们设定相同的 name 属性。
本例中的单选按钮，它们共同的名字叫 radioset。这个组中的每个单选按钮由其 value 属性唯一标识。
本例中，分别是 Choice_1、Choice_2，等等。假设用户选择了第一个按钮，那么发送到服务器的名/值对，就是 radioset=Choice_1。
选项列表（select 元素）会创建一个下拉列表，用户可以在其中点选。在 select元素中，每个备选项都用 option 文本元素来生成。

HTML 中的所有表单元素，可以参考这里：form-elements

表单标记策略

因为 HTML 标准没有规定专门包含控件及其标注的元素，所以可以用块级 section元素来充当这个角色。这样既方便组织控件，又方便为行内表单控件及其标注设定样式。

基本的标注和控件

在前面的标记中，把每个标注和控件都放到了一个 section 元素中，让 label 位于控件之前。

<section>
 <label>…</label>
 <input />
 <p>…</p> <!-- 控件使用说明 -->
</section>

通过把每一对标注和控件都放到块级 section 元素中，它们自然就在页面上垂直堆叠起来了。而且，这样也有了一个可以定位它们的包含元素。

复选框和单选按钮

单选按钮和复选框是由很多标注/控件组成的，所以把它们都放到了一个 section元素中（便于为标注/控件设定基本的 CSS 样式）。然后，在这个元素里面，再把每个复选框或单选按钮的标注/控件分别放到各自的 section 元素中。

<section>
 <h4>Set Heading</h4>
 <!-- 第一个单选按钮/复选框 -->
 <section>
 <input />
 <label>…</label>
 </section>
 <!-- 第二个单选按钮/复选框 -->
 <section>
 <input />
 <label>…</label>
 </section>
 <!-- 控件使用说明 -->
 <p>…</p>
</section>

这时候，把标注放到了控件后面，这样它才能显示在控件右侧。虽然每个控件（复选框和单选按钮）都有一个对应的标注，但不能将它们用作整个控件组的标题。每个 label 元素只能用于标注一个控件。为此就用一个 h4 元素来作为它们的标题。如前所述，还添加了一个 p 元素，用于显示控件使用说明。 HTML 未来的版本中或许会专门规定这些特定用途的标签。但在此之前，到底选用什么标签来达到目的，还是会因人而异。

设定表单样式

首先，从表单的整体布局开始。【就是先设定 form 和两个 fieldset 元素的样式。】

form.stylin_form1 {
 width:14em; /* 表单整体宽度 */
 margin:20px auto; /* 在容器内居中 */
 border:1px solid #bbb7ae;
 padding:.5em .5em .15em;
 }
.stylin_form1 h3 { /* 表单主标题 */
 margin:0;
 padding:0 0 .2em .2em;
 font-weight:600;
 color:#bbb7ae;
 }
.stylin_form1 fieldset { /*包含控件与标注*/
 margin:0;
 padding:0 0 .2em 0;
 width:100%;
 border:0;
 }
/* legend 元素的位置不同寻常，所以我把它的文本包含在一个块级 span 中，转而为 span
设定样式 */
.stylin_form1 legend {
 width:100%;
 padding:.3em 0;
 background:#bbb7ae; /*灰色条*/
 }
.stylin_form1 legend span { /* 设定标题文本的样式 */
 display:block;
 font-size:1em;
 line-height:1.1em;
 padding: 0 0 0 .4em;
 font-weight:700;
 color:#fff; /*灰色条上的反白文本*/
 }

通过为 form 设定内边距，它所包含的内容都与表单边界空开了距离。很明显，给 legend 添加了灰色条，相应地把文本设定成了白色。 legend 元素默认的位置是由浏览器内部的一种未加说明的机制确定的，并不是由浏览器样式表设定的。因此，不可能通过 CSS 来精确控制它的位置。解决这个问题的方法，就是把它的文本包含在一个 span 元素中，将该元素设定为 display:block，然后再设定该元素的位置。

接下来，从宏观到微观，给控件组（fieldset）中的控件和标注设定样式:

.stylin_form1 section {
  overflow: hidden;
  /* 强制 section 包含表单控件及标注 */
  padding: .2em 0 .4em 0;
  border-bottom: 8px solid #e7e5df;
  /* 根据需要在每个 section 间增加间距 */
}

.stylin_form1 section:last-child {
  /* 每组最后一个 section 没有边框 */
  border-bottom: 0px;
}

.stylin_form1 section label,
/* 表单控件的标注 */

.stylin_form1 section h4 {
  /* h4 是复选框和单选按钮组的标题 */
  display: block;
  clear: both;
  margin: .3em .3em 0 0;
  /* 右外边距确保标注文本在碰到 input 之前会换行 */
  padding-bottom: .1em;
  font-size: .8em;
  font-family: 'Droid Sans';
  font-weight: 400;
  line-height: 1.1;
}

.stylin_form1 section label span,
/* 星号表示必填字段 */

.stylin_form1 section h4 span {
  font-size: .75em;
  vertical-align: text-top;
  color: #f00;
}

.stylin_form1 section p.note {
  /*说明星号是必填字段的文本*/
  font-size: .7em;
  color: #f00;
  margin: 0;
  padding: 0 0 .3em 0;
}

.stylin_form1 section input,
.stylin_form1 section textarea,
.stylin_form1 section select {
  margin: .2em .5em .2em 0;
  padding: .2em .4em;
  /* 给 input 中的文本添加间距 */
  color: #000;
  box-shadow: 1px 1px 3px #ccc;
  font-size: .8em;
  /* 针对 Firefox - 没有这条声明会在 textarea 上使用 Courier */
  font-family: inherit;
  outline: none;
  /* 去掉默认蓝色聚焦轮廓线 */
}
/* 设定文本字段（文本、密码、日期、文本区等）的样式，并加圆角 */

.stylin_form1 section input,
.stylin_form1 section textarea {
  width: 12em;
  /*设定字段宽度*/
  border: 1px solid #bbb7ae;
  border-radius: 3px;
  /*圆角边框*/
}

.stylin_form1 section textarea {
  height: 5em;
  /* textarea 的高度 */
  margin-top: .3em;
  /* 与上面 label 的间距 */
  line-height: 1.1;
}

.stylin_form1 section p {
  /*控件使用说明*/
  margin: .3em .75em 0;
  clear: both;
  font-size: .7em;
  line-height: 1.1;
  color: #000;
}

.stylin_form1 section p.error {
  color: #f00;
  /* 添加 error 类，把说明文字设定为红色 */
}

把所有控件的可见盒子（类型为 text、date、textarea 和 select）都设定为相同宽度，为说明文字应用了样式，并给每个 section 元素添加了较宽的边框，让它们从视觉上保持适当距离。

某些标注后面的星号表示相应字段是必填的，也就是用户不能不填。这个（用 Shift-8）输入的星号被包含在 span 元素中，以便调整它与标注文本的相对位置，并应用不同颜色。注意，还为控件使用说明段落设定了一条 p.error 规则。如果控件中数据无效，这个类就会被添加到说明段落上。然后，说明文字会变成红色，提醒用户必须输入有效数据才能提交表单。

这个 error 类将由验证表单的代码添加

下面该轮到复选框、单选按钮和选项列表了。这些控件全都位于第二个控件组中。它们的标注都在控件下方，应该让这些标注与控件并排显示。

/* 复选框和单选框 */
.stylin_form1 section section {
  /* 控件/标注的内包装 */
  overflow: hidden;
  /* 强制元素包围浮动标注 */
  margin: .2em 0 .3em .4em;
  padding: 0 0 .1em 0;
  border-bottom: none;
}

.stylin_form1 section section input {
  /*单选按钮或复选框*/
  float: left;
  clear: both;
  width: auto;
  /* 重设继承的宽度 */
  margin: .1em 0 0em .3em;
  /* 顶部与标注对齐，左侧防止 intput 溢出 */
}

.stylin_form1 section section label {
  float: left;
  clear: none;
  /* 重设继承的值 */
  width: 15em;
  margin: .15em 0 0 .6em;
  /* 在相邻的复选框之间、复选框与标注之间增加间距 */
  font-weight: normal;
  /* 重设继承的值 */
  font-size: .7em;
  line-height: 1.2;
}

.stylin_form1 section select {
  margin-left: .4em;
  font-size: .85em;
}

.stylin_form1 section input[type="submit"] {
  /*提交按钮*/
  width: auto;
  /* 覆盖为其他字段设定的宽度 */
  margin: .4em .3em 0 0;
  font-size: 1em;
  font-weight: 800;
  color: #fff;
  background-color: #bbb7ae;
  cursor: pointer;
  /*在鼠标位于按钮之上时，把光标变成小手形状*/
}

.stylin_form1>section:last-child {
  /*居中提交按钮*/
  text-align: center;
}

复选框、单选按钮和提交按钮已经各就各位

每一组单选按钮和复选框的标题，看起来很像表单第一个控件组里的标注。但实际上，它们是 h4 元素——我们只能用 label 来关联控件。正因为如此，要把同样的样式设定给 h4 很简单，把为表单第一个控件组中的 label 设定样式的选择符中的 label替换成 h4 即可。然后，给这里每个复选框和单选按钮的小标注另外写一种样式。为了让选项列表与其他元素对齐，我们也为它设定了相应的样式，通过减小其文本大小也把它缩小了一点。至于提交按钮，它的宽度不再继承前面设定给其他 input 的规则，并且在表单底部居中。明确告诉用户，这是表单的最后一个步骤。

在为 name 属性设定同一个名字的情况下，复选框和单选按钮的行为就像一个组一样。提交表单时，它们的 name 值与 value 值，将分别作为“名=值”对中的“名”和“值”。

接下来让表单的标注显示在控件的左侧。使用这个“标注在左”版的样式也很简单，只要给 form 元素加上 labels_left 类即可。

form.stylin_form1.labels_left {
  width: 22em;
  /*加宽表单，为标注腾出地方*/
}

form.stylin_form1.labels_left label,
form.stylin_form1.labels_left h4 {
  float: left;
  /*把标注浮动到控件左侧*/
  width: 8em;
}

form.stylin_form1.labels_left p {
  margin: 0 0 0 9.35em;
  /*缩进控件说明，以便它位于控件正下方*/
  padding: .3em 0 0 0;
  clear: both;
  /*确保说明不会跟着浮动的标注和控件走*/
}

form.stylin_form1.labels_left p.note {
  /*必填字段文本下方的间距*/
  margin: 0 0 .2em 0;
}

/*每个单选按钮或复选框及其标注的内包装*/
form.stylin_form1.labels_left section section {
  width: 10em;
  margin-left: 6.5em;
  padding-top: 0;
}

form.stylin_form1.labels_left section section input {
  width: 1.25em;
  /*单选按钮或复选框的宽度*/
  margin-left: 0;
}

.stylin_form1.labels_left section input,
.stylin_form1.labels_left section textarea,
.stylin_form1.labels_left section select {
  float: left;
  /*让控件成为第二栏*/
  width: 12em;
}

.stylin_form1.labels_left section select {
  /*缩进选项列表*/
  margin-left: .2em;
}

/*防止提交表单按钮继承浮动的行为*/
.stylin_form1.labels_left>section input[type=submit] {
  float: none;
}

这个例子涉及的那么多 HTML 和 CSS 代码，一定深深体会到了为表单添加样式多么复杂，多么耗时间。正因为如此，这里对原型式表单的标记进行了精心设计，而且写了很多注释，以方便轻松地把它作为自己设计表单的起点。直接复制粘贴 HTML 代码也好，模仿其结构再添加需要的各种控件也罢，别忘了把这个表单 CSS 链接到页面中。然后，给 form 元素加上 stylin_form1 类，表单一下子就能变成现在这个样子。以此为起点，进行各种改进和增强，就会非常容易了。

作者自己就是这样做的，这样每次都能节省好几个钟头的时间。

设计搜索表单

几乎每个站点都会提供一种搜索机制。恐怕很难把一个搜索框当成一个表单，但它的确是一个字段的表单。搜索表单提供了简单的搜索功能，它随时恭候在标题栏的右侧，那儿几乎是它的专属位置。苹果网站上那个小巧、低调的搜索框，在用户点击它的时候会扩展开来，为输入关键词提供更多空间。它旁边甚至连一个按钮都没有——用户都知道点击、输入，然后再按 Return 或回车键。这种搜索表单的 form 元素中只需要包含一个 label 和一个 input。在下面的例子中，会把这个表单放在一个 header 标签中，以便得到一个包含搜索功能的页眉。

<header>
 <form class="stylin_form_search1" action="#" method="post">
   <label for="search">search</label>
   <input type="search" id="search" name="search" placeholder="search" />
 </form>
</header>

借这个例子，正好可以讲一讲 CSS3 的过渡功能。过渡可以基于某个 CSS 属性实现动画效果。

在这个例子中，要利用它实现文本框动态变宽的效果。

对应的CSS 如下：

* {
  margin: 0;
  padding: 0;
}

header {
  /*在这个例子中代表页眉*/
  font-family: helvetica, arial, sans-serif;
  display: block;
  overflow: hidden;
  width: 300px;
  margin: 30px;
  border-radius: 6px;
  background-color: #ddd;
}

form.stylin_form_search1 {
  /*包含 label 和 input 的容器*/
  float: right;
  width: 200px;
  margin: 5px;
  padding: 5px;
}

form.stylin_form_search1 input {
  float: right;
  width: 70px;
  padding: 2px 0 3px 5px;
  outline: none;
  /*去掉默认的突显轮廓线*/
  font-size: .8em;
  border-color: #eee #ccc #ccc #eee;
  /*针对其他浏览器的厂商前缀*/
  border-radius: 10px;
  -webkit-transition: 2s width;
}

form.stylin_form_search1 input:focus {
  width: 200px;
}

form.stylin_form_search1 label {
  /*标注是必要的，但不用显示出来*/
  display: none;
}

这里的 form 元素是“有宽度的”，而且是向右浮动的。表单内部的 input 也是向右浮动。虽然 label 元素没有显示出来，但它是必须要加的。文本框中的文本由 placeholder 属性生成，只要用户一开始输入，这些占位符文本就会自动隐藏。

运用 CSS3 过渡

在前面的 CSS 中，input 规则将该字段宽度设定为 70 像素，input:focus 规则将该字段宽度修改成了 200 像素。这意味着，在用户单击搜索框让它获得键盘焦点之后，字段宽度会改变。不过，由于现在有了 transition:2s width;声明，字段不会突然扩展到新宽度，而是会用两秒钟时间平滑地伸展到 200 像素。

必须注意，CSS3 的过渡声明要放在设定初始状态的规则中。而且，transition 属性需要使用带厂商前缀的形式【这里只示范了带有 WebKit（Safari/Chrome）前缀的属性】。

附注：CSS3 过渡

CSS3 过渡可以让 CSS 属性产生动画效果。平常被某些事件触发时变化很突然的样式。比如：鼠标悬停时改变链接颜色，使用过渡后会在指定的时间段内逐渐变化。第一条 CSS 规则设定属性的初始状态和过渡参数。第二条 CSS 规则设定事件发生时属性的目标状态。

在下面这个例子中，用户单击表单输入字段后，输入框的边框颜色会从黑色变化为绿色，过渡周期为两秒钟。

input {border-color:black; transition:border-color 2s;}
input:focus {border-color:green;}
/* 请注意，使用 transition 属性时要针对所有浏览器添加厂商前缀。 */

通常，过渡动画是由用户鼠标悬停时的 :hover 伪类规则和表单元素获得焦点时的 :focus 伪类规则触发的。除此之外，还可以在一个带类名选择符的规则中设定新状态，然后通过 JavaScript（或 jQuery、MooTools 等 JavaScript 库）为元素添加这个类名来触发过渡，添加类名的时机可以是鼠标点击或其他事件发生时。

有五个过渡属性：

transition-property，过渡的 CSS 属性名，比如 color、width；
transition-duration，过渡的持续时间，以秒或毫秒设定，比如 2s、500ms；
transition-timing-function，过渡的调速函数，决定动画效果是否平滑，是先慢后快还是先快后慢，比如 ease-in、ease-out、ease-in-out 或 linear（默认值）；
transition-delay，过渡开始前的延迟时间，以秒或毫秒设定，比如 1s、200ms；
transition，过渡的简写属性，例如 transition:color 2s ease-in 1ms;

很多（并非全部）CSS 属性都可以通过 transition 属性来实现动画效果。

至于哪些属性可以实现动画效果，可以参考 animatable-properties，这个页面是 W3C 对 CSS3 Transitions Module 的官方陈述。

下面这篇介绍 CSS3 过渡的文章也非常值得一看：An Introduction to CSS3 Transitions。

弹出层

弹出层（也叫提示条）指的是在鼠标悬停于某个元素之上时显示的一个界面组件。在页面空间有限的情况下，弹出层是为用户提供更多信息的一种有效手段。而且，在用户把鼠标移动到关注的元素之上时，显示一个弹出层也是件自然而然的事儿。乍一听，弹出层不是个太复杂的东西。但是，一会儿你就知道我为什么把它放在本章最后才讲了。围绕创建弹出层，会跟大家讲两个 CSS 中非常强大，但又没多少人真正理解的特性：z-index 属性 和 动态生成 HTML 元素。

会在接下来的练习中用到三张图片，每张图片都配一个图题。

以下就是练习的 HTML 标记，其中使用了HTML5 新增的 figure 和 figcaption 元素。

<figure>
  <img src="images/pink_heels.jpg" alt="pink heels" />
  <figcaption>
    <h3>Pink Platforms</h3>
    <a href="#">More info</a>
  </figcaption>
</figure>
<figure class="click_me">
  <img src="images/leopard_heels.jpg" alt="leopard heels" />
  <figcaption>
    <h3>Leopard Platforms</h3>
    <a href="#">More info</a>
  </figcaption>
</figure>
<figure class="click_me">
  <img src="images/red_heels.jpg" alt="red heels" />
  <figcaption>
    <h3>Red Platforms</h3>
    <a href="#">More info</a>
  </figcaption>
</figure>

注意： 如果要使用 figcaption，必须确保它在 figure 中是唯一的。而且，它要么是第一个子元素，要么是最后一个子元素。

首先，设定 figure 元素的样式，让它在视觉上成为一个包围图片的盒子。

figure {
  width: 144px; /*图片盒子宽度*/
  height: 153px;  /*图片盒子高度*/
  margin: 20px 20px;  /*图片盒子间距*/
  border: 1px solid #666;  /*图片边框*/
  position: relative;  /*为弹出层提供定位上下文*/
  float: left;  /*让图片并排显示*/
}

img {
  display: block;  /*去掉图片下方的基线空白*/

}

figure 元素的边框之内恰好能容纳图片，而且浮动也让它们并排显示在一行。 figcaption 元素目前就显示在它默认的位置，但下一步它就会变成弹出层。

为什么把图片设定为 display:block 呢？因为图片默认是行内元素，行内元素的定位原则是与文本基线对齐，而不是与它们容器的底边对齐。在把它们放在块级元素内部时（像这里一样），把图片转换为块级元素可以解决这个问题。另外，这里还把 figure 元素设定为 相对定位 ，这样随后就可以把它作为定位上下文来定位figcaption 了，下面就是相应的样式。

figcaption {
  display: none;  /*隐藏弹出层*/
  position: absolute;  /*相对于容器（图片）定位*/
  left: 74%;
  top: 14px;  /*把弹出层放到图片右侧*/
  width: 130px;  /*弹出层宽度*/
  padding: 10px;  /*弹出层内边距*/
  background: #f2eaea;
  border: 3px solid red;
  border-radius: 6px;
}

figure:hover figcaption {display: block;} /*鼠标悬停在图片上时显示弹出层*/

figcaption h3 {
  /*弹出层的内容*/
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
}

figcaption a {
  /*弹出层的内容*/
  display: block;
  text-decoration: none;
  font-size: 12px;
  color: #000;
}

这里又用到了实现下拉菜单时的技术，即先隐藏弹出层，然后在鼠标悬停时再显示它。为了把弹出层定位在图片盒子的右侧，把它的 left 属性设定为 74%。或许有人认为在这里应该使用 right 属性，但那样就是设定图片盒子右边与弹出层右边的相对位置了。

鼠标移动图片上时，会在弹出层中显示图题。可是，前两个截图的弹出层被右边的图片给挡住了

堆叠上下文和z-index

从图中的截图来看，其中一张图片的弹出层被右边的图片给挡住了一部分。

这是由于 figure 元素的堆叠次序导致的。

在一个包含多个同辈元素的容器内，这些同辈元素都会构造一个堆叠上下文。【就像这里 body 元素的三个 figure 子元素一样】

在这个上下文中，它们的子元素会上下堆叠起来。假如通过定位让前两个 figure 元素重叠，那么你会发现第一个 figure 元素，以及它的堆叠上下文中的所有子元素，都将位于第二个 figure 元素的后面。第一个插图的弹出层属于第一个 figure 元素的堆叠上下文，因此它默认会在第二个 figure 元素的堆叠上下文中所有元素的后面。

CSS 中有一个 z-index 属性，用于控制元素的在堆叠上下文中的次序。【通过它可以改变元素堆叠时的默认次序。】

z-index 值较大的元素，在堆叠层次中位于z-index 值较小的元素上方。

z-index 属性的值可以是 0 到任意大的数值；负值也可以，但在某些浏览器中并不可靠。

默认情况下，所有堆叠元素的 z-index 的值为 auto，相当于 0。

不过，z-index 只对那些 position 值为 static 之外的元素有效。【涉及的两个元素必须是 absolute、relative 或 fixed 定位才行】。

在例子中，弹出层已经是绝对定位了，其位置相对于相对定位的 figure 元素。所以，只要给弹出层应用大于 0 的 z-index 值，就可以让它们在堆叠中处于最高层。这里，我们把 z-index设定为 2。

figure:hover figcaption {
  display: block;
  z-index:2;/*把弹出层放到最前面*/
}

在给弹出层设定了较大的 z-index 属性后，它们就能显示在所有图片之前了

这个例子告诉我们，应该只给悬停状态设定 z-index 属性，而不要试图通过设定个别元素的 z-index 来确保元素不会重叠。只要坚持“悬停时设定 z-index”，就能放心地摆放图片，而且知道在触发弹出层时，它一定会显示在页面的最前面，如图所示。

用CSS创造三角形

使用三角形对接的边框让弹出层和图片的关系更加明确。

源码:

<style>
div {
 border:12px solid;
 border-color:transparent red transparent transparent;
 height:0px;
 width:0px;
}
</style>

<div></div>

通过加宽盒子的边框，将盒子的宽和高都设定为 0，同时将其他三个边框设定为 transparent，就可以用 CSS 造出一个三角形。

其他类型的如：

<html>
<head>
<meta charset="utf-8" />
<title> Creating a CSS Triangle</title>
<style>
div {margin:20px 30px; float:left;}
div.step1 {
 border:12px solid;
 border-color:red;
 height:30px; width:30px;
 bottom:100%; left:140px;
 color:#000;
 }
div.step2 {
 border:12px solid;
 border-color:orange red green gray;
 height:30px; width:30px;
 bottom:100%; left:140px;
 color:#000;
 }
div.step3 {
 border:12px solid;
 border-color:orange red green gray;
 height:0px; width:0px;
 bottom:100%; left:140px;
 color:#000;
 }
div.step4 {
 border:12px solid;
 border-color:transparent red transparent transparent;
 height:0px; width:0px;
 bottom:100%; left:140px;
 color:#000;
 }
</style>
</head>

<body>
 <div class="step1"></div>
    <div class="step2"></div>
    <div class="step3"></div>
    <div class="step4"></div>
</body>

</html>

把这个技术与::before 伪元素结合起来。【::before 和::after 这两个伪元素是用于添加文本或图标等少量内容的。】可以为它们生成的内容设定任何样式，就像给标记中其他元素设定样式一样。在这把伪元素生成内容的盒子，通过 CSS 制作成一个三角形，并把它放到弹出层的左边。

figcaption::after { /*红色三角形的盒子*/
   content:""; /*需要有内容，这里是一个空字符串*/
   position:absolute; /*相对于弹出层定位*/
   border:12px solid;
   border-color:transparent red transparent transparent;
   right:100%; top:17px; /*相对于盒子边框定位三角形*/
   height:0px; width:0px; /*收缩边框创造三角形*/
}

如图：

最后更新: 2023年2月27日
创建日期: 2017年3月29日