建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
HTML
<div class="search_box"> <h3>搜索框</h3> <div class="content"> <form method="post" action=""> <select> <option value="1">网页</option> <option value="2">图片</option> <option value="3">新闻</option> <option value="4">MP3</option> </select> <input type="text" value="css"> <button type="submit">搜索</button> <div class="search_tips"> <h4>搜索提示</h4> <ul> <li><a href="#">css视频</a><span>共有589个项目</span></li> <li><a href="#">css教程</a><span>共有58393个项目</span></li> <li><a href="#">css+div</a><span>共有158393个项目</span></li> <li><a href="#">css网页设计</a><span>共有58393个项目</span></li> <li><a href="#">css样式</a><span>共有158393个项目</span></li> </ul> </div> </form> </div> </div>
-
CSS
.search_box { position: relative; width: 360px; } .search_box * { margin: 0; padding: 0; list-style: none; font: normal 12px/1.5em "宋体", Verdana, Lucida, Arial, Helvetica, sans-serif; } .search_box h3, .search_tips h4 { display: none; } .search_box select { float: left; width: 60px; } .search_box input { float: left; width: 196px; height: 14px; padding: 1px 2px; margin: 0 5px; border: 1px solid #619FCF; } .search_box button { float: left; width: 59px; height: 18px; text-indent: -9999px; border: 0 none; background: url(images/btn_search.gif) no-repeat 0 0; cursor: pointer; } .search_tips { position: absolute; top: 17px; left: 65px; width: 190px; padding: 5px 5px 0; border: 1px solid #619FCF; } .search_tips li { float: left; width: 100%; height: 22px; line-height: 22px; } .search_tips li a { float: left; text-decoration: none; color: #333333; } .search_tips li a:hover { color: #FF0000; } .search_tips li span { float: right; color: #CCCCCC; }