继续。
这个例子就叫“导航栏”:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
li a{
display: block;
padding: 8px 16px 8px 0;
width: 100px;
background: #c5c5c5;
text-decoration: blink;
color: #000000;
}
li a:hover{
background: #008000;
}
li .spc a{
float: left;
}
</style>
<body>
<ul>
<li><a href="https://www.bilibili.com/">哔哩哔哩</a></li>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><a href="https://www.csdn.net/">CSDN</a></li>
<li><a href="https://thwiki.cc/index.php?title=">THBwiki</a></li>
</ul>
</body>
</html>
运行结果:
就是一个普普通通的导航栏,光标移到其中一个就换个颜色强调一下。
想搞个竖着的就不漂浮就好了。