导航菜单
菜单由一组链接组成。用HTML 中的列表元素（ul 或ol）来分组链接不仅符合逻辑，而且即使没有额外的CSS 也能适当显示链接的层次。默认情况下，由于列表项（li）是块级元素，因此它们会上下堆叠。
纵向菜单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<!-- <link rel="stylesheet" href="./css/test.css"> -->
<style>
* {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;}
.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;}
.list1 a:hover {color:#069;}
</style>
</head>
<body>
<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>
</body>
</html>
横向菜单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<style>
.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;}
</style>
</head>
<body>
<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>
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<style>
/*添加视觉样式*/
/*顶级垂直菜单宽度*/
.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;
}
.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 a:hover {
/*悬停时的文本颜色*/
color: #fff;
/*悬停时的背景颜色*/
background-color: #aaa
}
.multi_drop_menu a:active {
/*点击时背景变色*/
background: #fff;
/*点击时文本变色*/
color: #ccc;
}
/*添加功能样式*/
.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 {
width: 9em;
}
.multi_drop_menu li li a {
/*去掉继承的右边框*/
border-right-style: none;
/*添加上边框*/
border-top-style: solid;
}
/* 添加的功能样式 */
.multi_drop_menu li li {
/*停止浮动，恢复堆叠*/
float: none;
}
.multi_drop_menu li li ul {
/*继续隐藏三级下拉菜单*/
display: none;
}
.multi_drop_menu li ul {
/*隐藏二级下拉菜单*/
display: none;
/*相对于父菜单项定位*/
position: absolute;
/*左边与父菜单项对齐*/
left: 0;
/*顶边与父菜单项底边对齐*/
top: 100%;
}
.multi_drop_menu li:hover>ul {
/*父元素悬停时显示*/
display: block;
}
.multi_drop_menu li li ul {
/*相对于父菜单定位*/
position: absolute;
/*与父菜单右侧对齐*/
left: 100%;
/*与父菜单项顶边对齐*/
top: 0;
}
</style>
</head>
<body>
<nav class="multi_drop_menu vertical">
<!-- 一级开始 -->
<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>
</body>
</html>
表单
表单与其他页面元素的作用不同。其他元素是把服务器发过来的内容显示给用户，而表单则是把用户的信息发送给服务器。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<style>
</style>
</head>
<body>
<!-- 必要的form 标签 -->
<form class="stylin_form1" action="process_form.php" method="post">
<h3>A Stylin' Form</h3>
<!-- 控件组，即各种控件的容器 -->
<fieldset>
<!-- 控件组的文字说明，或标题 -->
<legend>
<span>Part 1 • 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 • 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—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>
</body>
</html>
提交表单
用户提交表单后，他们在表单控件中填写的表单数据或者做出的选择，都会被发送到服务器。所谓控件，是对表单中用来收集数据的各种表单组件的通称，包括文本框、复选框、单选按钮，等等。表单中的数据是以“名=值”的形式发送给服务器的，
比如“username=chrisconsumer”，每个控件都是这么一个名/值对形式。这里的“名”
就是你在控件name 属性中设定的名字。“值”可能是用户在文本控件中输入的信息，
也可能是表示可选控件（如复选框）中某一项是否被选中的布尔状态值（比如某个
复选框中用1 表示选中，用0 表示未选中）
控件组
可以把一组相关的表单控件组织到一个控件组元素fieldset 中。比如，在一个电商网站上，用于收集用户姓名和地址的控件组，可能会加上一个标题叫“收货人信息”。随后可能就是另一个用于填写信用卡信息的控件组。
控件与标注
label 元素可以包含控件，也可以放在控件前头或后头。如果像前面那样没有用label包含控件，那么label 的for 属性与控件的id 属性必须匹配，以便把两者关联起来。不过，控件与标注之间的关系是隐式存在的，而且如果label 像下面这样包含控件，其for 属性也不是必需的。
for 属性与id 属性通过相同的值关联起来后，用户点击标注文本也可以选择单选按钮和复选框。
控件类型
文本框、复选框、单选按钮等的背后都是input 元素，区别在于它们的type 属性。
以下列出了type 属性部分可能的值：
- text：基本的单行文本框。
- password：文本显示为掩码。
- checkbox：复选框。
- radio：单选按钮。
- submit：提交表单的按钮。
- time、date、search：HTML5 文本框的变体。
有一个文本控件不是input 元素的变体，那就是多行文本区textarea 元素。另外，在用户输入之前一直显示的占位符文本，是通过placeholder 属性设定的。
设计搜索表单
几乎每个站点都会提供一种搜索机制。我猜，恐怕你很难把一个搜索框当成一个表单，但它的确是——一个字段的表单。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
/*在这个例子中代表页眉*/
font-family: helvetica, arial, sans-serif;
display: block;
overflow: hidden;
width: 500px;
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;
}
/*标注是必要的，但不用显示出来*/
</style>
</head>
<body>
<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>
</body>
</html>
运用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;。
弹出层
弹出层（也叫提示条）指的是在鼠标悬停于某个元素之上时显示的一个界面组件。在页面空间有限的情况下，弹出层是为用户提供更多信息的一种有效手段。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>HTML5 Template</title>
<style>
figure {
width:120px; /*图片盒子宽度*/
height:88px; /*图片盒子高度*/
margin:20px 20px; /*图片盒子间距*/
border:1px solid #666; /*图片边框*/
position:relative; /*为弹出层提供定位上下文*/
float:left; /*让图片并排显示*/
}
img {display:block;} /*去掉图片下方的基线空白*/
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;
}
</style>
</head>
<body>
<figure>
<img src="images/door_1.png" alt="pink heels" />
<figcaption>
<h3>Pink Platforms</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure class="click_me">
<img src="images/door_2.png" alt="leopard heels" />
<figcaption>
<h3>Leopard Platforms</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure class="click_me">
<img src="images/door_3.png" alt="red heels" />
<figcaption>
<h3>Red Platforms</h3>
<a href="#">More info</a>
</figcaption>
</figure>
</body>
</html>
堆叠上下文和z-index
前两张图片的弹出层被右边的图片给挡住了一部分，这是由于figure 元素的堆叠次序导致的。在一个包含多个同辈元素的容器内，就像这里body 元素的三个figure 子元素一样，这些同辈元素都会构造一个堆叠上下文。CSS 中有一个z-index 属性，用于控制元素的在堆叠上下文中的次序。z-index 值较大的元素，在堆叠层次中位于
z-index 值较小的元素上方。z-index 属性的值可以是0 到任意大的数值；负值也可以，但在某些浏览器中并不可靠。默认情况下，所有堆叠元素的z-index 的值为auto，相当于0。
不过，z-index 只对那些position 值为static 之外的元素有效。换句话说，涉及的两个元素必须是absolute、relative 或fixed 定位才行。
figure:hover figcaption {display:block; z-index:2;} /*把弹出层放到最前面*/
用CSS创造三角形
可以给弹出层左边添加一个三角箭头，让它指向图片。大家知道，::before 和::after 这两个伪元素是用于添加文本或图标等少量内容的。不过，完全可以为它们生成的内容设定任何样式，就像给标记中其他元素设定样式一样。
figcaption::after { /*红色三角形的盒子*/
content:""; /*需要有内容，这里是一个空字符串*/
position:absolute; /*相对于弹出层定位*/
border:12px solid;
border-color:transparent red transparent transparent;
right:100%; top:17px; /*相对于盒子边框定位三角形*/
height:0px; width:0px; /*收缩边框创造三角形*/
}
网友评论