TanXinNiao
commented
3 years ago 导航菜单
菜单由一组链接组成。用 HTML中的列表元素（ ul 或 ol ）来分组链接不仅符合逻辑， 而且即使没有额外的 CSS也能适当显示链接的层次。默认情况下，由于列表项（ li ） 是块级元素，因此它们会上下堆叠。
纵向菜单
<nav class="list1">
<ul>
<li><a href="#">Alternative</a></li>
<li><a href="#">Country</a></li>
<li><a href="#">Jazz</a></li>
<li><a href="#">Rock</a></li>
</ul>
</nav>以上标记给每个列表项的文本都加了链接标签，让它们都变得可以点击。（每个链接 中的 # 是 URL 占位符，将来可以替换成真正的 URL。）
/*去掉默认的内边距和外边距*/
* {
margin: 0;
padding: 0;
}
/*设定本例中菜单的大小和位置*/
nav {
margin: 50px;
width: 150px;
}
/*给菜单加上边框*/
.list1 ul {
border: 1px solid #f00;
border-radius: 3px;
padding: 5px 10px 3px;
}
/*去掉项目符号并为链接添加间距*/
.list1 li {
list-style-type: none;
padding: 3px 10px;
}
/*“非首位子元素”选择符*/
.list1 li+li {
border-top: 1px solid #f00;
}
/*为链接添加样式*/
.list1 a {
text-decoration: none;
font: 20px Exo, helvetica,
arial, sans-serif;
font-weight: 400;
color: #000;
background: #ffed53;
}
/*悬停高亮*/
.list1 a:hover {
color: #069;
}前面的 CSS代码中有两点特别值得一说。首先，加粗的 li + li 选择符的意思是“任 何跟在 li 之后的 li ”。
当然，也有 实现相同效果的其他方法，比如：
/*给所有 li 上方添加一条边框*/
li {border-top:1px solid #f00;}
/*去掉第一个 li 上方的边框*/
li:first-child {border-top:none;}我为每个链接都加上了背景色，以便显示相应链接可点击区域的大小。 目前只有文本是可以点的，因为链接（ a ）是行内元素，它会收缩并包住 其中的文本。然而，更好的用户体验是让列表项所在的整行都能点击。
此外，在每个 li 元素的上方和下方，各有 3像素的内边距，导致链接文本与列表项 边框之间有了距离。正因为有了这段距离，当用户鼠标移动到链接间的间隙时，光 标会从“悬停于链接之上”时的小手形状，变成常规的箭头形状。
* {
margin: 0;
padding: 0;
}
nav {
margin: 50px;
width: 150px;
}
.list1 ul {
border: 1px solid #f00;
border-radius: 3px;
padding: 5px 10px 3px;
}
.list1 li {
list-style-type: none;
padding: 3px 10px;
}
.list1 li+li a a {
border-top: 1px solid #f00;
}
.list1 a {
display: block;
padding: 3px 10px;
textdecoration:
none;
font: 20px Exo, helvetica, arial, sansserif;
font-weight: 400;
color: #000;
background: #ffed53;
}
.list1 a:hover {
color: #069;
}把选择符 li + li 变成 li + li a ，就可以把上边框添加到列表项后面的列表项所包 含的链接元素上
而且，我还把内边距从列表项转移到了链接内部。这样，链接上下就互相接触了，中间没了间隙，鼠标 经过时光标状态也不会变了。最后，还要把每个链接的 display 属性设定为 block ， 这样链接元素的盒子就会由“收缩包围内容”变成“扩展填充父元素”。换句话说， 链接的可点击区域将扩大到整个列表行。
界面组件是我对 HTML 提供的常见用户界面（UI，User Interface）元素的称呼，包 括列表和表单等。实际上，下拉菜单和弹出层也是很常用的界面组件，只不过 HTML 没有提供对应的原生标签而已，本章也将介绍如何通过标记和样式实现它们。 除了介绍怎么实现这些界面组件，我还会告诉你怎么写代码才能更方便地重用这些 组件，省得每次都从头写。另外，我还会告诉你怎么把它们放到重用样式表中，以 备将来在不同的项目中派上用场。