项目需要添加一个搜索功能，前端样式根据参考google样式实现，写了一个简单的实现。
包括：
（1）搜索框行 背景使用浅色标示
（2）搜索条目 使用蓝色字体标示，不使用下划线，当鼠标放上后出现下划线。
（3）搜索没有结果，提示一行没有匹配的提示。
给出编码实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>search result</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.15.0/build/cssreset/cssreset-min.css"> <style> #search-input{ padding:10px 0px 10px 100px; background:#f1f1f1; } #search-result{ margin: 10px 10px 10px 100px; background:#ffffff; } #search-result-list{ list-style-type:none; } .search-result-item{ margin-top:0px; margin-bottom:23px; } .search-result-item h3{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width:500px; } .search-result-item a{ color:#1E0FBE; font-size: 18px!important; text-decoration:none; } .search-result-item a:hover{ text-decoration:underline; cursor:pointer; } </style> </head> <body> <div id="search-input"> <input type="text" value="" style="500px"/> <input type="button" value="search"></input> </div> <div id="search-result"> <ul id="search-result-list"> <li class="search-result-item"> <h3> <a> 用户手则11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222222 </a> </h3> </li> <li class="search-result-item"> <h3> <a> 用户手则11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222222 </a> </h3> </li> <li class="search-result-item"> <h3><a>用户手则</a></h3> </li> <li class="search-result-item"> <h3>抱歉，没有找到您要搜索的内容。</h3> </li> </ul> </div> </body> </html>