个人音乐博客 h5、css和js等
浅说一下吧 这个小项目由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等的更多相关文章
- 【转】H5+css布局+js+前端和移动端ui+其他汇总
无意间发现一个博客比较好,由于内容比较多,就把链接转过来,先保存着方便看的时候看. 感谢博主“张果” +++++++++++++++++++++++++++++++++++++++++++++++++ ...
- 纯css、js 的H5页面对接echarts
做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...
- 配置grunt进行css、js的检查、合并和压缩
现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是 http://www.gruntjs.net 这是个中文网站,有文档 ...
- IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题.原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收 ...
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...
- 项目中如果管理前端文件CSS和JS
如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...
- 用javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- 你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚 翻译日期: 2014年01月22日 原文日期: 2014年01月20日 原文链接: 5 Ways that CSS and JavaScript Interact That You ...
随机推荐
- CMake库搜索函数居然不搜索LD_LIBRARY_PATH
摘要: 本文通过编译后运行找不到库文件的问题引入,首先分析了find_package(JNI)的工作流程,而后针对cmake不搜索LD_LIBRARY_PATH的问题,提出了一种通用的解决办法. 本文 ...
- YII页面缓存
IndexController.php namespace frontend\controllers; use yii; use yii\web\Controller; class IndexCont ...
- 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(9)-Fiddler如何设置捕获Https会话
1.简介 由于近几年来各大网站越来越注重安全性都改成了https协议,不像前十几年前直接是http协议直接裸奔在互联网.还有的小伙伴或者童鞋们按照上一篇宏哥的配置都配置好了,想大展身手抓一下百度的包, ...
- Luogu4111 [HEOI2015]小Z的房间 (矩阵树,辗转相除高斯消元)
除法不能用于同余系,要辗转相除.注意不能加入柱子到矩阵. #include <iostream> #include <cstdio> #include <cstring& ...
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...
- Spring 04: IOC控制反转 + DI依赖注入
Spring中的IOC 一种思想,两种实现方式 IOC (Inversion of Control):控制反转,是一种概念和思想,指由Spring容器完成对象创建和依赖注入 核心业务:(a)对象的创建 ...
- 一个dcache的性能问题分析
如何识别并解决复杂的dcache问题 背景:这个是在centos7.6的环境上复现的,但该问题其实在很多内核版本上都有, 如何做好对linux一些缓存的监控和控制,一直是云计算方向的热点,但这些热点 ...
- 线性代数 | Jordan 标准型的笔记
内容概述: 把方阵 A 的特征多项式 \(c(λ)=|λE-A|\) 展开成 \(c(λ)=\sum_ia_i\lambda^i\) 的形式,然后使用神乎其技的证明,得到 \(c(A)=O\),特征多 ...
- 【NOI P模拟赛】混凝土粉末(整体二分)
题面 样例输入 5 8 1 1 4 2 2 3 1 2 3 3 1 2 5 1 2 3 3 2 5 2 2 1 2 2 1 3 样例输出 1 0 4 0 1 0 样例解释 题解 比这道题简单了不知多少 ...
- [CTSC2007]数据备份Backup (贪心)
题面 Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐 ...