MetInfo搜索条制作

来自站长百科
跳转至: 导航、​ 搜索

导航:返回上一页

本页面只以最简单示例阐述搜索条的制作,函数标签的详细使用请查阅“标签函数及参数”部分。

简单搜索条[ ]

结合CSS控制,可以实现如下效果:

Metinfo97.png

或者

Metinfo98.png

HTML代码:

<!-- 
EOT; 
$metsearch=methtml_search(); 
echo <<<EOT 
--> 
<div class="headright2">{$metsearch}</div> 

css代码:

.headright2{ height:20px; width:590px; float:right; margin:3px 0px 0px 0px; padding:0px 10px 0px 0px; color: #2C2C2C; font-size:13px; 
line-height:20px; text-align:right; } 
.headright2 a{ color:#2C2C2C;} 
.headright2 input{ border:1px solid #999999;} 

高级搜索条[ ]

结合CSS控制,可以实现如下效果:

Metinfo99.png

HTML代码:

<!-- 
EOT; 
$metsearchadv=methtml_advsearch(); 
echo <<<EOT 
--> 
<div class="searchnavright">$metsearchadv</div> 

css代码:

.searchnavright{ width:182px; height:auto; overflow:auto; line-height:25px; text-align:left; padding-left:10px;} 
.searchnavright li{ margin:5px 0px 5px 0px; float:left; list-style:none;} 
.searchnavright li .advsearch_searchword{ width:100px; float:left; margin:2px 8px 0px 0px; list-style:none;} 
.searchnavright li .advsearch_searchword input{ width:100px;} 
.searchnavright font a{color: #666666;} 
.search_input{width:99%; height:30px; text-align:left; margin-top:5px;} 

产品及图片含参数搜索条[ ]

结合CSS控制,可以实现如下效果:

Metinfo100.png

HTML代码:

<!-- 
EOT; 
$metproductsearch=methtml_parasearch('product'); 
echo <<<EOT 
--> 
<div class="navright1">$metproductsearch</div> 

css代码:

.navright1{width:192px; height:auto; overflow:auto; line-height:25px; text-align:left;} 
.navright1 li { list-style:none; float:left; margin:5px 0px 0px 0px; padding:0px 0px 0px 0px; } 
.navright1 li .parasearch_class1{ float:left; text-align:center; padding:0px 0px 0px 30px;} 
.navright1 li .parasearch_class2{ float:left; text-align:center; padding:0px 0px 0px 30px;} 
.navright1 li .parasearch_class3{ float:left; text-align:center; padding:0px 0px 0px 30px;} 
.navright1 li .parasearch_title{ float:left; width:50px; text-align:center;} 
.navright1 li .parasearch_input{ float:left; width:130px;} 
.navright1 li .parasearch_input input{ float:left; width:100px;} 
.navright1 li .parasearch_search{ width:100%; text-align:center;} 
.navright1 li .parasearch_search input{ margin:0px 0px 0px 50px;}