-
制作一個產(chǎn)品登錄頁
index.html
<!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;
}
#header-img{
margin:65px 0px 0px 50%;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<ul class="nav-link1">
<li><a class="nav-link" href="#info">專輯介紹</a></li>
<li><a class="nav-link" href="#all">歌曲詳情</a></li>
<li><a class="nav-link" href="#other">已出專輯</a></li>
</ul>
</nav>
<div>
<img id="header-img" src="https://d.ifengimg.com/w536_h535_q90_webp/x0.ifengimg.com/res/2021/19FD5A0AB6AEF3DB5B8EB3106948E823D374EE67_size336_w536_h535.png" width=200 alt="專輯封面" >
</div>
</header>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label>登陸郵箱：</label>
<input name="email" id="email" type="email" placeholder="郵箱格式：xxxxx@163.com">
<input id="submit" type="submit" value="提交">
</form>
<video id="video" src="" width="400" controls></video>
<div id="jump">
<h2 id="info">專輯介紹</h2>
<p>《呼吸之野》是許嵩的第八張音樂專輯寒亥，共收錄10首歌曲蔗牡。該專輯于2021年5月14日全網(wǎng)發(fā)布，由許嵩擔任制作人涯雅。</br>
2021年12月25日矩乐，該專輯中的歌曲《烏鴉》獲得第15屆音樂盛典咪咕匯年度十大金曲的獎項送漠。</p>
<h2 id="all">歌曲詳情</h2>
<table border="1" style="width: 500px;">
<!--tr表示行-->
<!--td表示列-->
<tr>
<td>序號</td>
<td>歌名</td>
</tr>
<!--占n行-->
<tr>
<td><b>01</b></td>
<td><i>《烏鴉》</i></td>
</tr>
<tr>
<td><b>02</b></td>
<td><i>《假摔》</i></td>
</tr>
<tr>
<td><b>03</b></td>
<td><i>《科幻》</i></td>
</tr>
<tr>
<td><b>04</b></td>
<td><i>《萬古》</i></td>
</tr>
<tr>
<td><b>05</b></td>
<td><i>《冰柜》</i></td>
</tr>
<tr>
<td><b>06</b></td>
<td><i>《超市》</i></td>
</tr>
<tr>
<td><b>07</b></td>
<td><i>《隔代》</i></td>
</tr>
<tr>
<td><b>08</b></td>
<td><i>《野人》</i></td>
</tr>
<tr>
<td><b>09</b></td>
<td><i>《三尺》</i></td>
</tr>
<tr>
<td><b>10</b></td>
<td><i>《龐貝》</i></td>
</tr>
<tr>
<td rowspan="2"><b>vae</b></td>
<td><i>1986-05-14</i></td>
</tr>
<tr>
<td><b>yyds</b></td></tr>
</table>
<h2 id="other">其他專輯-發(fā)布時間</h2>
<ul>
<li>《自定義》2009-01-10</li>
<li>《尋霧啟示》2010-01-06</li>
<li>《蘇格蘭沒有底》2011-04-01</li>
<li>《夢游計》2012-07-11</li>
<li>《不如吃茶去》2014-08-23</li>
<li>《青年晚報》2016-06-28</li>
<li>《尋寶游戲》2018-07-12</li>
<li>《呼吸之野》2021-05-14</li>
<li>....</li>
</ul>
</div>
</body>
</html>
styles.css
#nav-bar{
width: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
background-color: #333;
z-index: 2;
}
.nav-link1{
list-style-type: none;
display: flex;
flex-direction:row;
}
.nav-link{
display: block;
color: #fff;
padding: 1px 18px;
text-decoration: none;
}
.nav-link:hover{
background-color: #ddd;
color: black;
}
#video{
position: absolute;
margin:55px 0px 0px 55%;
display: block;
}
#form{
margin:15px 0px 0px 55%;
position: absolute;
display: block;
}
#email{
border-radius:10px;
}
#submit{
border-radius:5px;
background:lightyellow;
}
#jump{
diaplay: block;
margin:320px 0px 0px 50%;
}
#form>label{
color:#567;
}
@media screen and(maxwidth: 300px)
{
html{
font-size:20px;
}
}
@media screen and(minwidth: 50px)
{
html{
font-size:10px;
}
}
-
制作一個技術文檔頁面
需求：
- 你能看見一個 id="main-doc" 的 main元素漏策，它包含頁面的主要內容（技術文檔）胁镐。
- 在 #main-doc 元素內圾另，我能看見至少 5 個 section 元素霸株，每個元素都有一個 class 為 main-section。 應存在至少 5 個這樣的元素集乔。
- 每個 .main-section 中的第一個元素應該是 header 元素去件，其中包含描述該部分主題的文本。
- class 為 main-section 的每個 section 元素應該有一個與包含在其中的每個 header 的文本相對應的 id扰路。 所有空格都應該被替換為下劃線（例如尤溜，包含標題 “JavaScript and Java” 的 section 應有一個相應的 id="JavaScript_and_Java"）。
- 所有 .main-section 元素總計（不是每個）包含至少 10 個 p 元素汗唱。
- 所有 .main-section 元素總計（不是每個）包含至少 5 個 code 元素宫莱。
- 所有 .main-section 元素總計（不是每個）包含至少 5 個 li 元素。
- 你能看見一個 id="navbar" 的 nav 元素哩罪。
- navbar 元素應包含一個 header 元素授霸，其中包含描述技術文檔主題的文本。
- 此外际插，導航欄應包含 class 為 nav-link 的鏈接元素（a）碘耳。 每個 class 為 main-section 的元素都需要有一個。
- #navbar 中的 header 元素必須在任何鏈接 (a) 之前框弛。
- class 為 nav-link 的每個元素都應該包含每個 section 的 header 文本對應的文本（例如辛辨，如果你有一個 “Hello world” 部分/標題，你的導航欄應該有一個包含文本 “Hello world” 的元素）功咒。
- 當你點擊一個 navbar 元素時愉阎，頁面應該導航到 main-doc 元素的相應部分（例如，如果你點擊包含文本 “Hello world” 的 nav-link 元素力奋，頁面將導航到一個帶有對應 header 和 id 的 section 元素）榜旦。
- 在常規(guī)尺寸的設備上（筆記本電腦、臺式機）景殷，帶有 id="navbar" 的元素應該顯示在屏幕左側溅呢，并且始終對用戶可見澡屡。
你的技術文檔應該使用至少一個媒體查詢。
index.html
