![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
h5
冬天爱吃冰淇淋
性别男,爱好女。
展开
-
实现前端响应式布局
实现前端响应式的布局的方法有很多种,下面我介绍的是使用rem跟vw/vh这两种方法来实现响应式页面。1.使用rem来实现响应式布局rem:是一个相对根元素字体大小的单位。总的来说就是一个相对单位。看到rem这个单位,很多人就会想起em这个单位,em也是属于相对单位,但是他是相对于父元素字体大小的单位。根元素是html,不是body。使用方式:html { font-size: 100px;}p { font-size: 0.16rem; }div { width: 2rem;}原创 2020-08-25 20:23:19 · 1260 阅读 · 0 评论 -
不为人知的margin负值的应用
margin的负值的情况分为两种:margin-left、margin-top:当这两个的属性值为负值的时候,自身会根据负值的大小来向左和上方向偏移。margin-right、margin-bottom:当这两个的属性值为负值的时候,自身的位置不会发生改变,但是会影响自己身后的元素。这两个为负值,相当于自己的宽度缩小(宽度缩小是表示自己占用的宽度变小,但是不会影响自身元素的显示。当负值到达-100%的时候,自身的就不占用宽度,如果由于宽度不够而导致的换行,就会偏移到原来的位置),导致后续的元素向自己偏移原创 2020-08-25 10:06:13 · 622 阅读 · 0 评论 -
慕课网vue播放器实战:制作播放页面
制作过程遇到的难点:制作全屏背景图片:播放页面的背景图片使用了高斯模糊,由于到css的一样样式不太了解,制作起来耗费了一些事件。背景图片的高斯模糊使用了filter样式:filter:blur(20px)。在查阅资料的时候,发现了filter还有一些强大的功能,就是我们国家公祭日的时候,有些网站就会变成了灰色,就是用了filter这个样式:filter: grayscale(100%);。有兴趣的可以去了解一下。制作中间区域:因为中间区域是需要了装两个div的,一个是歌曲的图片,另一个是歌词。刚开始的原创 2020-07-14 20:06:23 · 286 阅读 · 0 评论 -
慕课网vue播放器实战:制作歌手详情页
开发过程中遇到的难点:进入页面没有开场动画:需要为transition标签添加apper属性,这样才会有出场动画返回按钮、标题和按钮可以通过定位的方式来实现。放背景图片的div的宽高比例是10:7,我们可以通过设置宽度100%,padding-top为70%。因为padding和margin的值百分比都是相对容器的宽度来计算的。我们需要一个背景盒子,在列表滑动的适合,他也跟着滑动,这样向上滑的时候就会遮住背景图片了。存储列表的div,用绝对定位,我一开始的想只通过css来把他和用来遮住背景的di原创 2020-07-13 15:11:35 · 162 阅读 · 0 评论 -
验证码咱们前端也能实现!
使用H5制作验证码功能原创 2020-05-19 10:53:52 · 546 阅读 · 4 评论 -
使用H5的canvas绘制饼状图
前言:在我们写网站,我们往往都想要向用户展示一些数据,比如访问数,文章的点击数等等。如果我们只是用数字来向用户展示的,用户很可能会感觉到枯燥,因为数据的显示实在使太单一的。所以今天我来教大家来用H5的画布api来绘制饼状图,让你的网站更加高大上。直接进入正题,先展示成果和源码。最终结果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2020-05-12 19:03:29 · 877 阅读 · 0 评论 -
对着标题眼发光,看着代码脑呆呆?进来解决你的代码晕眩症
前言:在csdn博客中,有很多吸引着我们的作品,我们点进去的时候,会不由自主的感叹这些作品有多牛逼,狠下心来表示我要把这个作品弄懂,自己写一个跟博主差不多的作品出来。但是当我们看到源码的时候,心里表示一万个卧槽,这代码量太多了,无从下手,还是把这篇博客放到我的收藏夹里吃灰去吧。下面我来分享一下我阅读其他博主的优秀代码思路,希望对各位有所帮助。注:由于本人是学前端的,所以下面的例子使用前端的代码来讲述!(其实无论前端还是后端代码,阅读的思路都差不多)说明原理的例子:前端canvas粒子动画背景(带鼠标跟原创 2020-05-11 14:45:19 · 1059 阅读 · 3 评论 -
简单实用:8行js代码实现图片上传预览功能
应用场景:我们再开发自己的网站或者博客的时候,都会有一个上传头像的并且预览的功能,所以今天就教大家如何实现这一个功能图片预览功能的实现步骤:第一步:我们需要要及时的获取用户上传的文件,所以我们要为input输入框添加onchange事件。第二步:获取用户上传的文件,读取该图片。第三步:把读取到的内容展示到页面上。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta原创 2020-05-10 10:14:33 · 229 阅读 · 0 评论 -
H5:canvas的非0环绕填充规则
需求:绘制一个正方形,在正方形中再绘制一个小的正方形。把大的正方形填充成红色,小的正方形不填充。如下图:先上代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title>原创 2020-05-08 22:56:01 · 466 阅读 · 0 评论