提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
本文是基于html、css设计的web大作业，含代码和设计报告。
一、选题
中国传统乐器介绍网站，有首页、传统乐器、乐器分类、乐种、联系、留言六个界面。采用统一的css样式。
二、具体实现
1.首页
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>202008060219</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="content">
<div class="search"><input type="text" placeholder="搜索"></div>
</div>
</header>
<nav>
<ul class="nav content">
<li class="nav-item active"><a href="index.html">首页</a></li>
<li class="nav-item"><a href="ctyq.html">传统乐器</a></li>
<li class="nav-item"><a href="yqfl.html">乐器分类</a></li>
<li class="nav-item"><a href="yz.html">乐种</a></li>
<li class="nav-item"><a href="lianxi.html">联系</a></li>
<li class="nav-item"><a href="ly.html">留言</a></li>
</ul>
</nav>
<main>
<div class="txt ">
<h1>传统乐器</h1>
<b>古琴</b>
<p>中国最古老的弹拨乐器，有三千多年的历史，被誉为琴棋书画四艺之首,在古代是地位最崇高的乐器。古琴充满着传奇的象征色彩：长3尺6寸5分，代表一年有365天；13个徽位，代表一年的12个月及闰月。琴面弧形代表天，琴底为平象征地，为天圆地方。有西方音乐人评价：这个乐器的构造，是依据中国天与地之间关系的观念而设计的，使人联想到传说中只有天上神仙才能听得到的音乐。</p>
<img class="cen" src="images/5.jpg" alt=""> <b>瑟</b>
<p> 中国原始的丝弦乐器之一，共有二十五根弦。《诗经》中有记载窈窕淑女，琴瑟友之，我有嘉宾，鼓瑟鼓琴。瑟曾销声匿迹千年之久，而今“幽兰汉乐”将传说中的声音再次呈现于舞台之上，琴瑟合鸣，乐声如流水，如凤鸣，如南风，如月行，引我们走进大自然深深的芬芳里。
</p>
<b>箜篌</b>
<p> 中国古老的弹弦乐器，始于汉代，历史悠久；音域宽广、音色 柔美清澈，表现力强。唐时期曾用于西凉、龟兹、疏勒、高丽、天竺诸乐中。明代后失传达300年之久。</p>
<b>方响</b>
<p> 古代打击乐器，由十六块大小相同的长方形玉片组成，以厚薄不同定音高，分上下两层悬挂，用小铁锤敲击；出现于北周。隋唐时用于燕乐，后也用于宫廷雅乐，自宋代后渐少
</p>
<b>八音</b>
<p>
中国传统器乐吹打乐的一种。原为中国历史上最早的乐器科学分类法，西周时已将当时的乐器按制作材料，分为金（钟、镈）、石（磬）、丝（琴、瑟）、竹（箫、箎）、匏（笙、竽）、土（埙、缶）、革（鼗、雷鼓）、木（柷、敔）8类。</p>
<p>八音也指民间 器乐乐种。如山西五台山一带的八音会，所用乐器有管子、唢呐、海笛、笙、梅笛、箫、堂鼓、小鼓、大镲、小镲、大锣、云锣等；广西壮族的隆林八音乐队，使用的乐器共有 8件，它们是：横箫（笛子）一对，高胡、二胡各一把，小三弦一把，锣、鼓、钹各一副。南宁市邕宁壮族八音则主要由大唢呐、小唢呐、五孔笛、锣、鼓、钹、壮族乐鼓等组成。海南地区流行的海南八音源于潮州音乐，因使用8 类乐器而得名，即：弦（二胡、椰胡）、琴（月琴、扬琴、三弦）、笛（唢呐）、管（长、短喉管）、箫（横箫、直箫、洞箫）、锣、鼓、钹等；彝族八音所用乐器有二胡、环箫（无膜笛）各一对，以及牛角胡、五鍟（小锣）、鼓、钹等；仡佬族八音又名八仙，所用乐器有二胡、横箫（笛）各一对和五鍟、锣、鼓、钹等。</p>
</div>
</main>
<footer>中国传统乐器</footer>
</body>
</html>
运行截图：
2.个人主页
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国传统乐器</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="content">
<div class="search"><input type="text" placeholder="搜索"></div>
</div>
</header>
<nav>
<ul class="nav content">
<li class="nav-item active"><a href="index.html">首页</a></li>
<li class="nav-item"><a href="ctyq.html">传统乐器</a></li>
<li class="nav-item"><a href="yqfl.html">乐器分类</a></li>
<li class="nav-item"><a href="yz.html">乐种</a></li>
<li class="nav-item"><a href="lianxi.html">联系</a></li>
<li class="nav-item"><a href="ly.html">留言</a></li>
</ul>
</nav>
<main>
<div class="content ">
<div style="overflow: hidden;width: 100% ">
<aside>
<h2><em> About Me</em></h2>
<img src="images/1.jpg " alt=" " width="300px">
</aside>
<div class="message ">
<table class="jx" cellspacing="0">
<tr>
<th>姓名：</th>
<th class="ri">xxx</th>
</tr>
<tr>
<td>班级：</td>
<td class="ri">xxx</td>
</tr>
<tr>
<td>学号：</td>
<td class="ri">xxx</td>
</tr>
<tr>
<td>QQ：</td>
<td class="ri">xxxxxxxx</td>
</tr>
<tr>
<td>微信：</td>
<td class="ri">xxxxxxxx</td>
</tr>
<tr>
<td>E-mail：</td>
<td class="ri">xxxxxxxx</td>
</tr>
<tr>
<td>Phone：</td>
<td class="ri">xxxxxxxx</td>
</tr>
</table>
</div>
</div>
</div>
</main>
<footer>中国传统乐器</footer>
</body>
</html>
运行截图：
总结
源码（一共包含六个页面和一份设计报告）