04-前端技术
此专栏内容包含HTML、CSS、JS、Vue、Webpack等前端技术或框架
王菜鸟
不负青春,野蛮生长!
展开
-
使用Flask爬数据,HTML渲染数据时,img标签有src的值,引用网络图标不显示的解决办法
复制渲染的图标链接在页面打开,是可以看到图片的,而放html却不能显示。img标签src引用网络图片的链接,页面不显示,返回403错误。原创 2023-01-19 20:33:56 · 391 阅读 · 0 评论 -
微信小程序之实现加载动画的旋转方块案例效果(前端学习收藏夹必备)
文章目录一、案例效果一1.1 WXML代码:1.2 WXSS代码二、案例效果二2.1 WXML代码2.2 WXSS代码三、Animation说明一、案例效果一1.1 WXML代码:<view class="loading-screen"> <view class="loading"> <view class="flour" ></view> <view class="flour" ></view> <view原创 2020-12-12 22:23:33 · 1209 阅读 · 0 评论 -
如何高效开发小程序?来看看推荐使用的十大UI组件
文章目录一、组件库1.什么是组件库?2. 小程序发展背景二、优秀的组件库2.1 ColorUI2.2 Thor UI2.3 Vant2.4 Taro UI2.5 iview UI2.6 Lin UI2.7 uview UI2.8 Wux Weapp2.9 MinUI2.10 TouchUI最后一、组件库1.什么是组件库?组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库。2. 小程序发展原创 2020-05-13 14:40:15 · 4281 阅读 · 10 评论 -
微信小程序之实现层叠轮播图的效果案例(前端学习收藏夹必备)
效果展示代码展示:WXML代码<view class="selection_cards" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"> <view class="selection_cards_item" wx:for="{{list}}" wx:key="index" style="left:{{item.style.left}}px; z-in原创 2020-12-11 10:55:18 · 3423 阅读 · 2 评论 -
安装与卸载vue cli3
npm install -g @vue/clinpm uninstall -g @vue/cli@特定版本yarn global add @vue/cliyarn global remove @vue/cli@特定版本原创 2021-01-30 20:43:31 · 1565 阅读 · 0 评论 -
Vue项目登录页面的动态粒子背景插件
动态粒子效果如下:安装插件npm install vue-particles --save-dev原创 2021-07-09 13:40:19 · 4470 阅读 · 10 评论 -
Syntax Error: TypeError: this.getOptions is not a function
出现问题场景:vue运行项目过程中报错检查代码中并无写错的地方其实涉及到这个问题,就是版本原因了,我安装的 scss-loader 版本太高,卸载安装低版本即可npm i -D sass-loader@8.x // 安装npm uninstall --save node-sass // 卸载npm i node-sass@4.14.1 // 安装// 如果node-sass安装失败,也可以直接在package.json中写上版本号,删除node_modules文件夹,重新npm i即可```原创 2021-05-27 18:08:29 · 2363 阅读 · 0 评论 -
下载粒子背景依赖包,出现以下报错:npm ERR! code ERR_TLS_CERT_ALTNAME_INVALID npm ERR! errno ERR_TLS_CERT_ALTNAME_INVA
在下载npm依赖包输入 npm install 命令的时候出错 以下是错误信息错误信息:npm ERR! code ERR_TLS_CERT_ALTNAME_INVALIDnpm ERR! errno ERR_TLS_CERT_ALTNAME_INVALIDnpm ERR! request to https://registry.cnpmjs.org/vue-particles failed, reason: Hostname/IP does not match certificate’s alt原创 2021-07-09 13:22:33 · 295 阅读 · 0 评论 -
构建Vue项目详细步骤
一、安装Node.js下载地址:https://nodejs.org/en/下载完成之后,找到文件所在路径,点击进行安装,直接下一步操作,安装完成之后,打开cmd终端,查看是否安装成功node -vnpm -v二、安装cnpm淘宝镜像npm命令可以使用,打开cmd,下载一些包但是npm下载各种包默认的服务器在国外,下载速度很慢,有时还会导致一些环境问题因此我们可以选择从国内的服务器下载包,这要感谢淘宝团队的付出,为国内开发者提供了npm各类包的镜像下载以安装一个cnmp(淘宝镜像)原创 2021-03-04 15:33:25 · 1894 阅读 · 2 评论 -
Vue项目关闭ESLint + Prettier代码规范
使用用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格,但这对新手使用有很大困难,严格的格式要求容易出现很多警告和错误,这时最好关闭ESLint + Prettier。在src下新建文件.eslintrc.js,并如下配置:module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', //关闭ESli原创 2021-08-30 19:58:48 · 1330 阅读 · 0 评论 -
通过Vuecli脚手架创建Vue项目小白教程
一、环境准备安装Node.js下载地址:http://nodejs.cn/download/安装Node.js淘宝镜像加速器cnpmnpm install cnpm -g检查Node.js版本安装脚手架@vue/cli关于@vue/cli可以看官网指南,如下:https://cli.vuejs.org/zh/guide/查看@vue/cli版本创建项目通过cd命令切换路径,使用vue命令创建项目,yeb即为项目文件名项目创建中选择的内容可根据自己原创 2021-01-30 23:18:58 · 279 阅读 · 0 评论 -
Vue实现简易购物功能
效果图代码<!-- * @Author: OriginalCoder * @Date: 2021-05-14 16:44:57 * @LastEditTime: 2021-05-31 18:14:42 * @LastEditors: OriginalCoder * @Mail: 1720929001@qq.com * @Description: --><!DOCTYPE html><html lang="en"><head>原创 2021-05-31 18:15:20 · 480 阅读 · 0 评论 -
封装Vue的请求拦截器和响应请求的代码
以下代码仅作为自己记录的内容,以备不时之需!!!import axios from 'axios'import {Message} from 'element-ui';import router from '../router'//请求拦截器axios.interceptors.request.use(config=>{ //如果存在token,请求携带这个token if (window.sessionStorage.getItem('tokenStr')){原创 2021-07-18 16:14:26 · 314 阅读 · 0 评论 -
JSON对象和字符串之间的相互转换 – JSON.parse() 和 JSON.stringify()
JSON.parse()JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。JSON.parse(string)接受一个JSON字符串并将其转换成一个JavaScript对象;JSON.stringify()接受一个JavaScript对象并将其转换为一个JSON字符串目前所使用的主流浏览器都支持JSON字符串和对象的处理方式。具体使用如下:给出以下数据,将stra转换成字符串,将strb转换成JSON对象:var a={"id":1,"sex":"female","name原创 2021-06-09 09:57:08 · 282 阅读 · 1 评论 -
返回数组中指定元素的下标
返回数组中指定元素的下标一、实验描述1、 考核知识点indexOf()2、 练习目标 掌握indexOf()方法的使用3、 需求分析indexOf()返回某个指定的字符串值在字符串中首次出现的位置,indexOf()方法对大小写敏感!如果要检索的字符串值没有出现,则该方法返回 -1。本实验使用indexOf()来查找数组中元素d出现的次数,并返回其对应的所有索引的下标。4、 实验分析效果如图3-2所示。图3-1 返回所有d的坐标和出现的次数具体实现步骤如下:a) 定义一个数原创 2021-03-23 16:33:51 · 14813 阅读 · 0 评论 -
JavaScript实现表单验证功能
以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码。关于正则表达式的使用,以及常用的正则表达式,笔者目前还在整理中,后期整理完成后,会将链接放在下面,供大家一起学习。//1.声明变量var emailObj;var usernameObj;var passwordObj;var confirmObj;var emailMsg;var usernameMsg;var passwordMsg;var confirmMsg;//页面加载之后,获取页面原创 2020-12-07 19:39:34 · 4077 阅读 · 3 评论 -
Z-index你真的都会用吗?确定不来看看?
在定位布局时中,可能会出现盒子重叠的情况。那么,可以使用z-index来控制盒子的层叠次序(z轴)。语法选择器 { z-index: 1;}z-index 的特性如下:属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;如果属性值相同,则按照书写顺序,后来居上;数字后面不能加单位。注意:z-index 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示:<!DOCTY原创 2020-11-13 10:47:26 · 246 阅读 · 0 评论 -
定位的方法总结,错过就再也遇不到这么的文章了!
定位一、定位定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。1.1 定位模式定位模式决定元素的定位方式,它通过CSS的position的属性来设置,其值可以分为四个:值语义static静态定位relative相对定位absolute绝对定位fixed固定定位1.2 边偏移边偏移就是定位的盒子移动到最终位置。有原创 2020-11-13 10:24:29 · 249 阅读 · 0 评论 -
前端开发面试必会题,用CSS实现水平垂直居中的十种方式
前言想要实现以下的居中效果,在这里总结了始终居中的方式,欢迎参考~一、HTML代码<div class="wrap" style=" width: 300px; height: 300px; background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); " > <div class="bo原创 2020-11-07 23:07:27 · 368 阅读 · 0 评论 -
HTML+CSS实现3D旋转相册
介绍在前几篇博客中介绍了transform的属性,那么再经过几天的学习之后,现在对transform的属性有了更多了理解,同时也通过自己的想法,完成了下面的作品:实现一个3D的旋转相册代码废话不多说,直接上代码吧~<!-- * @Author: OriginalCoder * @Date: 2020-10-29 12:39:14 * @version: * @LastEditTime: 2020-10-29 13:59:12 * @LastEditors: OriginalCo原创 2020-10-29 14:05:16 · 7086 阅读 · 5 评论 -
HTML+CSS实现一个线条爱心动画的效果
实践一个线条上下运动的动画页面代码:<!-- * @Author: OriginalCoder * @Date: 2020-10-17 10:12:51 * @version: * @LastEditTime: 2020-10-29 12:32:37 * @LastEditors: OriginalCoder * @Description: --><!DOCTYPE html><html lang="zh-CN"> <head>原创 2020-10-29 12:33:31 · 1596 阅读 · 0 评论 -
使用Web技术来实现人民日报的点亮武汉
介绍在疫情期间,人民日报发表了一篇微信公众号,是一起来点亮武汉的文章,当然人民日报是通过SVG的技术来实现的,那么我们今天来看看使用Js的技术如何来实现点亮人民日报!由于GIF文件太大,无法上传,下面贴了图片!点亮之前:点亮之后:代码<!-- * @Author: OriginalCoder * @Date: 2020-10-23 21:32:39 * @version: * @LastEditTime: 2020-10-23 21:34:31 * @LastEditors原创 2020-10-28 16:48:24 · 419 阅读 · 2 评论 -
响应式布局实现我校官网的图片响应式
介绍什么是响应式布局?开水奇偶网页内容会随着访问它的视口及设备不同而呈现不同的布局样式。其实现原理就是通过媒体查询、流式布局和自适应图片等技术来实现自动调整页面元素布局。响应式布局有哪些优点?可以给用户带来更好的体验,同时也能增加网站的点击率。打破了传统的网页布局思路,实现了一个网站多端适应多的效果。访问一个网站,在PC端、IPad端和手机端都能很友好的展示网页内容。技术要点通过媒体查询来实现不同的css样式实践我录制了gif图,但是由于文件太大,无法压缩,所以大文件csdn无法上传,所以下原创 2020-10-28 16:35:17 · 346 阅读 · 0 评论 -
还不会transform属性吗?包教包会!
介绍在做前端的开发中,是不是经常遇到弹窗确认的盒子呢?那么静态的弹窗如何做到居中显示呢?接下来就来介绍一下transform属性transform:用于实现盒子的自由变性效果,transform的取值主要有以下几种:旋转:rorate扭曲:skew缩放:scale移动:translate矩阵变形1.scale缩放scale(X,Y)用于对元素进行缩放,其中X表示水平方向的缩放倍数,Y表示垂直方向缩放的倍数。Y值可以省略,此时表示X、Y缩放的倍数相同。transform:scale(2原创 2020-10-28 15:22:59 · 505 阅读 · 0 评论 -
有了这样的登录页面,你还怕你的访问量低吗?
效果是不是见过很多类似的网站?都是采用这种效果的呢?看起来很简洁,也很舒服,那么你知道是怎么实现的吗?接下来就分享给小伙伴们吧代码下面的代码是不完全的哟,我后期会将代码上传到此处,想要学习的小伙伴们可以下载来学习一下哈~<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />原创 2020-10-24 17:22:34 · 410 阅读 · 2 评论 -
粒子随心前端特效
效果一个粒子随心的前端网页,根据鼠标的移动会进行不同的变化,快来试试吧代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>粒子随心动画</title> <script src="http://cdn.sucai8.cn/cdn/jquery/jquery-1.10.2.js"></script>原创 2020-10-24 10:40:25 · 1195 阅读 · 0 评论 -
Web页面实现聚焦的缩放效果(HTML+CSS静态)
介绍在很多响应式的网页上都有类似的效果,将鼠标箭头移动到某个位置,图片会进行自动缩放,呈现出一种聚焦的效果,这个效果主要是利用hover来实现的。其次,再使用transition的属性来实现动态展示的下效果,那么看看下面的效果示意图:代码将代码的img标签中src图片地址换成你本地的就好,可以实现相同的效果!<!-- * @Author: OriginalCoder * @Date: 2020-10-23 20:15:04 * @version: * @LastEditTime:原创 2020-10-23 20:57:19 · 1763 阅读 · 0 评论 -
仿写哔哩哔哩的头部导航部分(HTML+CSS静态)
介绍先来看看哔哩哔哩的头部导航部分效果,B站的头部导航背景图片使用的是动态叠加(变形和动画的效果),我们可以采用静态的图片的方式来实现背景图的部分效果来看看我的实现效果,是不是可以非常棒?代码关于代码部分不解释,在此处我会将该代码上传,链接并附在此处,有需要的小伙伴可以下载下来自行学习和体验!<!-- * @Author: OriginalCoder * @Date: 2020-10-21 17:46:04 * @version: * @LastEditTime: 2020-原创 2020-10-21 20:25:49 · 7752 阅读 · 6 评论 -
学习CSS的background属性及其取值(实践)
CSS的背景属性属性描述可用值background设置背景的所有控制选项其他背景属性可用值的集合background-color设置背景颜色命名颜色、十六进制颜色等background-image设置背景图片或渐变填充url(URL)或渐变属性值background-repeat设置背景图片的平铺方式repeaat、no-repeat、repeat-x、repeat-ybackground-attachment设置背景图片固定还是随内容滚动原创 2020-10-21 17:23:50 · 994 阅读 · 0 评论 -
实现页面的图文混排布局(Web作业)
介绍实现如下图的HTML+CSS的静态网页给了一个JS的设计稿,可以查看各个元素的间距、颜色、样式代码等仿写一个静态的网页静态代码效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2020-10-21 10:12:57 · 7051 阅读 · 0 评论 -
实现文字上的肩章,position实现位置的偏移
介绍在某宝和某东上有很多肩章,浮动在文字的各个方向,今天来记录一下肩章浮现的效果,特别是学会position的用法,首先设置相对定位,再进行位置的偏移效果首先来看看B站的肩章,一个领券免费看的position用法实例记录实现的效果代码<!-- * @Author: OriginalCoder * @Date: 2020-10-16 23:17:56 * @version: * @LastEditTime: 2020-10-16 23:22:05 * @LastEditors原创 2020-10-16 23:23:12 · 264 阅读 · 0 评论 -
实现display的flex布局,并随意变换navigation的展示位置
介绍在日常的很多网站中都有nav导航栏,导航栏有很多种,有竖排和横排,在这两种排列方式中,只需要加一个属性就好,下面我们来看看具体的实现效果。效果在上图中,可以看到nav是纵向排列展示,那么只要加一个属性,就能将纵向的编程横向的,display:flex,也被称为是弹性布局。后面会详细介绍flex的弹性布局。那么看下图的实现效果,是不是很有趣?编程最大的乐趣就是动手实践,实践是检验真理的唯一标准,这句话永远不会有错!兴趣是最大的老师。代码<!-- * @Author: Origina原创 2020-10-16 23:07:27 · 531 阅读 · 0 评论 -
实现隐藏元素的浮现,并带有一个小尖角(Web实践)
介绍先来看看效果是什么样,我们打开B站来看看我们要实现什么样的效果。如图中所展示的一样,当鼠标放上生活那个块元素的时候,会浮现一个选择框,并带有一个小的尖角。效果可以看看博主今天实现的效果:代码<!-- * @Author: OriginalCoder * @Date: 2020-10-16 11:14:42 * @version: * @LastEditTime: 2020-10-16 22:52:23 * @LastEditors: OriginalCoder * @原创 2020-10-16 22:53:47 · 213 阅读 · 0 评论 -
关于盒子布局的方式display的弹性布局
介绍有关于display的布局方式在之前已经介绍过了,接下来介绍另一种布局方式。display:flex效果说明这里采用了display的flex布局,justify-content属性,设置左对齐,右对齐,居中,两端对齐,接下来会在下一篇文章进行详细介绍代码<!-- * @Author: OriginalCoder * @Date: 2020-10-15 21:22:27 * @version: * @LastEditTime: 2020-10-15 22:51:00 *原创 2020-10-15 22:57:07 · 617 阅读 · 0 评论 -
仿写百度首页的float布局
介绍之前已经写过很多遍百度首页了,但是今天的记录的重点是不同以往,才用的布局方式是float,浮动的方式来布局。查看百度首页的源码是采用绝对定位的方式进行布局的今天来记录另一种布局方式,只不过是在图文混排的时候进行float浮动布局的,当然是用何种布局方式,看个人喜好和真正的需求。float的浮动布局在上一篇博客中已经有过相关介绍,关于布局的介绍,可以翻阅我上一篇博客内容实现腾讯新闻首页的Web作业——HTML+CSS(静态)(后面我会放上文章链接,目前正在审核中)效果来看看我通过float原创 2020-10-15 14:42:50 · 278 阅读 · 1 评论 -
腾讯新闻首页——秋天的第一杯奶茶(Web作业)
效果图代码<!-- * @Author: OriginalCoder * @Date: 2020-10-08 21:59:28 * @version: * @LastEditTime: 2020-10-08 22:19:36 * @LastEditors: OriginalCoder * @Description: --><!DOCTYPE html><html lang="en"> <head> <meta cha原创 2020-10-14 12:37:11 · 508 阅读 · 0 评论 -
前端学习之导航条的应用——padding和hover的综合使用
预览当鼠标箭头移动到盒子中的元素时,会出现不同的颜色和背景色,这个是hover起的作用,在绝大多数的网站中都使用了这样的属性值。代码<!-- * @Author: OriginalCoder * @Date: 2020-10-10 11:26:02 * @version: * @LastEditTime: 2020-10-10 11:39:07 * @LastEditors: OriginalCoder * @Description: --><!DOCTYPE h原创 2020-10-10 11:43:12 · 517 阅读 · 0 评论 -
仿写淘宝评价部分的盒子模型
预览代码<!-- * @Author: OriginalCoder * @Date: 2020-10-10 10:37:12 * @version: * @LastEditTime: 2020-10-10 11:09:11 * @LastEditors: OriginalCoder * @Description: --><!DOCTYPE html><html lang="en"> <head> <meta char原创 2020-10-10 11:11:57 · 388 阅读 · 0 评论 -
前端作业——实现标题和文本之间的间隔分隔符
预览效果<!-- * @Author: OriginalCoder * @Date: 2020-10-08 21:59:28 * @version: * @LastEditTime: 2020-10-08 22:19:36 * @LastEditors: OriginalCoder * @Description: --><!DOCTYPE html><html lang="en"> <head> <meta chars原创 2020-10-09 17:08:22 · 880 阅读 · 0 评论 -
仿写蘑菇街购物详情页面(HTML+CSS静态页面)
前言先来看看蘑菇街的真实面貌,看起来的确是挺复杂的,其实还好,只要掌握了基本的布局,这一点还是很好实现的对比下面是自己写的页面,对比一下,相似度已经非常高了。但是只是实现了框架和样式,并没有动作的实现。代码其他因为这是课外作业,自己最近也遇到了不少事情,心情很是低落,所以在很多注重细节的地方,我花的时间减少了很多,对自己也产生了很大的影响。一定要有一个好的学习氛围,不然你的生活总是充满了糟糕,人生处处是坑,不要把过多的时间浪费在不必要的人身上,这样就很不值得,反而影响自己的发展。...原创 2020-10-07 23:45:22 · 1507 阅读 · 2 评论