0

再会！我正在尝试学习如何在 html 5 和 css3 中创建好看的菜单。由于我对这些语言的经验很少，我很快发现我可能错过了菜单背后的逻辑。这个线程的想法是确保我理解（或在这个线程之后理解）菜单的逻辑以及如何设置它们的样式。

它将分为两部分，第二部分将侧重于编码本身，第一部分将侧重于理论。

好的，所以我已经阅读/弄清楚了，每个菜单的想法基本上是一个具有自定义样式的列表。到目前为止一切都很好，但是我没有掌握的是，究竟有多少格式化是通过设置 <li> 元素的样式完成的，多少（以及什么）是通过设置 <li> 内的元素样式完成的。说到这些元素的内容，我看到很多人更喜欢使用 <a> 元素而不是按钮。这是标准还是风格偏好？使用 < 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>
4

1 回答 1

1

A 和 INPUT/BUTTON 的区别在于 A 不组成段落。如果它不只包含短语内容。我认为这通常是首选。

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

关于 :first-child 和 :last-child 伪类，您可能没有正确使用。

也许你正在尝试这样做：

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-21T10:05:25.583 回答