-
制作一个产品登录页
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日全网发布，由许嵩担任制作人。</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">其他专辑-发布时间</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 元素）。
- 在常规尺寸的设备上（笔记本电脑、台式机），带有 id="navbar" 的元素应该显示在屏幕左侧，并且始终对用户可见。
你的技术文档应该使用至少一个媒体查询。
index.html
