测试布局
效果
代码目录：
代码
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>
<div class="header">
<h2>
测试布局效果
</h2>
</div>
<div class="link">
<ul>
<li>
<a href="#" class="actvte">
新博客
</a>
</li>
<li>
<a href="#">
往期博客
</a>
</li>
<li>
<a href="#">
日常吐槽
</a>
</li>
<li>
<a href="#">
我的歌唱
</a>
</li>
</ul>
</div>
<div class="main">
123
</div>
<div class="end">
结尾
</div>
</body>
</html>
CSS代码
.header
{
text-align: center;
width: 100%;
height: 20%;
background-color: tan;
}
.header h2
{
font-family: "Kaiti SC";
font-size: 40px;
color: #f8715f;
}
.link
{
width: 20%;
height: 500px;
background-color: #e0ffa9;
float: left;
}
.main
{
width: 80%;
height: 500px;
background-color: #9861ff;
float: left;
}
.end
{
width: 100%;
height: 10%;
background-color: #c7d2ce;
clear: both;
}
li a
{
display: block;
text-decoration: none;
color: #276fd2;
}
li a:hover
{
background-color: #7f40f8;
color: #bcf1ff;
}
.actvte
{
background-color: #d6ccf8;
color: rgba(0, 0, 0, 0.98);
}
ul
{
list-style-type: none;
height: 25px;
margin: 0;
padding: 0;
/*
全屏高度
*/
height: 100%;
position: fixed;
overflow: auto;/*如果导航栏多选项， 允许滚动*/
}
li
{
/*
li 内的元素居中
*/
text-align: center;
}
JS代码
/**
* 无
*/
