设计搜索表单
页眉中包含表单，表单中只需包含label和Input.
实现如下效果：文本框动态变宽效果
代码：6.2.4.设计搜索表单.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
header {
font-family: Arial, Helvetica, sans-serif;
background-color: #ddd;
display: block;
overflow: hidden;
width: 500px;
margin: 30px;
border-radius: 6px;
}
.stylin_form_search1 {
float: right;
width: 200px;
margin: 5px;
padding: 5px;
}
.stylin_form_search1 input {
float: right;
width: 70px;
padding: 2px 0 3px 5px;
/* 去掉默认的突显轮廓线 */
outline: none;
font-size: 0.8em;
border-color: #eee #ccc #ccc #eee;
/* 针对其他浏览器厂商前缀*/
border-radius: 10px;
-webkit-transition: 2s width;
/* 获取焦点时，宽度为200px */
}
.stylin_form_search1 input:focus {
width: 200px;
}
/* 不显示标注 */
.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过渡效果
CSS3过渡可以让CSS属性产生动画效果。
过渡效果要写在原来属性中。
触发过渡效果的包括：:hover伪类悬停，:focus伪类获取焦点等。
五个过渡属性：
transition-property:过渡的CSS属性名，例如color,width.
transition-duration:过渡持续时间，例如2s,500ms
transition-timing-function:过渡的调速函数，匀速，先快后慢或者先慢后快，例如：ease-in,ease-out等等。
transition-delay:过渡开始延迟时间，1s,200ms.
transition:简写，以上属性直接写，color 2s ease-in 100ms;