html头部导航中放入搜索框,一键get自定义头部和导航固定悬停代码

原标题：一键get自定义头部和导航固定悬停代码

作者：辛辣科技

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

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

效果演示说明：

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

制作方法

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.在页面最下方添加一个搜索组件

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

搜索条的代码是什么呢？

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

快站锦囊现全面征稿！

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

投稿方式

添加QQ：429654650为好友

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

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

责任编辑：