静态网页设计——清雅古筝网(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> 勾抹之间,聆听心弦</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> <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
具体的代码也在该链接下。
相关文章:
静态网页设计——清雅古筝网(HTML+CSS+JavaScript)
前言 声明:该文章只是做技术分享,若侵权请联系我删除。!! 感谢大佬的视频: https://www.bilibili.com/video/BV1T64y1K7Zn/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术:HTMLCSSJS(…...
实战Flink Java api消费kafka实时数据落盘HDFS
文章目录 1 需求分析2 实验过程2.1 启动服务程序2.2 启动kafka生产 3 Java API 开发3.1 依赖3.2 代码部分 4 实验验证STEP1STEP2STEP3 5 时间窗口 1 需求分析 在Java api中,使用flink本地模式,消费kafka主题,并直接将数据存入hdfs中。 flin…...
爬虫与反爬-localStorage指纹(某易某盾滑块指纹检测)(Hook案例)
概述:本文将用于了解爬虫中localStorage的检测原理以及讲述一个用于检测localStorage的反爬虫案例,最后对该参数进行Hook断点定位 目录: 一、LocalStorage 二、爬虫中localStorage的案例(以某盾滑块为例) 三、如何…...
聊一聊 webpack 和 vite 的开发服务代理的问题
webpack 和 vite webpackVite重新编辑的问题 changOrigin: true如何定义 /api ? webPack And Vite 都是两个比较好用的打包工具,尤其是 Vite, 几几年流行忘记了,特色就是服务启动极快,实现预加载,感觉 webPack 要比 Vite 要复杂一…...
【鸿蒙4.0】安装DevEcoStudio
1.下载安装包 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者华为鸿蒙DevEco Studio是面向全场景的一站式集成开发环境,,在鸿蒙官网下载或升级操作系统开发工具DevEco Studio最新版本,SDK配置和下载,2.1支持Mac、Windows操作系统。…...
[概率论]四小时不挂猴博士
贝叶斯公式是什么 贝叶斯公式是概率论中的一个重要定理,用于计算在已知一些先验信息的情况下,更新对事件发生概率的估计。贝叶斯公式的表达式如下: P(A|B) P(B|A) * P(A) / P(B) 其中,P(A|B)表示在事件B发生的条件下事件A发生的概…...
算法通关村第二十关-黄金挑战图的常见算法
大家好我是苏麟 , 今天聊聊图的常见算法 . 图里的算法是很多的,这里我们介绍一些常见的图算法。这些算法一般都比较复杂,我们这里介绍这些算法的基本含义,适合面试的时候装*,如果手写,那就不用啦。 图分析算法…...
服务器内存不足怎么办?会有什么影响?
服务器内存,也被称为RAM(Random Access Memory),是一种临时存储设备,用于临时存放正在运行的程序和数据。它是服务器上的超高速存储介质,可以快速读取和写入数据,提供给CPU进行实时计算和操作。…...
GPT实战系列-简单聊聊LangChain
GPT实战系列-简单聊聊LangChain LLM大模型相关文章: GPT实战系列-ChatGLM3本地部署CUDA111080Ti显卡24G实战方案 GPT实战系列-Baichuan2本地化部署实战方案 GPT实战系列-大话LLM大模型训练 GPT实战系列-探究GPT等大模型的文本生成 GPT实战系列-Baichuan2等大模…...
【读书笔记】《白帽子讲web安全》浏览器安全
目录 第二篇 客户端脚本安全 第2章 浏览器安全 2.1同源策略 2.2浏览器沙箱 2.3恶意网址拦截 2.4高速发展的浏览器安全 第二篇 客户端脚本安全 第2章 浏览器安全 近年来随着互联网的发展,人们发现浏览器才是互联网最大的入口,绝大多数用户使用互联…...
海外服务器2核2G/4G/8G和4核8G配置16M公网带宽优惠价格表
腾讯云海外服务器租用优惠价格表,2核2G10M带宽、2核4G12M、2核8G14M、4核8G16M配置可选,可以选择Linux操作系统或Linux系统,相比较Linux服务器价格要更优惠一些,腾讯云服务器网txyfwq.com分享腾讯云国外服务器租用配置报价&#x…...
Linux 编译安装 Nginx
目录 一、前言二、四种安装方式介绍三、本文安装方式:源码安装3.1、安装依赖库3.2、开始安装 Nginx3.3、Nginx 相关操作3.4、把 Nginx 注册成系统服务 四、结尾 一、前言 Nginx 是一款轻量级的 Web 服务器、[反向代理]服务器,由于它的内存占用少…...
Oracle文件自动“减肥”记
📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…...
【csharp】抽象类与接口有哪些不同?什么时候应该使用抽象类?
抽象类与接口有哪些不同? 抽象类和接口是在面向对象编程中两个不同的概念,它们有一些重要的区别。以下是抽象类和接口的主要不同点: 抽象类(Abstract Class): 成员类型: 抽象类可以包含抽象方…...
最新-mybatis-plus 3.5分页插件配置
mybatis-plus 3.5分页插件配置 前提 1.项目不是springboot, 是以前的常规spring项目 2.mp 从3.2升级到3.5,升级后发现原本的分页竟然不起作用了,每次查询都是查出所有 前后配置对比 jar包对比 jsqlparser我这里单独引了包,因为版本太低…...
案例098:基于微信小程序的电子购物系统的设计与实现
文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…...
亚信安慧AntDB数据库:数字化时代的数据库创新引领者
AntDB数据库以其卓越的创新能力,集中体现在融合统一与实时处理两大关键领域。作为一款服务全国超过10亿用户的分布式数据库,其独特之处在于长期积累的经验、多样性的支持能力、快速响应的数据处理速度以及卓越的系统稳定性。AntDB不仅仅是一个数据库系统…...
【MySQL】关于日期转换的方法
力扣题 1、题目地址 1853. 转换日期格式 2、模拟表 表: Days Column NameTypedaydate day 是这个表的主键。 3、要求 给定一个Days表,请你编写SQL查询语句,将Days表中的每一个日期转化为"day_name, month_name day, year"格式的字符串…...
Ubuntu 虚拟机挂接 Windows 目录
Windows 共享目录 首先 Windows 下共享目录 我这里偷懒直接直接 Everyone ,也可以指定用户啥的 Ubuntu 挂接 挂接命令,类似如下: sudo mount -o usernamefananchong,passwordxxxx,uid1000,gid1000,file_mode0644,dir_mode0755,dynperm //…...
机器学习模型可解释性的结果分析
模型的可解释性是机器学习领域的一个重要分支,随着 AI 应用范围的不断扩大,人们越来越不满足于模型的黑盒特性,与此同时,金融、自动驾驶等领域的法律法规也对模型的可解释性提出了更高的要求,在可解释 AI 一文中我们已…...
DeepSeek-OCR实战教程:批量处理脚本编写与异步解析任务队列设计
DeepSeek-OCR实战教程:批量处理脚本编写与异步解析任务队列设计 1. 学习目标与场景引入 如果你正在处理大量的文档图片,比如扫描的合同、发票、报告或者历史档案,一张张上传到DeepSeek-OCR界面手动处理,不仅效率低下,…...
FINCH聚类算法实战:5分钟搞定无参数聚类(附Python代码)
FINCH聚类算法实战:5分钟搞定无参数聚类(附Python代码) 在数据科学和机器学习领域,聚类分析一直是探索性数据分析的重要工具。传统聚类方法如K-means、DBSCAN等虽然广泛应用,但都面临一个共同挑战:需要人工…...
SEO_全面介绍SEO从入门到精通的关键知识点
<h2>什么是SEO?</h2> <p>SEO(Search Engine Optimization,搜索引擎优化)是一套通过优化网站内容和结构,以提高其在搜索引擎结果页面(SERP)中的自然排名的技术和策略。SEO不仅…...
nli-distilroberta-base实际项目:高校招生简章关键条款与考生疑问逻辑关系库构建
nli-distilroberta-base实际项目:高校招生简章关键条款与考生疑问逻辑关系库构建 1. 项目背景与需求 高校招生简章通常包含大量专业条款和政策说明,每年都会收到大量考生关于条款理解的咨询。传统的人工解答方式存在几个痛点: 效率低下&am…...
NRF_LOG时间戳配置全攻略:从sdk_config.h修改到RTT Viewer显示(附常见问题排查)
NRF_LOG时间戳配置全攻略:从sdk_config.h修改到RTT Viewer显示(附常见问题排查) 在嵌入式开发中,日志系统是调试和问题排查的重要工具。对于使用Nordic Semiconductor芯片的开发者来说,NRF_LOG结合RTT Viewer提供了高效…...
企业邮箱安全必看:SPF、DKIM、DMARC 三件套配置实战(附常见错误排查)
企业邮箱安全必看:SPF、DKIM、DMARC 三件套配置实战(附常见错误排查) 当一封伪造CEO签名的钓鱼邮件成功进入财务部门邮箱时,企业面临的不仅是数据泄露风险——根据Verizon《2023年数据泄露调查报告》,83%的商务邮件入侵…...
FlowState Lab少样本学习效果:仅用10条数据生成特定波动模式
FlowState Lab少样本学习效果:仅用10条数据生成特定波动模式 1. 引言:当数据稀缺遇上智能生成 想象一下这样的场景:你手里只有10条设备振动波形数据,却需要分析上千种可能的故障模式。传统方法可能需要收集数月甚至数年的运行数…...
WSABuilds vs 官方WSA:性能测试与功能对比,谁才是安卓模拟器之王?
WSABuilds vs 官方WSA:性能测试与功能对比,谁才是安卓模拟器之王? 【免费下载链接】WSABuilds Run Windows Subsystem For Android on your Windows 10 and Windows 11 PC using prebuilt binaries with Google Play Store (MindTheGapps) an…...
【PyCon 2024核心议题首发】:CPython 3.13 asyncio重构内幕——原生任务取消语义、零拷贝Socket API与异步GC优化前瞻
第一章:PyCon 2024与CPython 3.13异步演进全景图PyCon 2024于五月在匹兹堡圆满落幕,其核心议题之一正是CPython 3.13的异步能力跃迁。作为首个将async/await语义深度融入解释器底层的Python版本,3.13引入了原生协程调度优化、零拷贝内存视图支…...
all-MiniLM-L6-v2保姆级教程:Ollama模型卸载、版本回滚与缓存清理指南
all-MiniLM-L6-v2保姆级教程:Ollama模型卸载、版本回滚与缓存清理指南 1. 为什么需要管理你的Ollama模型? 你可能已经用Ollama成功部署了all-MiniLM-L6-v2,体验了它轻量高效的句子嵌入能力。但用久了你会发现,硬盘空间在悄悄减少&…...
