网站头部导航元素u201

HTML代码已调好易优标签，要BP标签自己改一下大同小异:

<div class="top201">
<div class="w201 clearfix">
<div class="zc201">{eyou:global name='web_attr_26' /}</div>
<div class="r201">
<ul>
<li><a href="{eyou:global%20name='web_basehost'%20/}/sitemap.xml">网站地图</a></li>
|
{eyou:type typeid="77"}
<li><a href="{$field.typeurl}" title="{$field.typename}">{$field.typename}</a></li>
{/eyou:type}
|
{eyou:type typeid="87"}
<li><a href="{$field.typeurl}" title="{$field.typename}">{$field.typename}</a></li>
{/eyou:type}
</ul>
</div>
</div>
</div>
<div class="h201_main">
<div class="head201 w201 clearfix"><a class="logo201 fl" href="{eyou:global%20name='web_cmsurl'%20/}" title="{eyou:global name='web_name' /}"><img src="{eyou:global%20name='web_logo'%20/}" alt="{eyou:global name='web_name' /}"></a>
<div class="ss201 fr"> {eyou:searchform type='default'}
<form method="get" action="{$field.action}" onsubmit="return searchForm();">
<input class="stxt201" type="text" name="keywords" id="keywords" value="{eyou:lang name='yybl6' /}" onfocus="if(this.value==defaultValue)this.value=''" onblur="if(this.value=='')this.value=defaultValue"/>
<input type="submit" name="submit" class="sbtn201 icon201" value=""/>
{$field.hidden}
</form>
{/eyou:searchform} </div>
</div>
</div>
<div class="nav201">
<div class="na201 w201">
<ul class="list201 clearfix">
<li><a href="{eyou:global%20name='web_cmsurl'%20/}" {eyou:eq name='$Think.const.CONTROLLER_NAME' value='Index'}class="hover"{/eyou:eq}>网站首页<span>Home</span><i></i></a></li>
{eyou:channel typeid="2" id="field" currentstyle="hover"}
<li><a href="{$field.typeurl}" title="{$field.typename}" class="{$field.currentstyle}">{$field.typename}<span>{$field.englist_name}</span><i></i></a> {eyou:notempty name="$field.children"}
<dl>
{eyou:channel name="$field.children" id="field2"}
<dd><a href="{$field2.typeurl}" title="{$field2.typename}">{$field2.typename}</a></dd>
{/eyou:channel}
</dl>
{/eyou:notempty} </li>
{/eyou:channel}
</ul>
</div>
</div>

 

CSS样式代码：

说明：

把搜索小图标放在自己网站的图片文件夹上，在把css样式里的路径“{eyou:global name=’web_templets_pc’ /}/skin/images/icon201.png”改成“../images/icon201.png”。

图片下载：

原文链接：https://www.zsiss.com/3282.html，转载请注明出处。