- 制作一個技術(shù)文檔結(jié)構(gòu)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charest="utf-8">
<title>技術(shù)文檔</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>字符串變量聲明 需要加引號 單引號或者雙引號
//變量名不能以數(shù)字開頭，有字母數(shù)字下劃線組成
//字符串的拼接用+連接</p>
<li>數(shù)字類型</li>
//數(shù)字類型就不需要加引號
<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 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;
}
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
