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

2019-04-18

             匕

自定义头部、滚动导航固定悬停

作者:辛辣科技

           阝               

                              廴              匚

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


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


效果演示说明:

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

制作方法

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

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


Q
&
A

搜索条的代码是什么呢?

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


售前咨询:0594-6688668 快站建设logo

Copyright By © 2019 isohu.top