浅说一下吧 这个小项目由h5和css还有js和jq写的

主题内容为个人音乐 博客等 首页一级导航栏 以及侧边栏 整合部分图标(侧边栏未添加收起操作 时间原因 会的朋友们可以自行添加一个动画就可以 在main.js中)

中间音乐部分为作者和歌词 点击播放的按钮可弹出对应的视频mv

视频mv均为酷狗音乐下载

文件夹部分:

css--->层叠样式表文件

main.css--->index.html(也就是主页面的样式)

reset.css--->覆盖浏览器默认的css样式

img--->存放页面所有的图片文件(.jpeg、.jpg、.png等图片)

js--->方便一些功能的实现

jquery.min.js--->jquery框架的js文件

main.js---> 页面点击 视频显示的实现

media--->存放页面播放的视频

看一下整体吧 图在下面

侧边栏的设计:

使用display:line-block布局

main部分: 添加了部分音乐播放

底部区域:

下载地址:https://download.csdn.net/download/u010654175/85612241

注意:因为该项目含有视频文件所以会比较大

声明:文章所使用所有的小图标均为可商用无版权图标;视频文件均为酷狗音乐下载 如有侵犯请联系我,我将及时删除内容。

个人音乐博客 h5、css和js等的更多相关文章

  1. 【转】H5+css布局+js+前端和移动端ui+其他汇总

    无意间发现一个博客比较好,由于内容比较多,就把链接转过来,先保存着方便看的时候看. 感谢博主“张果” +++++++++++++++++++++++++++++++++++++++++++++++++ ...

  2. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  3. 配置grunt进行css、js的检查、合并和压缩

    现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档 ...

  4. IE6、IE7、IE8的CSS、JS兼容

    Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题.原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收 ...

  5. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

  6. 项目中如果管理前端文件CSS和JS

    如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...

  7. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  8. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

  9. 你可能不知道的5种 CSS 和 JS 的交互方式

    翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接:  5 Ways that CSS and JavaScript Interact That You ...

随机推荐

  1. 开源一个自动整理B站UWP客户端软件进行批量下载的视频文件的小工具BiliVideosReoganizeHelper​

    ​ 大家都知道B站是一个很受欢迎的视频学习网站,上面有很多无私的up主上传了大量优秀的教学视频,在此向B站致敬,向广大UP主致敬. 有时,我们需要下载收藏一些视频,以防止以后找不到了.那么我们可以用B ...

  2. 天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_216 PWA(Progressive web apps,渐进式 Web 应用)使用现代的 Web API 以及传统的渐进式增强策略 ...

  3. Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理

    1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...

  4. [NCTF2019]SQLi-1||SQL注入

    1.打开之后首先尝试万能密码登录和部分关键词(or.select.=.or.table.#.-等等)登录,显示被检测到了攻击行为并进行了拦截,结果如下: 2.使用dirmap进行目录扫描,发现robo ...

  5. 业务可视化-让你的流程图"Run"起来(6.定时任务&Spring-Batch的集成)

    前言 首先,感谢大家对上一篇文章[业务可视化-让你的流程图"Run"起来(5.SpringBoot集成&微服务编排)]的支持. 分享一下近期我对这个项目的一些改进. 在项目 ...

  6. 暑期 2021 参与社区:新一代工作流调度——Apache DolphinScheduler

    在众多企业都在进行数字化转型的大背景下,大数据.人工智能等行业有着十分广阔的前景,其发展也可谓如火如荼.发展过程中这其中当然离不开数据采集.数据流通和数据价值挖掘等各种环节,而各环节的打通需要一个坚实 ...

  7. 如何有效管理产品生命周期(How to Effectively Manage a Product Lifecycle)

    本文翻译自文章:How to Effectively Manage a Product Lifecycle 文章原文链接:https://medium.com/design-bootcamp/how- ...

  8. postgresql用户与权限管理

    pg使用角色的概念管理数据库访问权限,角色是一系列相关权限的集合.为了管理方便,通常把一系列先关的权限赋予给一个角色,如果哪个用户需要这些权限,就把这些角色赋予给响应的用户. 由于用户也拥有一系列的相 ...

  9. matery添加加载动画

    1.在主题 /layout/_partial/目录新建一个loading-pages.ejs 内容如下: <style type="text/css" lang=" ...

  10. ARC116 A Odd vs Even (质因数分解,结论)

    题面 有 T T T 组数据,每次给出一个数 N N N ,问 N N N 的所有因数(包括 1 1 1 和 N N N)中奇因数个数和偶因数个数的关系(">"," ...