- 博客(34)
- 收藏
- 关注
原创 如何将css提取出来成为单独的文件
1:安装插件: mini-css-extract-plugin 命令:npm install mini-css-extract-plugin -D2:在webpack.config.js中引入插件:const b=require(‘mini-css-extract-plugin’) (b为接收的变量名,可以任取)3:在plugins木块中使用插件···plugins:[new b()]···4:在scc的rule中,使用b替代style-loader···{ te
2021-07-06 15:29:20
304
原创 webpack如何打包less文件
1:下载包:less less-loader 下载命令:npm i node-less less-loader -D2: 在src项目下建立.less文件3:在index.js文件中导入:require('./style.less')4:在webpack.config.js文件中添加: module:{ rules:[ { test:/\.less$/,use:['style-loader','css-loa
2021-07-06 12:56:48
410
原创 webpack打包css文件
首先,我们要先安装两个包1:style-loader(先把css文件和js文件一起打包),css-loader(和js文件一起从外部导入BOM中)执行命令: npm i css-loader style-loader -D(开发时用上线后不用)2:在src文件夹下面建立index.html和index.js(因为index.js是默认的打包入口,自己也可以更改哟,可以参考我前面的两篇文章哟)3:在src文件夹下建tyle.css并写好样式(src为存放源代码的文件,在主项目文件夹下面)3:
2021-07-06 11:58:40
263
原创 webpack打包HTML文件
在这里我们应该注意一下,webpack对html和对css,img的打包方式是不一样的喔,对html打包是通过插件plugin,对css.img打包时通过loader喔,我们后面会做详细的解释的。今天我们主要来看一看webpack如何对html文件进行打包首先,既然是通过插件打包,那么我们就应该先安装插件,1:安装插件:html-webpack-plugin -D 只在开发的时候用2:在webpack.config.js中引入插件(这个文件是建立在主项目文件夹下面哟) :const a=require
2021-07-06 10:18:24
1251
原创 webpack初体验
在使用webpack打包之前我们应该理解一下npm,npm是node.js默认的软件包管理系统,所有应该先下载node,node官网地址:http://nodejs.cn,下载了node之后,cmd命令进入命令提示框,使用node -v命令查看node有没有安装好,然后执行命令npm install npm -g,实现全局安装npm,这个时候,我们的npm就已经安装完毕了。那现在应该如何使用webpack呢?别急,我们一步一步来为了方便演示,我们使用的软件是vscode,我们在桌面上新建一个文件夹,命名
2021-07-06 10:17:03
63
原创 js实现进度条
如何用js实现简单的进度条特效,快来看看吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2021-07-03 10:13:03
140
原创 跟随鼠标的移动
如何让物体跟随鼠标一起移动?快来看看吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2021-07-03 10:09:52
78
原创 js生成随机验证码
如何用原生js生成随机的验证吗?可以直接复制看效果哟,快来试试吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
2021-07-03 10:06:38
61
原创 Vue动画
如何用vue实现简单的动画过渡效果?<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue动画</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active { width: 100px; he
2021-07-03 09:58:05
53
原创 vue中绑定样式
在Vue中如何绑定样式? <!--1:单个样式--><div v-bind:class="{'content':aa}"></div> content--->style样式 aa--->布尔值 <!-- 2:多个样式--><div v-bind:class="[activeClass, errorClass]"></div>data中: activeClass: 'ac
2021-07-03 09:40:43
47
原创 js返回顶部
用js实现返回返回顶部,可以直接复制看效果哟,块来试试吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
2021-07-02 20:24:20
44
原创 css抽奖特效
用css实现的抽奖特效,可以直接复制看效果哟,快来试试吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g
2021-07-02 20:22:12
730
原创 css特效实现表情包
用css特效写的表情包,可以直接复制看效果哟,块来试试吧!*{ padding:0; margin:0;}ul{ list-style: none;}.container{ /* background-color: violet; */ width:480px; /* 要好好看看margin属性*/ margin:100px auto;}.emoji{ position: relative; box-sizing
2021-07-02 20:18:44
688
原创 css时钟特效
用css实现的炫酷时钟特效,赶快试试吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>*{m
2021-07-02 20:14:59
140
原创 css简单特效
用css实现的特效,发光的小球,可以直接复制看效果哟!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2021-07-02 20:11:58
98
原创 vue实现菜单跳转
如果使用vue来实现菜单的跳转简直不要太方便,用v-if和v-show都可以喔!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
2021-07-02 19:35:08
707
原创 vue条件渲染
v-if ,v-else的用法<!--实现单条件判断--> <p v-if="d">ww</p> <p v-else>占</p> <!--将d设置为bool类型,v-if和v-else之间不能有其它的--><!--实现多条件判断--> <p v-if="age>20">我太小了</p> <p v-else-if="age>30">
2021-07-02 19:28:02
36
原创 php期末复习简答题
1.web服务器的工作原理各种Web服务器的实现细节都不同,是为了某种情形而设计开发的。但是它们的基础工作原理是相同的,一般可分成如下4个步骤:连接过程、请求过程、应答过程以及关闭连接。下面对这4个步骤一一介绍。(1)连接过程就是Web服务器和其浏览器之间所建立起来的一种连接。(2)请求过程就是Web浏览器向服务器提出各种请求。(3)应答过程就是运用HTTP协议把在请求过程中所提出来的请求传输到Web的服务器,进而实施任务处理,然后运用HTTP协议把任务处理的结果传输到Web的浏览器,同时在Web
2021-07-02 19:13:28
519
原创 人机交互总复习
系统开发的基本流程,正确的是( 需求分析;平台规划;项目开发;测试验收。)Photoshop处理照片,常用的色彩模式是(RGB )WWW的英文全称是(world wide web )FTP是(文件传输协议 )arguments.length 可以获取形参的个数。人机交互、人机互动(英文:Human–Computer Interaction或Human–Machine Interaction,简称HCI或HM用户界面 ( User Interface ,简称 UI位图的特点是可以表现色彩的变化和
2021-07-02 19:08:35
111
原创 用js调用百度地图API
如何用js实现百度地图API的调用,大家可以参考这最基本的几步哟~~大家可以直接复制代码看效果哟,里面都有详细的注解,虽然很方便,但还是建议大家去看官方文档哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
2021-06-30 19:29:15
780
原创 如何用js操作元素样式
如何用js操作元素的样式,这里做了简单的总结,希望对大家有所帮助哦!1:通过style来更改样式,一次只能更改一次,而且css里面的属性在js里面全部要:font-size—>fontSizea.style.color=‘red’2:通过cssText更改:可以多条样式一起更改(属性写法与css一样)aa.style.cssText=“color:blue;background:#000;font-size:90px”3:通过className直接修改标签样式:aa.className=“b
2021-06-30 11:56:31
292
原创 js如何设置属性
关于js如何设置,修改,删除属性,相信聪明的你看了这篇文章后定会有所收获的。奥里给!@<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
2021-06-30 11:46:24
1508
原创 js如何获取节点
如何用js去获取节点,相信聪明的你们看了这篇文章后就会有了基本的理解啦,自己再动手多练一练就会很快掌握了,里面都有详细的注解,对于小白友好哟!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
2021-06-30 11:35:02
167
原创 用js显示日期时间
用js在页面上显示时间,日期,以s为单位更新,有详细的注解。对才接触js的小白超级友好,可以直接复制代码看效果哟!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
2021-06-30 11:11:52
960
原创 js如何创建和插入节点
关于js如如何创建和插入节点可以参考,有详细的注解,可以直接复制看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
2021-06-30 10:51:49
1294
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人