大家好!我正在努力学习如何在html 5和css3中创建好看的菜单。由于我对这些语言的经验很少,我很快发现我可能错过了菜单背后的逻辑。这个线程的想法是确保我理解(或在这个线程之后理解)菜单的逻辑以及如何样式化它们。
将分为两部分,第二部分将重点介绍编码本身,第一部分将重点介绍理论。
好的,所以我读到/发现,每个菜单的想法基本上是一个自定义样式的列表。到目前为止,一切都很好,但我不明白的是,到底有多少格式化是通过样式化<<元素中元素的样式化做了多少(和什么)李>。说到这些元素内部的内容,我发现很多人更喜欢使用元素而不是按钮。这是一种标准还是风格偏好?使用<有什么好处吗?A>元素?
我认为这涵盖了理论,现在是实际的代码。我根据自己的想法,从零开始做了一个小菜单。它的某些部分不工作,例如css的li:last-child
和li:first-child
部分。
1)我想知道错误在哪里。我很想知道如何改进这段代码。
下面是整个源代码,里面有一些注释:
<!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>
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/