製作一個不同的開始，結束和休息的CSS菜單

嘿傢伙希望你能幫助我。製作一個不同的開始，結束和休息的CSS菜單

一直在這裏超過一個小時，它讓我瘋狂。

基本上我是一個大新手，當談到CSS，但我正在學習。此刻我試圖複製的，看起來像這樣的菜單：

actual menu

我至今看起來是這樣的（我知道的字體不同，但沒有問題）： enter image description here

正如你所看到的，我得到的背景，但我不知道如何使每個標籤之間的開始，結束和休息（黑線部分）。

此外，基本上，開始，休息，結束我有作爲.jpg圖像。不尋找html5或css3曲線等來做到這一點。只是想保持簡單:)。

這是我到目前爲止。如果你能給我一些提示，告訴我如何能夠做出剩餘的事情，並且如果我使用了一種不太好的方法，那麼建議一種更好的方法會很棒。

的HTML：

<div id="header"> 

      <ul id="header-list"> 
       <li class="header-list-item"> 
        <span class= "header-list-item-span" >Home</span> 

       </li> 

       <li class="header-list-item"> 
        <span class= "header-list-item-span" >About Us</span> 

       </li> 
       <li class="header-list-item"> 
        <span class= "header-list-item-span" >Services</span> 

       </li> 
      </ul> 

    </div><!--END OF HEADER -->

的CSS：

#header-list{ 
    display: table; 

position: relative; 
left: -3em; 

    table-layout: fixed; 
    margin-bottom: 0PX; 
    margin-top: 0; 
    margin-left: auto; 

} 

.header-list-item-span{ 
    background-image: url("img/menubody.jpg"); 
    color: white; 
    display: inline-block; 
    width: 5em; 
    font-size: large; 
    text-align: center; 
    padding: .2em; 
} 

.header-list-item{ 
    display: table-cell; 

height: 4.2em; 
    vertical-align: bottom; 

}

來源

2012-07-11 Ahmed-Anas

黑色的東西看起來像一個邊框。使用'border-left'和/或'border-right'和'margin'來玩遊戲，推開頂部和底部。 – 2012-07-11 14:52:34

所以你需要它作爲HTML5或HTML4？ – boyd 2012-07-11 14:53:34

我確實嘗試過，但問題是邊界一路下降，一切都上升了，但是這在頂部和底部之間存在一些差距。 – 2012-07-11 14:57:06

裹在另一個div的，UL和在裏面添加填充到左邊，你可以把你的起始圖像作爲背景。然後將正確的圖像作爲ul的背景並在右側添加填充。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
    <title></title> 
    <style> 
     div,li,ul,span { margin: 0;padding: 0;} 

     body { width: 700px; margin: 0 auto; } 

     #header 
     { 
      background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat; 
      padding-top: 50px; 
      position: relative; 
     } 

     #header .nav 
     { 
      background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat; 
      float: right; 
      width: 413px; 
      padding-left: 26px; 
      margin-right: 20px; 
     } 

     #header .nav .nav-wrapper 
     { 
      background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red; 
      padding-right: 26px; 
     } 

     #header ul 
     { 
      position: relative; 
      list-style: none; 
     } 
     #header ul li 
     { 
      background: red; 
      width: 120px; 
      float: left; 
      text-align: center; 
     } 
     #header ul li span 
     { 
      color: white; 
      padding: 8px 0px; 
     } 
     .clear { clear: both;} 
    </style> 
</head> 
<body> 


    <div id="header"> 
     <div class="nav"> 
      <div class="nav-wrapper"> 
       <ul> 
        <li><span>Home</span></li> 
        <li><span>About Us</span></li> 
        <li><span>Services</span></li> 
       </ul> 
       <div class="clear"></div> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 


</body>

來源

2012-07-11 14:54:39 amsprich

我試了一下，但是開始的圖像進入了左上角。我能夠在底部垂直對齊菜單，因爲ul是顯示：table和li是顯示：table-cell – 2012-07-11 15:14:48

嘗試背景：url（「img/img。jpg「）left bottom no-repeat; – amsprich 2012-07-11 15:24:02

給我幾分鐘，我會試着找出一個例子。:) – amsprich 2012-07-11 15:25:32

這裏有一個想法：

裹在div的ul。將第一個jpg設置爲該div的背景圖像，並添加一些padding-left以便圖像可見。將最後一張jpg設置爲ul的背景圖像，並添加一些padding-right，以便圖像也可以看到。

另外，在我看來，你應該通過更多地利用CSS選擇器來簡化你的HTML。

標題列表可以選擇爲div#header > ul。您可以用div#header > ul > li選擇您選擇的類別爲header-list-item的項目。我不認爲跨度實際上是必要的，您可以將樣式直接應用到li元素。

來源

2012-07-11 14:56:11 alf

製作一個不同的開始，結束和休息的CSS菜單

回答

相關問題