技术支持 桂林网站建设培训网站排名
设计搜索表单
页眉中包含表单，表单中只需包含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;