浅说一下吧 这个小项目由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. Linux学习系列--如何在Linux中进行文件的管理

    文件 在常见的Linux的文件系统中,经常使用能了解到的文件管理系统是分为多个文件夹进行管理的. 如何查看文件路径 pwd ,在文件目录中,会有一个点(.)代表的是当前目录,两个点(..)代表的是当前 ...

  2. JS基础小练习

    入职薪水10K,每年涨幅入职薪水的5%,50年后工资多少? var sum = 10000; console.log(sum * (1 + 0.05 * 50)); 为抵抗洪水,战士连续作战89小时, ...

  3. linux 编译式安装apache

    apache的安装需要两个组件,APR对于Tomcat最大的作用就是socket调度 组件下载解压完成 ,讲两个组件解压包移动到apache的类库文件夹内 注:如果系统自带了apr和apr-util可 ...

  4. placeholder 设置字体颜色

    input::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } input:-moz-placeholder { col ...

  5. Charles 某音最新版本抓包环境搭建

    本文仅供学习交流使用,如侵立删! Charles 某音最新版本抓包环境搭建 操作环境 google nexus5x Android 8.1 Magisk 24.3 Douyin 17.3 kaliLi ...

  6. 【Meetup回顾】Apache DolphinScheduler在联通的实践和二次开发经验分享

    在由 openLooKeng 社区主办,Apahce DolphinScheduler社区.Apache Pulsar 社区.示说网协办的联合 Meetup 上,来自联通数字科技的王兴杰老师分享了Do ...

  7. java中使用 POI导出excel表格的简单实现

    大概流程分7步: 1.创建工作簿 --> 2.创建sheet表 --> 3.创建row行(建议使用循环) --> 4.用row行逐一创建单元格(建议使用循环) --> 5.单元 ...

  8. 1.5_HTML基础标签实战演练

    基本的 HTML 标签 HTML 标题 HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1>This is a headin ...

  9. 「题解报告」P3354

    P3354 题解 题目传送门 一道很恶心的树形dp 但是我喜欢 题目大意: 一片海旁边有一条树状的河,入海口有一个大伐木场,每条河的分叉处都有村庄.建了伐木场的村庄可以直接处理木料,否则要往下游的伐木 ...

  10. 关于 Math.random()生成指定范围内的随机数的公式推导

    关于 Math.random()生成指定范围内的随机数的公式推导 在 java 中,用于生成随机数的 Math 方法 random()只能生成 0-1 之间的随机数,而对于生成指定区间,例如 a-b ...