静态网页设计——清雅古筝网（HTML+CSS+JavaScript）

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：
https://www.bilibili.com/video/BV1T64y1K7Zn/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：对古筝进行简要介绍。

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，
或者点击下方的按钮可以手动切换图片。

代码：

<dir class="a"><!--头部模块开始--><div class="head"><h2><strong>清雅古筝</strong><em>&nbsp;&nbsp;&nbsp;&nbsp;勾抹之间，聆听心弦</em></h2><div class="b"><ul class="l"><li><a href="index.html" target="_self">网站首页</a></li><li><a href="html/历史溯源.html" target="_self">历史溯源</a></li><li><a href="html/基本构造.html" target="_self">基本构造</a></li><li><a href="html/古筝流派.html" target="_self">古筝流派</a></li><li><a href="html/代表作品.html" target="_self">代表作品</a></li><li><a href="html/乐器保养.html" target="_self">乐器保养</a></li><li><a href="html/社会影响.html" target="_self">社会影响</a></li><li><a href="html/用户注册.html" target="_self">用户注册</a></li></ul></div></div><div class="banner"><div class="banner_pic" id="banner_pic"><div class="current"><img src="images/banner1.jpg" alt="" /></div><div class="pic"><img src="images/banner2.jpg" alt="" /></div><div class="pic"><img src="images/banner3.jpg" alt="" /></div></div><ol id="button"><li class="current"></li><li class="but"></li><li class="but"></li></ol></div>

2、历史溯源

该页面使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。

代码：

<div class="c"><img src="../images/a1.jpg"><br/><p>古筝是一件古老的汉民乐器，战国时期盛行于秦地，已经有<span class="f">2500年以上</span>的历史了。有说法为，筝是战国时的一种戈器，用于竖着挥起打敌人，还有一句古话叫<span class="f">"筝横为乐，立地成兵"</span>。后来在上面加上琴弦，拨动时发现悦耳动听，于是发展成乐器。随着时间的推移，兵器也越来越轻便，筝这种体形庞大、质量不轻的兵器就被遗弃了。所以眼下人们见到的筝都是以乐器的形式出现的，形态优美，并附有装饰。</p></div>

3、代表作品

该页面以img标签嵌入图片+table表格标签嵌入整齐的文字的形式，对图片的内容进行了简要的介绍。

4、用户注册

该页面使用了form表单技术，可以填写并且提交文字信息，密码会被****字符代替，不会泄露密码，其他的名字则直接用明文的input标签。

代码：

<table class="d"><tr><td class="e">性别：</td><td><label for="boy"><input type="radio" name="sex" id="boy" />男</label>&nbsp;&nbsp;&nbsp;&nbsp;<label for="girl"><input type="radio" name="sex" id="girl" />女</label></td></tr><tr><td class="e">喜欢的音乐类型：</td><td><select><option>-请选择-</option><option>流行音乐</option><option>民谣</option><option>纯音乐</option><option>古典音乐</option></select></td></tr><tr><td class="e">所在城市：</td><td><select><option>-请选择-</option><option selected="selected">北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td class="e">自我介绍：</td><td><textarea cols="60" rows="8">将自己的喜欢分享给更多人吧</textarea></td></tr><tr><td colspan="2"><input type="button"  class="btn" value="注册" /></td></tr></table>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1T64y1K7Zn/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。