前端学习记录
文章平均质量分 85
记录自己的学习过程
为什么这样子zzz
这个作者很懒,什么都没留下…
展开
-
用Vue制作简易音乐播放器(超详细)
先放个效果图吧首先先把主体结构搭好,样式调好,然后再来写播放器的功能。根据播放器的形状,将其分为头部(搜索栏),中间(歌曲列表,碟片,热评),尾部(播放器栏),html结构如下<div class="wrap" id="app"> <!-- 整体播放器部分 --> <div class="play_wrap"> <!-- 头部 --> <div class="search_bar"> <a href="javascr原创 2021-03-12 11:30:26 · 7713 阅读 · 4 评论 -
用Vue制作天气预报
先放个效果图吧首先理清思路,查询天气大致分为三步①输入城市,按下回车②调用接口查询数据③接收数据第一步可以用v-on来完成,第二步可以用v-model和axios来完成,第三步可以用v-for来完成。然后写下html的大致结构<div id="app" class="wrap"> <div class="search_form"> <div class="logo"> <img src="/img/天气预报.png" alt="天气预报"原创 2021-03-09 13:11:24 · 5379 阅读 · 3 评论 -
用Vue制作记事本
先放个效果图吧制作记事本一共分为五个部分。1、第一部分就是添加内容。目的是输入内容后按下enter能够在目录下出现对应的内容,此部分应用v-for,v-model以及v-text完成,html程序如下<div id="app"> <input id="text" type="text" v-model="addValue" @keyup.enter="add" placeholder="请输入内容"> <ul> <li v-f原创 2021-02-17 15:42:33 · 783 阅读 · 0 评论 -
用jquery制作2048小游戏(超详细)
先放个效果图吧首先,先把html结构搭好。新建一个html文件,设置好标题2048,按钮New Game以及score:0,这里按钮是用a标签来将javascript中的newgame函数给传进来,score后面的分数由于是动态的,所以给它添加一个span标签,并加上一个id,代码如下<header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">New原创 2021-01-13 22:07:29 · 2995 阅读 · 3 评论 -
用css设置水平居中,垂直居中和垂直水平居中
前端学习第三天,今天学了一种新技术,记录一下。采用相对定位和绝对定位来实现,由于给子元素添加了绝对定位,基准变成了浏览器,因此给父元素添加一个相对定位,父元素设不设置位移看它想放在什么地方。这样子元素的定位基准就变成了父元素。然后将四个方位的位移值设为0,最后用margin:auto实现垂直水平居中。因为正常情况是margin:top right bottom left顺指针的方向,全设为auto的话就会自动分配,从而实现居中的功能。<!DOCTYPE html><html lan原创 2020-12-21 22:13:56 · 190 阅读 · 0 评论 -
用html+css制作百度首页
刚入门,做个百度首页来巩固一下刚学的html和css知识。这是原网页:这是我做的效果图:实力有限,只能做成这样,有兴趣的可以参考一下,代码如下: 百度一下,你就知道 新闻 hao123 地图 视频 贴吧 学术 更多原创 2020-12-21 11:00:20 · 6435 阅读 · 2 评论