断断续续的学了些前端，今天开始写写代码，就当是记录一下自己前端的成长过程
效果：
写了点css，实现了简单的前端页面的跳转
文件目录
代码如下：
styles.css
body{
margin: 0;
padding: 0;
}
header{
background-color: black;
color: white;
/* display: flex; */
margin: 0;
padding: 0;
}
section{
background-color: white;
color: black;
/* display: flex; */
margin: 0;
padding: 30px;
display: flex;
/* flex-direction: row; */
}
div{
background-color: rgb(87, 86, 86);
color: white;
margin: auto;
width: 100px;
}
footer{
background-color: black;
color: white;
padding: 20px;
}
li{
/* background: rgb(122, 117, 117); */
/* margin: 0; */
padding: 0;
/* display: inline-block; */
/* margin: 0 20px 0 0; */
margin-right: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skl练习</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Now</a></li>
<li><a href="Trommer.html">Trommer</a></li>
<li><a href="Fiture.html">Fiture</a></li>
</ul>
</nav>
<h1>skl练习</h1>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<section>section2</section>
<footer>footer</footer>
</body>
</html>Trommer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skl练习</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Now</a></li>
<li><a href="Trommer.html">Trommer</a></li>
<li><a href="Fiture.html">Fiture</a></li>
</ul>
</nav>
<h1>Trommer Page</h1>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<section>section2</section>
<footer>footer</footer>
</body>
</html>Fiture.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skl练习</title>
<link rel="stylesheet" href="styles.css">
</head>
<body >
<header>
<nav>
<ul>
<li><a href="index.html">Now</a></li>
<li><a href="Trommer.html">Trommer</a></li>
<li><a href="Fiture.html">Fiture</a></li>
</ul>
</nav>
<h1>Fiture </h1>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<section>section2</section>
<footer>footer</footer>
</body>
</html>
