web大作业设计
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
本文是基于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>
运行截图:
总结
源码(一共包含六个页面和一份设计报告)
本文来自博客园,作者:种星记,转载请注明原文链接:https://www.cnblogs.com/zhongxingji/p/17697238.html