在CSS菜單中顯示徽標

-1

我想在我的導航菜單中放置一個徽標，如http://prntscr.com/8rwb4i。我嘗試了很多代碼，但是我無法實現它的功能。代碼可以在小提琴找到http://jsfiddle.net/askoc4qh/在CSS菜單中顯示徽標

body { 
 
\t width:960px; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t margin:5px auto; 
 
\t padding:0 auto; 
 
\t 
 
\t } 
 

 
ul { 
 
\t height:60px; 
 
    width:100%px; 
 
    margin:0 auto; 
 
    padding:0; 
 
    list-style-type:none; 
 
\t 
 
\t } 
 

 
li { 
 
\t float:left; 
 
\t width:240px; 
 
\t } 
 

 
ul a { 
 
\t color:black; 
 
\t text-decoration:none; 
 
\t font-size:19px; 
 
\t display:block; 
 
\t 
 
\t } 
 
\t 
 
ul li a { 
 
\t display:block; 
 
\t padding:20px 45px; 
 
\t line-height:1.0em; 
 
\t text-decoration:none; 
 
\t transition:500ms ease; 
 
} 
 
ul li ul { 
 
\t visibility: hidden; 
 
} 
 
\t 
 

 
ul a:hover { 
 
\t 
 
\t color:yellow; 
 
\t background-color:black; 
 
\t 
 
\t }

<div class="navigation"> 
 
\t <ul> 
 
\t <li><a href = 'index.html'>Home</a></li> 
 
\t <li><a href = 'media.html'>Media Design</a></li> 
 
\t <li><a href = 'innovatie.html'>Innovatieroutes</a> 
 
\t <li><a href = 'info.html'>Opleiding</a></li> 
 
\t <li><a href = 'info.html'>Fontys</a></li> 
 
\t <li><a href = 'info.html'>Toekomst</a></li> 
 
\t <li><a href = 'contact.html'>Contact</a></li> 
 
</ul> 
 
</div>

來源

2015-10-16 SmashingJummy

如果您希望您的標誌完美貼合到<li>，試試這個：

HTML

<div class="navigation"> 
    <ul> 
    <li><a href = 'index.html'>Home</a></li> 
    <li><a href = 'media.html'>Media Design</a></li> 
    <li><a href = 'innovatie.html'>Innovatieroutes</a> 
    <li><a href = 'info.html'>Opleiding</a></li> 
    <li><a href = 'info.html'>Fontys</a></li> 
    <li><a href = 'info.html'>Toekomst</a></li> 
    <li><a href = 'contact.html'>Contact</a></li> 
    <li><img src="https://shopsocially.com/wp-content/uploads/2014/10/GreyBackground-48.jpg"></li> 
    </ul> 
</div>

CSS

body { 
    width:960px; 
    font-family: 'Open Sans', sans-serif; 
    margin:5px auto; 
    padding:0 auto; 
} 

ul { 
    height:60px; 
    width:100%px; 
    margin:0 auto; 
    padding:0; 
    list-style-type:none; 
} 

li { 
    float:left; 
    width:240px; 
    height: 59px; 
    overflow: hidden; /*cuts the img*/ 
} 

ul a { 
    color:black; 
    text-decoration:none; 
    font-size:19px; 
    display:block; 
} 

ul li a { 
    display:block; 
    padding:20px 45px; 
    line-height:1.0em; 
    text-decoration:none; 
    transition:500ms ease; 
} 

ul li ul { 
    visibility: hidden; 
} 

ul a:hover {  
    color:yellow; 
    background-color:black; 
} 

img{ 
    width:100%; 
}

還有就是要提高你的問題的另一種方式，你可以刪除overflow: hidden;並設置：

img{ 
    width: 100%; 
    /*new line*/ 
    height: 100%; /*Doesn't cut your img*/ 
}

你也可以升ook jsfiddle

來源

2015-10-16 11:56:23

您可以在最後<li>添加的標誌像

<li><a href = 'info.html'>Toekomst</a></li> 
<li><a href = 'contact.html'>Contact</a></li> 
<li><a><img src="yourlogo.png"></a> </li>

jsfiddle

來源

2015-10-16 11:12:37

在CSS菜單中顯示徽標

回答

相關問題