[京东店铺装修]制作含有搜索框的店招

[第六步]先装修左边区域

在设置搜索框的其他

区域背景为：http://img13.360buyimg.com/cms/g16/M00/09/11/rBEbRlN4X64IAAAAAAADuAAlUqAAAB2zAKI8_sAAAPQ218.png

[第七步]设置左边导航条，将一下代码，修改后放到自定义页面即可

<!--以下为导航代码-->

<style type="text/css">.userqswcyt {width:990px;height:120px;margin:0px auto;overflow:hidden;}

.userqswcyt .userqswcdz{width:990px;height:90px;overflow:hidden;}

.userqswcyt .usergao{width:450px;height:20px; margin-top:60px; margin-left:255px;font-size:13px;color:#3c90cc;font-family:"微软雅黑","黑体",tahoma,"宋体"; text-decoration:none; padding-left:25px; overflow:hidden; }

.userqswcyt .usergao a{color:#3c90cc;text-decoration:none;}

.userqswcyt .usergao a:hover{color: #FF0000;}

.userqswcyt .userqswcnav{width:990px;height:30px;padding:0px;margin:0px auto;background-color:#5eafe0;font-size:13px; ;text-align:center;font-family:"微软雅黑","黑体",tahoma,"宋体";}

.userqswcyt .userqswcnav ul{list-style:none;padding:0px;margin:0px;}

.userqswcyt .userqswcnav ul li{float:left;display:block;width:80px;height:30px;line-height:28px;}

.userqswcyt .userqswcnav ul li a{display:block;width:80px;height:30px;background-color:#5eafe0;text-decoration:none;color:white;}

.userqswcyt .userqswcnav ul li a:hover{ background:url(http://img10.360buyimg.com/imgzone/g15/M02/10/07/rBEhWlJg55sIAAAAAAALGDvRpLUAAETfQNWxIQAAAsw653.png);text-decoration:none;}

.userqswcyt .userqswcnav .userkfzx {float:right;margin-top:4px;margin-right:10px;display:inline;}

.userqswcyt .userqswcnav .userkfzx a{color:#ffffff;text-decoration:none;}

.userqswcyt .userqswcnav .userkfzx a:hover{color:white;}</style>

<div>

<div>

</div>

<div>

<ul>

<li>

<a href="http://ccyz888.jd.com/" target="_blank">首页</a>

</li>

<li>

<a href="http://mall.jd.com/shopWare-35641-557358-0-5-1.html" target="_blank">薇姿</a>

</li>

<li>

<a href="http://ccyz888.jd.com/view_search-110554-557362-1-0-20-1.html" target="_blank">理肤泉</a>

</li>

<li>

<a href="http://ccyz888.jd.com/view_search-110554-557446-1-0-20-1.html" target="_blank">雅漾</a>

</li>

<li>

<a href="http://ccyz888.jd.com/view_search-110554-557482-1-0-20-1.html" target="_blank">芙丽芳丝</a>

</li>

<li>

<a href="http://ccyz888.jd.com/view_search-110554-557445-1-0-20-1.html" target="_blank">丝塔芙</a>

</li>

<li>

<a href="http://ccyz888.jd.com/view_search-110554-557462-1-0-20-1.html" target="_blank">米洛医生</a>

</li>

<li>

<a href="http://ccyz888.jd.com/view_search-110554-842862-99-0-24-1.html" target="_blank">薇诺娜</a>

</li>

</ul>

<div>

</div>

</div>

</div>

大功告成，一下预览看一下效果图吧！

当然如果你的美工很懂代码，也可以继续优化店招页头，可以这样

中间部分可以为广告图片，也可以滚动文字！更多京东店铺装修，都可以直接@我

文章TAG：