Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article Directory
foreword
This article is a large web assignment based on html and css design, including code and design report.
1. Topics
The website for introducing traditional Chinese musical instruments has six interfaces: homepage, traditional musical instruments, musical instrument categories, musical genres, contact, and message. Use a unified css style.
2. Realization
1. Home page
The code is as follows (example):
<!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>
Run the screenshot:
2. Personal homepage
The code is as follows (example):
<!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>
Run the screenshot:
Summarize
Source code (a total of six pages and a design report)