瞭解菜單在html5和css3中的工作方式

美好的一天！我正在嘗試學習如何在html 5和css3中創建漂亮的菜單。由於我對這些語言的小嚐試，我很快發現我可能會錯過菜單背後的邏輯。這個線程的想法是確保我理解（或在此線程後理解）菜單的邏輯以及如何設置它們的樣式。瞭解菜單在html5和css3中的工作方式

它將分爲兩部分，第二部分將重點放在編碼本身，第一部分將重點放在理論上。

好吧，所以我讀過/想通了，每個菜單的想法基本上都是自定義樣式的列表。到目前爲止這麼好，但是我沒能掌握的是，在設計元素時，完成多少格式化，在樣式化< li>內部元素時完成了多少（以及什麼）。說到這些元素裏面的內容，我發現很多人喜歡使用按鈕上方的元素。這是標準還是風格偏好？使用< a>元素有優勢嗎？

我認爲這涵蓋了原理，現在到實際的代碼。我從頭開始製作了一個小菜單，我可以找到。它的某些部分不起作用，例如css的li:last-child和li:first-child部分。

1）我很想知道錯誤在哪裏。 2）我有興趣知道如何改進此代碼。

下面是完整的源代碼，裏面有一些意見：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
<style> 
    /* this should remove all padding, margins and outlines*/ 
    * { 
    margin: 0; 
    padding: 0; 
    outline: none; 
} 
    /*This will style the list itself*/ 
     ul { 
     list-style: none; 
     margin: 3% 40%; 
    } 
     li:first-child { 
      border-top-left-radius: 10px; 
      border-bottom-left-radius: 10px; 
     } 
    li:last-child { 
     border-top-right-radius: 10px; 
     border-bottom-right-radius: 10px; 
    } 
    li { 
     float : left;  
     } 
    /*This will style the buttons*/ 
    .buttonStyle { 
     width : 60px; 
     height : 20px; 
     border-radius: 1px; 
     } 
    /*This should make them change their color when they are hovered*/ 
    .buttonStyle:hover { 
          background: #383;        
     /*this line :*/  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0); 
         } 

</style> 
</head> 
<body> 

    <!-- custom made list to store the buttons--> 
    <ul > 
     <!-- Just some buttons to make it look like a menu--> 
     <li><input type="button" class="buttonStyle" /></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
    </ul> 
</body> 
</html>

來源

2013-06-21 Bloodcount

A和INPUT之間的差額/按鈕是一個不化妝的段落。如果它不包含短語內容。我認爲這通常是首選。

https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories

關於：第一，兒童和：最後一個孩子僞類，你可能沒有使用正確的。

也許你正在試圖做到這一點：

li:first-child input { 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
} 
li:last-child input{ 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

http://jsfiddle.net/3uw6p/

來源

2013-06-21 10:05:25 Scipion

瞭解菜單在html5和css3中的工作方式

回答

相關問題