断断续续的学了些前端,今天开始写写代码,就当是记录一下自己前端的成长过程
效果:
写了点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>