吴机智-CSDN博客

原创 H5+C3+ajax+fullPage+jquery商城首页

动态页面 H5+C3商城首页轮播图 //轮播图操作 function bannerOption() { var swiper = document.getElementById("swiper"); //获取轮播图包裹层元素 var swiperItem = swiper.getElementsByClassName("swiper-item"); //获取轮播图列表 var prev = document.getElementsByClassName("prev")

2021-05-01 02:22:57 174 1

原创浏览器常见兼容问题

1、 ie中图片边框问题Ie 中图片放在a标签中显示边框。解决方案: img{border:none;}2、 ie8中背景复合属性写法问题如下代码，在标准浏览器中均能正常显示背景图片，但是在ie8中图片显示异常。.bg{ background:url(“images/bg.jpg”)no-repeat center;}解决方案：在url和no-repeat之间加上空格。.bg{ background:url(“images/bg.jpg”) no-repeat center;

2021-04-10 23:44:05 86

原创 web前端开发常见的技能问题

1.web扫码登录怎么实现，思路?制作思路：前端调用后台生成二维码的API，获取到二维码图片和id前端检测（通过轮询或者websock）是否有手机扫码，通过调用后台接口API，参数为ID手机扫描二维码登陆，手机端可以获取到二维码里ID，带上用户ID和二维码里的ID调用后台接口。后台存储这个二维码的数据，加上登录用户信息，当前台调用API时，给返回登录成功。前端获取到登录成功，进行跳转2.解决input[type=file]打开时慢、卡顿问题<input type

2021-04-10 23:34:50 398

原创引入echarts时报错： “TypeError: Cannot read property ‘init‘ of undefined“

导入echarts时，把import echarts from 'echarts'改成import * as echarts from 'echarts'安装引入 echarts

2021-03-19 14:28:34 284

原创面向对象 tab栏切换案例

功能：点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字,可以修改里面的文字内容.html部分<body> <main> <h4> Js 面向对象动态添加标签页 </h4> <div class="tabsbox" id="tab"> .

2021-03-19 02:49:24 590 2

原创三栏自适应布局

实现左中右三栏布局，左右为固定宽度，中间宽度随父元素宽度变化1.flex布局父元素设置display：flex; 左右盒子宽度固定，中间盒子设置flex：1;<style> .container { width: 100%; height: 100px; display: flex; } .left { width: 200px; .

2021-03-14 22:01:46 95

原创 Ajax和axios

1.XMLHttpRequest的基本使用1.1 使用xhr发起GET请求步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 xhr.onreadystatechange 事件// 1. 创建 XHR 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数，指定请求方式与 URL地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getboo

2021-03-13 22:59:11 174

转载跨域和JSONP

1.同源策略和跨域1.1同源策略1.什么是同源如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：2.什么是同源策略同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通俗的理解：浏览器规定，A 网站

2021-03-13 22:14:30 86

原创（总结）vue项目框架搭建

1 vue脚手架1.1 安装插件npm install -g @vue/cli1.2 创建项目vue create my-project1.3 项目结构2 Element-UI官网地址为： https://element.eleme.cn/#/zh-CN2.1 安装npm i element-ui -S2.2 导入资源// 导入组件库import ElementUI from 'element-ui'; // 导入组件相关样式 import 'element-ui/li

2021-03-13 15:29:25 338

原创常见的图片格式及适用情况

（1）第一种是 BMP 格式，它是无损压缩的，支持索引色和直接色的点阵图。由于它基本上没有进行压缩，因此它的文件体积一般比较大。（2）第二种是 GIF 格式，它是无损压缩的使用索引色的点阵图。由于使用了 LZW 压缩方法，因此文件的体积很小。并且 GIF 还支持动画和透明度。但因为它使用的是索引色，所以它适用于一些对颜色要求不高且需要文件体积小的场景。（3）第三种是 JPEG 格式，它是有损压缩的使用直接色的点阵图。由于使用了直接色，色彩较为丰富，一般适用于来存储照片。但由于使用的是直接色，可能文件的体

2021-02-25 17:34:39 1177

原创怎么让 Chrome 支持小于 12px 的文字？

在谷歌下 css 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px。解决办法：（1）可以使用 Webkit 的内核的-webkit-text-size-adjust 的私有 CSS 属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是 chrome 更新到 27 版本之后就不可以用了。所以高版本 chrome 谷歌浏览器已经不再支持-webkit-text-size-adjust 样式，所以要使用时候慎用。（ 2 ）还可

2021-02-25 17:19:01 686

原创删除GitHub上的项目

进入项目，点击settings滑到页面底部，点击Delete this repository会弹出这个弹框填入项目名称点击下面红色按钮

2021-02-25 16:01:16 68

原创购物车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"/> <s.

2020-11-04 17:35:54 60

原创信息登记表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>信.

2020-11-04 17:35:19 143

原创百度搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> <style> .active{ background-color: pink; } </style.

2020-11-04 17:34:36 104

原创选项卡及删除按钮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> <style> ul{ border:1px solid; width: 300.

2020-11-04 17:33:23 158

原创注册页验证

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> span { color: red; ...

2020-09-11 09:58:00 57

原创过滤敏感词

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul, li { list-style:.

2020-09-11 09:57:25 52

原创编辑保存

<!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> i, em {.

2020-09-10 16:25:40 82

原创点击按钮改变样式

<!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> * { ...

2020-09-10 16:24:15 221

原创点击按钮生成新闻

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button...

2020-09-10 16:13:41 79

原创点击按钮修改样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * { ...

2020-09-10 16:13:29 391

原创多个的展开收起

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div{ width: 300px;heigh...

2020-09-10 16:13:16 104

原创模拟购物车

<!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> button { ...

2020-09-10 16:13:01 41

原创加减按钮改变字体大小

<!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> p{ ...

2020-09-10 16:12:48 235

原创简易计算器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input...

2020-09-10 16:12:30 50

原创九九乘法表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <...

2020-09-10 16:12:11 36

原创开关灯

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <img s...

2020-09-10 16:11:57 33

原创切换图片（按钮）

<!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> img{ ...

2020-09-10 16:11:41 66

原创切换图片（箭头）

<!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> *{ ...

2020-09-10 16:00:04 1040

原创切换图片（箭头+圆点）

<!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> * { ...

2020-09-10 15:59:48 286

原创切换图片（输入框）

<!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> img{ ...

2020-09-10 15:59:35 120

原创切换图片（圆点）

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...

2020-09-10 15:59:19 227

原创全选反选不选

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="button" value=...

2020-09-10 15:58:59 95 1

原创网站换肤

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button>黄色</button>...

2020-09-10 15:58:42 36

原创显示隐藏

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> li{ width: 100px; ...

2020-09-10 15:50:03 37

原创星星

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 12345 12345 1234...

2020-09-10 15:49:48 47

原创选项卡嵌套

<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; list-style: none; } #warp { ...

2020-09-10 15:49:33 78

原创选项卡

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div{ width: 200px; ...

2020-09-10 15:49:16 42

原创展开收起

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div{ width: 300px;heigh...

2020-09-10 15:49:00 42

H5+C3+ajax+fullPage+jquery商城首页.zip

Git和GitHub.pdf

空空如也