HTML/CSS
super码王
一直在努力,从未放弃!!!
展开
-
web端video常用控制配置
【代码】web端video常用控制配置。原创 2022-10-16 10:21:53 · 2031 阅读 · 1 评论 -
使用html+css3实现QQ登录界面渐变色效果
效果展示代码展示<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-09-19 17:12:26 · 1383 阅读 · 0 评论 -
html+css实现漂亮的登录页面
效果展示代码展示<!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-scale=1.0">原创 2021-09-19 15:09:52 · 1726 阅读 · 0 评论 -
module.exports与exports,export与export default之间的关系和区别
问题来源由于最近在用nodejs 和 vue 编写前后端项目,里面涉及到模块化引用。我发现他们一会儿用 export 、一会儿用export default 、一会用module.exports 及 一会用 exports问题原因CommonJS模块规范和ES6模块规范完全是两种不同的概念CommonJS模块规范Node应用由模块组成,采用CommonJS模块规范。CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(.原创 2021-08-31 16:10:51 · 258 阅读 · 0 评论 -
玩转CSS3的3D动画效果
效果展示基础知识transform-style:启用 3D 模式要利用 CSS3 实现 3D 的效果,最主要的就是借助transform-style属性。transform-style只有两个值可以选择:// 语法:transform-style: flat|preserve-3d; transform-style: flat; // 默认,子元素将不保留其 3D 位置transform-style: preserve-3d; // 子元素将保留其 3D 位置。当我们...原创 2021-08-31 00:58:29 · 678 阅读 · 0 评论 -
js中push和concat合并数组的区别
关键点把握push方法:改变了原数组的结构 将要合并的对象整体加入concat方法:不改变原数组的结构,新生成的数组必须用一个新变量来接收 将要合并的对象逐一加入案例演示案例一:使用push方法添加一个数组//原数组let arr_one = [0,1,2]//待加入元素let arr_new = [4,5]let obj_new = {"value": 6}//使用push方法加入var ret = arr_one.push(arr_new)//ret:原创 2021-08-26 15:20:09 · 359 阅读 · 0 评论 -
nodejs + koa2如何解决跨域问题
基础知识同源策略 是指 三同:同协议/同域名/同端口对比双方: 当前页面的地址和Ajax获取数据的地址(这里可能有点抽象,下面我会举例子说明)常见报错场景描述场景一: 我在浏览器地址栏中输入 http://127.0.0.1:8888/api/map可以访问数据,如下:场景二:我在一个htm面通过Ajax对场景一接口发起数据请求,html代码如下:<!DOCTYPE html><html lang="en"><head> .原创 2021-08-23 13:23:21 · 1056 阅读 · 1 评论 -
解决width: 100%;再设置margin问题
最近在做前端,遇到了这么个小问题,就是当我们把一个 div 的 width 设置为 100% 之后,再设置 margin 的时候 这个div 莫名其妙的超出了屏幕。情景如下图:这就很难受了啊!!! 不过办法总比困难多,下面,我将讲两种解决方法:方法一:计算宽度法从上图中我们可以看到 我这里左右边距都设置的是 30px,所以总边距为 60px,知道总边距之后就好办了,我们可以将 width 设置为 width: calc(100% - 60px)width: calc(100% -.原创 2021-07-28 11:23:46 · 2792 阅读 · 0 评论 -
Web布局入门案例
引言最近,我在开发一个汽车轮胎检测报告 Web 页面,里面的布局和样式都是自己纯手工打造,但是,都是一些比较基础的 重复的属性编写。在此,我将源码 + 资源 附上,感兴趣的朋友可以自己复现一遍效果展示源码展示为了大家方便观看,我把 HTML 和 CSS放在了同一个文件里面,大家可以自行分离<html><head> <title>武科汽检中心</title> <script type="text/javascr原创 2021-03-04 16:19:28 · 327 阅读 · 1 评论 -
js延时函数
js延时函数总结:在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下:setTimeout("test()","5000");//5秒后执行testFunction()函数,只执行一次。setInterval("test()","5000");//每隔5秒执行一次testFunction()函数,执行无数次。如何停止setInterval 呢?var interval = window.setInterval("test()","5000");..原创 2021-03-01 23:31:43 · 35866 阅读 · 0 评论 -
如何利用JS生成二维码
问题来源最近在做一个项目,有这么个需求,通过生成二维码来实现网页的分享。问题分析脑海的第一反应,当然是用js来实现,自己手写?当然不是。解决方案使用QRCode.js。QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。QRCode.js:使用 JavaScript 生成二维码代码编写<!DOCTYPE html><html lang="en.原创 2021-03-01 22:03:35 · 892 阅读 · 3 评论 -
HTML中如何利用CSS让图片与文字底部对齐
问题展示问题分析很明显,左边图片 与 右边文字 是上下错位了的,其实呢,这是一种正常现象,因为,图片默认是与文字基线对齐的,但是,这样子不符合我们的审美啊,所以,有了以下解决方法。解决方法方法很简单,就是一个属性:“vertical-align: top | middle | bottom | baseline”,最后一个是 基线 的意思,另外几个单词我就不做解释了,相信大家都明白。写在代码里是这样的:就是给 img 标签加上这个属性,并将值设置为 bottom 即可<.原创 2021-03-01 20:06:22 · 5014 阅读 · 1 评论 -
让图片在div里居中(三种方法)
问题当我们将一张 img 放在 一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div。所以,产什么以下解决方法。解决方法布局文件代码<div class="content"> <img src="img_p1_title.png"></div>第一种方法:.content{ width:340px; height:40px; display: flex; justify-content:原创 2021-03-01 19:43:15 · 31936 阅读 · 1 评论