Question

我有2个问题。

第一：如何将徽标和品牌文字放入navbar中？我想要它在导航和内联的左端。

2nd：我希望它显示在“暴民菜单”的中心。

我尝试将其放在li标签上，但有人告诉我它不应该在那儿。因此，我一点也不知道该将其放在哪里，将使用什么标签以及如何将其插入到导航中。我已经弄清楚了将近2个星期，但我只是销毁了一些元素。

HTML：

<div id="fixed"> 
       <div id="search-wrap" class="wrap-top search-wrap">
          <div class="width">
              <ul class="clearfix">
                    <li ><i class="fa fa-search"></i> <input type='search' placeholder="Search..."></li>
                    <li id="li-3">Search</li>
                    <li id="li-4"> <i class="fa fa-times"></i> </li>
                </ul>
          </div>
       </div> 

        <div id="tags-wrap" class="wrap-top tags-wrap">
          <div class="width">
              <ul class="clearfix">
                   <li>tag#1</li>
                   <li>tag#2</li> 
              </ul>
              <div id="search-results"></div>
          </div>
       </div> 

       <div id="nav-wrap" class="wrap-top nav-wrap">
           <div class="width">
                <ul class="clearfix">
                    <li>Link#1<span>Sub-link#1</span></li>
                    <li>Link#2<span>Sub-link#2</span></li>
                    <li id="search-btn" class="s-desk"> <i class="fa fa-search"></i> </li>
                </ul>

                <i class="fa fa-reorder fa-2x menu-mob" id="menu-mob"></i>

            </div>
        </div>
    </div>
</div>

CSS：

#fixed{
    position:fixed;
    z-index:1000;
    width:100%; 
    top:0;
}
.wrap-top{
    height:70px;
    width:100%; 
    line-height:70px;
}

.wrap-top ul{
    position:relative; 
    width:100%;
    height:100%;
}

.wrap-top ul li{
    float:left;
    list-style:none;
    text-align:center;
    text-transform:uppercase;
    font-size:21px; 

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height:100%;
}
.width{
    max-width:800px;
    width:100%;
    margin: 0 auto;
    height:100%;
}

#search-wrap{background:#253444;}

.search-wrap{margin-top:-70px;}
.search-wrap.active{margin-top:0;}

#search-wrap ul li{
    width:75%;
    color:#3b5167;
    height:70px;        
    border-right: 1px solid #3b5167 ;
}

#search-wrap ul li:first-child{
    border-left: 1px solid #3b5167 ; 
    position:relative; 
}

#search-wrap ul li:first-child i{
    position:absolute;
    top:23px;
    left:3.5%;
    color:#3b5167;  
}
#search-wrap #li-3{width:15%; cursor:pointer; font-size:18px; color:#97a5b5;}
#search-wrap #li-4{ width:10%; cursor:pointer;}
#search-wrap #li-3:hover, #search-wrap #li-4:hover{ background:#2c3e50; color:#fff;}

#search-wrap input{
    text-align:left;
    width:100%;
    height:100%;
    border:none;
    outline:none;
    padding:4% 4% 4% 10%;   
    background:none;
    color:#fff;
    font-size:36px;
     font-family: 'Anton', sans-serif;
}

#search-wrap input:focus{   background:#2c3e50;}

input[type='search']::-webkit-search-decoration, 
input[type='search']::-webkit-search-cancel-button, 
input[type='search']::-webkit-search-results-button, 
input[type='search']::-webkit-search-results-decoration {
    display: none;
}

#search-wrap input::-webkit-input-placeholder{ color:#3b5167; opacity:1;}
#search-wrap input:-moz-placeholder{color:#3b5167; opacity:1;}
#search-wrap input::-moz-placeholder{color:#3b5167; opacity:1;}
#search-wrap input:-ms-input-placeholder {color:#3b5167; opacity:1;}


.menu-mob{display:none !important;}
#nav-wrap{  background:#fff; line-height:64px;}

.nav-wrap.active, .nav-wrap.active li{  height:50px;    line-height:50px;}
.nav-wrap.active ul li#search-btn{  line-height:50px !important;}
.nav-wrap.active ul li:before{display:none;}
.nav-wrap.active ul li span{display:none;}

#nav-wrap ul li{
    width:15%;
    cursor:pointer;
    color:#3b5167;  
    border-right: 1px solid #cad0d6 ;
    position:relative;
}

#nav-wrap ul li:first-child{border-left: 1px solid #cad0d6 ;}

#nav-wrap ul li#search-btn{
    width:10%; 
    line-height:70px;
}

#nav-wrap ul li:hover, 
#nav-wrap ul li.active {    
    color:#FFF; 
    background:#2c3e50;
}

.nav-wrap ul li span{
    display:block;
    line-height:0;
    font-size:9px;
    position:relative;
    top:-12px;  
    color:#415C76;
    font-family:Arial, sans serif;
}

.tags-wrap{
    height:0px;
    background:#3b5167; 
    overflow:hidden;
}

.tags-wrap.active{
    height:50px;    
}

.tags-wrap ul li{
    font-size:12px;
    color:#707f91;
    background:#2c3e50;
    line-height:20px;
    height:auto;
    padding:2px 0;
    width:8%;
    margin:0 1%;
    font-family:Arial, sans serif;
    text-transform:lowercase;
    cursor:pointer;
    font-weight:bold;
    opacity:0.8;
}

.tags-wrap ul li:hover{
opacity:1;  
color:#97a5b5;
}

#search-results{
text-align:center;
color:#fff; 
font-family:Arial, sans serif;
height:50px;
line-height:50px;
}

#search-results span{
font-weight:bold;   
}

.search-wrap, .tags-wrap, .nav-wrap, #first-row i{
    -webkit-transition: all 0.3s cubic-bezier(0, .68, .07, 1); 
    -moz-transition: all 0.3s cubic-bezier(0, .68, .07, 1); 
    transition: all 0.3s cubic-bezier(0, .68, .07, 1);
    -ms-transition: all 0.3s cubic-bezier(0, .68, .07, 1);  
}

我的徽标+品牌文字：

<div class='rbanner'>
    <a href='/'><img class='sr' align="left" border="0" height="70" src="mylogo.png" />
    <span class="sr1">Test</span><span class="sr2">Page</span></a>
</div>

样品预览：

Desktop and Mobile View

谢谢！

导航栏和生物菜单内带有品牌文字的徽标

0 个答案: