了解html5和css3中菜单的工作原理_Html_Css

了解html5和css3中菜单的工作原理

html css

了解html5和css3中菜单的工作原理,html,css,Html,Css,你好！我试图学习如何在HTML5和css3中创建美观的菜单。由于我对这些语言的经验有限，我很快发现我可能缺少菜单背后的逻辑。此线程的目的是确保我理解（或在此线程之后理解）菜单的逻辑以及如何设置它们的样式它将分为两个部分，第二部分将侧重于编码本身，第一部分将侧重于理论好的，我已经读到/弄明白了，每个菜单的想法基本上都是一个带有定制风格的列表。到目前为止还不错，但我没有掌握的是，对元素的样式化到底完成了多少格式化，对中的元素进行了多少样式化（以及做了什么）。说到这些元素的内部，我发现很多人更喜欢

你好！我试图学习如何在HTML5和css3中创建美观的菜单。由于我对这些语言的经验有限，我很快发现我可能缺少菜单背后的逻辑。此线程的目的是确保我理解（或在此线程之后理解）菜单的逻辑以及如何设置它们的样式

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

好的，我已经读到/弄明白了，每个菜单的想法基本上都是一个带有定制风格的列表。到目前为止还不错，但我没有掌握的是，对

元素的样式化到底完成了多少格式化，对

中的元素进行了多少样式化（以及做了什么）。说到这些元素的内部，我发现很多人更喜欢使用元素而不是按钮。这是标准还是风格偏好？使用元素是否有优势

我认为这涵盖了理论，现在是实际代码。我从零开始用我能想到的做了一个小菜单。它的一些部分不起作用，例如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>


/*这将删除所有的填充、边距和轮廓*/
* {
保证金：0；
填充：0；
大纲：无；
}
/*这将设置列表本身的样式*/
保险商实验室{
列表样式：无；
利润率：3%40%；
}
李：第一个孩子{
边框左上半径：10px；
边框左下半径：10px；
}
李：最后一个孩子{
边框右上角半径：10px；
边框右下半径：10px；
}
李{
浮动：左；
}
/*这将设置按钮的样式*/
.钮扣样式{
宽度：60px；
高度：20px；
边界半径：1px；
}
/*这将使它们在悬停时改变颜色*/
.buttonStyle:悬停{
背景:#383；
/*此行：*/filter:progid:DXImageTransform.Microsoft.gradient（startColorstr='#F7F7F7'，endColorstr='#EDEDED'，GradientType=0）；
}

和输入/按钮的区别在于A不组成段落。如果不包含，则仅包含短语内容。我认为这通常是首选

关于：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; 
}