垂直导航
效果
代码目录:
代码
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新布局</title>
<link rel="stylesheet" href="../CSSFile/index.css" type="text/css">
</head>
<body>
<ul>
<li>
<a href="#" class="actvte">
<h3>
新博客
</h3>
</a>
</li>
<li>
<a href="#">
<h3>
往期博客
</h3>
</a>
</li>
<li>
<a href="#">
<h3>
日常吐槽
</h3>
</a>
</li>
<li>
<a href="#">
<h3>
我的歌唱
</h3>
</a>
</li>
</ul>
<div>
版权声明:本文为博主原创文章,转载请附上博文链接!
</div>
</body>
</html>
CSS代码
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f8715f;
position: fixed;
height: 100%;
overflow: auto;
}
li
{
display: inline;
}
li a
{
display: block;
color: #6ca3ff;
padding: 8px 16px;
text-decoration: none;
}
li a.header
{
background-color: #f89cab;
color: #285cf8;
}
li a.actvte
{
background-color: #f81c30;
color: #7643f8;
}
li a:hover:not(.actvte)
{
background-color: #e2bff8;
color: #f8e5c4;
}
div
{
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
JS代码
/**
* 无
*/