最近有站长反映，觉得界面头部和导航样式比较单一，想要自己设计，做得更加个性美观。

　　对此，站长辛辣科技为大家带来了一套超级简便的教程，快来看！

　　效果演示说明：

　　想要获得完整效果演示或购买，在【云商店】搜索“分享旅行购物社群电商模板”既可！

　　制作方法

　　1.选择默认头部导航样式

　　选择第五个样式。

　　2.隐藏头部

　　关闭显示头部勾选，保存。

　　3.添加HTML组件

　　在主导航下方添加HTML组件

　　4.自定义主导航样式

　　效果代码一键get：

　　.mod-nav-theme.t5.line {

　　position: fixed;

　　top: 0; /* 顶部位置固定*/

　　background: #F9F9F9;

　　border-bottom: none; /* 去掉导航条底部边框效果*/

　　box-shadow: 0px 1px 15px 0px rgba(167, 167, 167, 0.50); /* 导航条底部边框阴影效果*/

　　width: 100%;

　　z-index: 99; /* 导航栏层重叠顺序*/

　　}

　　5.添加自定义头部

　　继续在刚才的HTML组件中添加自定义内容DIV布局和CSS样式，

　　效果代码一键get：

　　/* 自定义头部样式*/

　　.header_search {

　　background: #fc5365;

　　height: 45px;

　　line-height: 45px;

　　top: 0;

　　margin: 0;

　　box-sizing: border-box;

　　width: 100%;

　　padding: 8px 0;

　　position: relative;

　　z-index: 100; /* 值大于主导航条的层值*/

　　}

　　.header_search_left {

　　width: 15%;

　　height: 29px;

　　line-height: 29px;

　　float: left;

　　display: inline;

　　text-align: center;

　　}

　　.header_search_right {

　　width: 15%;

　　height: 29px;

　　line-height: 29px;

　　float: right;

　　display: inline;

　　text-align: center;

　　}

　　.header_search_form {

　　float: left;

　　width: 70%;

　　height: 29px;

　　line-height: 29px;

　　background-color: rgba(0, 0, 0, 0.13);

　　border-radius: 50px;

　　display: inline;

　　color: #fff;

　　font-size: 16px;

　　text-align: center;

　　}

　　.header_search_form i {

　　display: inline;

　　font-size: 20px;

　　vertical-align: middle;

　　}

　　/* 自定义头部布局内容*/

　　您的快站首页地址">

　　左侧logo图标地址" width="32" height="32">

　　本页面地址/#search-middle">

　　搜你喜欢

　　自定义链接地址">

　　右侧图标地址" width="20" height="20">

　　/* 以上链接地址根据自己的需求自定义*/

　　到这里，一个自定义的崭新的头部就已经实现了，但是还没完，开奖，因为自定义的搜索框是没有效果的，还需要在页面添加一个搜索组件。

　　6.在页面最下方添加一个搜索组件

　　这个组件的位置和样式可以按照自己的整体风格来选择设计。

　　搜索条的代码是什么呢？

　　在页面插入一个搜索组件，修改一下搜索链接即可。

　　快站锦囊现全面征稿！

　　不管是建站技巧、运营经验，还是涨粉新玩法，atv，统统到快站哥的碗里来！如果投稿被采纳，【快站大学】有两个超大版的广告位，即刻属于你！

　　投稿方式

　　添加QQ：429654650为好友

　　方法一：锦囊发表在您自己站点的快文或社区中，将链接发给工作人员。

　　方法二：将锦囊以文档的形式发送给工作人员。