头部搜索框实现的搜索功能:
<form name="" method="post" action="/e/search/index.php"> <input name="keyboard" type="text" placeholder="搜索内容" class="a_input" /> <input type="hidden" name="classid" value="0"> <input type="hidden" name="show" value="title,newstext"> <input type="submit" class="a_img" name="Submit1" align="absmiddle"> </form>
样式再具体的可以参照已经做好的金达管业的网站。
搜索模板的样式开始:
/*搜索开始*/ .boxsearch{min-height:500px;margin-top:30px;overflow:hidden;border-top: 1px solid #d8d8d8;} .boxsearch .w{width:1000px;} .boxsearch .tit{background:#F9F9F9; border:#D7D7D7 1px solid; height:31px;line-height:31px;font-size:14px;color:#555;padding-left:28px;} .boxsearch .tit span{ color:red; font-weight:bold;} .boxlefttitle{height:43px;margin-top:35px;margin-bottom:20px;} .boxlefttitle span{float:left;color:#101010;font-size:24px;padding-left:4px;font-weight:bold;} .boxsearch .tit{background:#F9F9F9; border:#D7D7D7 1px solid; height:31px;line-height:31px;font-size:14px;color:#555;padding-left:28px;} .boxsearch .tit span{ color:red; font-weight:bold;} .searchlist .art_title a{ font-size:14px; color:#0022CC; text-decoration:underline;line-height:24px;} .searchlist .art_title a:visited{ color:#CC3300;text-decoration:underline;} .searchlist .artintro{ line-height:24px; font-size:12px;} .searchlist .arturl{ line-height:24px;margin-bottom:13px;} .searchlist .arturl a{ color:green; font-size:14px; font-family:Arial, Helvetica, sans-serif;} .searchlist .arturl a:hover{ text-decoration:none;} .searchlist .c9{padding-left:20px;color:green; font-size:14px; font-family:Arial, Helvetica, sans-serif;} #fenye{clear:both; margin:10px 20px 0 0;} #fenye a{text-decoration:none; display:inline;line-height:25px;padding:0 10px;color:#A7A4A4;} #fenye b{font-size:14px;font-weight:bold;color:#000;padding:0 10px;} #fenye a b{display:none;} .searchdetail{margin-top:15px;border-bottom: 1px solid #D9D9D9;} .searchlist .art_title a{ font-size:14px; color:#0022CC; text-decoration:underline;line-height:24px;} .searchlist .art_title a:visited{ color:#CC3300;text-decoration:underline;} .searchlist .artintro{ line-height:24px; font-size:12px;} .searchlist .arturl{ line-height:24px;margin-bottom:13px;} .searchlist .arturl a{ color:green; font-size:14px; font-family:Arial, Helvetica, sans-serif;} .searchlist .arturl a:hover{ text-decoration:none;} .searchlist .c9{padding-left:20px;color:green; font-size:14px; font-family:Arial, Helvetica, sans-serif;} /*搜索结束*/
html代码:
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[!--pagetitle--]</title> <meta name="keywords" content="[!--pagekey--]" /> <meta name="description" content="[!--pagedes--]" /> <link href="/css/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/js/jquery.js"></script> </head> <body> [!--temp.header--] <div class="box boxsearch"> <div class="w"> <div class="boxlefttitle"> <span>搜索结果</span> </div> <div class="tit">系统搜索到约有<strong>[!--ecms.num--]</strong>项符合<strong>[!--keyboard--]</strong>的查询结果</div> <div class="searchlist"> [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] <div style="clear: both"> </div> <div id='fenye' class='fenye' align="right">[!--show.page--]</div> </div> <div class="clear"></div> </div> </div> [!--temp.footer--] </body> </html>
下面循环内容的代码:
<div class="searchdetail"> <p class="art_title"><a href="[!--titleurl--]" target="_blank">[!--title--]</a></p> <p class="artintro"></p> <p class="arturl"><a href="[!--titleurl--]" target="_blank">[!--titleurl--]</a><span class="c9">[!--newstime--]</span></p> </div>