<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charest="utf-8">
<title>技术文档</title>
<style>
body{
background: linear-gradient(45deg,#ccccff,#cccfff,#ccffff);
text-align: center;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<div>
<section class="main-section" id="h1">
<header>h1</header>
<div style="background:blue;">
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
<p>wyy</p>
</div>
</section>
<section class="main-section" id="h2">
<header>h2</header>
<div><ul style="width:200px;background:grey;float:left"">
<li>1</li>
<li>2</li>
<li>3</li>
<li>5</li>
<li>8</li>
</ul><ul style="width:200px;background:grey;float:right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>5</li>
<li>8</li>
<ul>
</div>
</section>
<section class="main-section" id="h3">
<header>h3</header>
<div style="width:200px;background:white"> ddddd</div>
</section>
<section class="main-section" id="h4">
<header>h4</header>
<button name="button">re</button>
<code>code1</code>
<code>code2</code>
<code>code3</code>
<code>code4</code>
<code>code5</code>
</section>
<section class="main-section" id="h5">
<header>h5</header>
<div>4536251</b></div></section>
</div>
</main>
<nav id="navbar">
<header>Chapter</header>
<ul class="nav-link0">
<li><a class="nav-link" href="#h1">h1</a></li>
<li><a class="nav-link" href="#h2">h2</a></li>
<li><a class="nav-link" href="#h3">h3</a></li>
<li><a class="nav-link" href="#h4">h4</a></li>
<li><a class="nav-link" href="#h5">h5</a></li>
</ul>
</nav>
</body>
</html>
#navbar{
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
background-color: #333;
z-index: 2;
}
.nav-link0{
list-style-type: none;
display: flex;
flex-direction:column;
}
.nav-link{
display: block;
color: #fff;
padding: 18px 10px;
text-decoration: none;
}
.nav-link:hover{
background-color: #ddd;
color: black;
}
#navbar>header{
color:#d9d;
margin:10px 3px;
font-size:18px;
}
@media screen and(maxwidth: 450px)
{
html{
font-size:20px;
}
}
@media screen and(minwidth: 50px)
{
html{
font-size:10px;
}
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charest="utf-8">
<title>个人作品集展示页</title>
<style>
body{
background: linear-gradient(45deg,#ccccff,#cccfff,#ccffff);
text-align: center;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="welcome-section">
<h1>欢迎</h1>
</section>
<div id="projects">
<div class="project-tile" id="project01" align="center">
<ol style="width: 300px;height: 700px;background: red;"><li>弹框与控制台输出</li>
<p>// alert("我是一个弹出框！")</br>
// console.log("控制台输出测试语句，用户是看不到。"</p>
<li>变量声明</li>
<p>字符串变量声明 需要加引号 单引号或者双引号
//变量名不能以数字开头，有字母数字下划线组成
//字符串的拼接用+连接</p>
<li>数字类型</li>
//数字类型就不需要加引号
<li>布尔类型</li>
//布尔类型就两个值 一个为真，一个为假false
<li>判断变量的类型</li>
console.log("age: "+typeof age);//输出变量的类型
console.log("realname: "+typeof realname);</ol>
</div>
<div class="project-tile" id="project02">
<p style="width: 300px;height: 700px;background: red;">b</p>
</div>
<div class="project-tile" id="project03">
<p style="width: 100px;height: 700px;background: red; float:right" margin-right:10px;>c</p>
<p style="width: 100px;height: 700px;background: blue; padding: 25px 37px;;float:right";margin-right:10px;>c</p>
</div>
<div id="divnav">
<nav id="navbar">
<a href="#project01">project01</a></br>
<a href="#project02">project02</a></br>
<a href="#project03">project03</a></br>
</nav>
</div>
<a href="https://chinese.freecodecamp.org/VAE0514" id="profile-link" target="_blank" ><b>freeCodeCodeCamp </b></a>
</body>
</html>
#navbar{
position:fixed;
margin:0;
left:0;
top:0;
width:100%;
background-color: #333;
display: flex;
flex-direction:row;
}
#navbar>a{
color:#ddd;
text-decoration: none;
display: block;
padding:3px 40px 3px 10px;
}
#navbar>a:hover{
background:#bbb;
color: black;
}
#welcome-section{
margin:35px 0px 0px 50%;
}
#profile-link{
color:#1ff;
}
#profile-link:hover{
color:#ffc;
}
@media(max-width:450px){
html{
font-size:20px;
}
}
@media screen and(minwidth: 50px)
{
html{
font-size:10px;
}
}
