Web前端开发
关注
分享
扫一扫
文章平均质量分 66
打好基础，才能走的更高更远
VantageCesar
这个作者很懒，什么都没留下…
展开
-
Position定位
前端必备知识：定位原创 2022-06-07 15:16:51 · 228 阅读 · 0 评论 -
浮动Float、高度塌陷和BFC以及解决方式
本文主要介绍浮动以及其特点，如何解决浮动所带来的影响。原创 2022-06-06 23:22:20 · 144 阅读 · 0 评论 -
MAC在Chrome安装vue插件
下载插件点击下方链接选择master分支下载zip并解压到本地下载地址：https://github.com/vuejs/vue-devtools命令行运行命令行打开压缩包命令行切换至vue-devtools-master根目录通过npm安装依赖（如果没有请自行百度安装node.js）npm install 构建该项目npm run build找到manifest.json文件,打开文件并修改属性文件路径：vue-devtools-master / shells原创 2021-07-15 12:39:07 · 1344 阅读 · 0 评论 -
一行代码实现暗黑模式
牛刀小试html代码<input type="checkbox" id="switch"/><label for="switch">Toggle</label>css代码/*样式反转*/.dark-mode{ filter:invert(1) hue-rotate(180deg);}js代码 let toggle = document.querySelector("#switch"); toggle.addEventListene原创 2021-06-20 20:34:50 · 560 阅读 · 0 评论 -
html+css制作侧边栏效果
关键目录结构index.htmlcssfont-awesome.cssindex.cssfontsimages关键代码展示<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>侧边展开导航栏(全隐藏)</title> <!-- 事先引入的字体图标库 观看此视频之前可以看一下上个视频简介 接上个视频发原创 2021-02-16 13:56:07 · 3427 阅读 · 0 评论 -
html+css+javascript圆形导航栏炫酷动态效果
制作炫酷圆形导航栏该效果适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。<!doctype html><html><head><meta charset="utf-8"><title>Circle</title><style>html, body { height: 100%;}body { background原创 2021-02-16 13:00:42 · 1584 阅读 · 1 评论 -
使用javascript、Ajax制作前端拟态风格天气预报功能
weather.html<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <原创 2021-02-16 12:52:27 · 601 阅读 · 0 评论 -
javascripe制作点击鼠标出现文件效果
MouseClickwindow.onload = function() { //定义点击出现文字类 function ClickFrontShow() { //定义所需文字和颜色 this.fron = ['Lucian','徐赞','❤','富强', '民主', '文明', '和谐', '自由', '平等', '公正' ,'法治', '爱国', '敬业', '诚信', '友善']; this.colo = ['#FF69B4', '#ff原创 2021-02-16 12:30:59 · 136 阅读 · 0 评论 -
JavaScript初级篇—对象
JavaScript对象JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。所有事物都是对象：JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。数字型可以是一个对象。字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象甚至函数也可以是对象对象只是一种特殊的数据。对象拥有属性和方法。访问对象的属性属原创 2020-12-12 11:00:11 · 140 阅读 · 0 评论 -
制作漂亮的搜索栏效果
搜索栏html代码<div class="search-icon"> <input type="text" /> <span class="circle"></span> <span class="handle"></span></div>css代码* { padding: 0; margin: 0;}body { display: flex; justify-conten原创 2020-12-09 16:27:41 · 689 阅读 · 0 评论 -
关于CSS居中那些事
关于CSS居中的那些事行内元素DOM结构<div class="parent"> <span class="child">content</span></div>水平居中text-align:center.parent { background-color: red; text-align: center;}width:fit-content.parent { background-color: red; widt原创 2020-12-09 16:21:52 · 102 阅读 · 0 评论 -
JavaScript初级篇—闭包精细版
闭包精细篇function test(){ var arr = []; for(var i = 0;i < 10;i++){ arr[i] = function(){ document.write(i + " "); } } return arr;}var myArr = test();for(var j=0;j<10;j++){ myArr[j]();}结果显示：10，10，10，10，10，10，10，10，10，10分析：arr[i] = func原创 2020-09-10 20:56:17 · 92 阅读 · 0 评论 -
JavaScript初级篇—作用域、闭包、立即执行函数精解
作用域精解[[scope]][[scope]]：每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合。作用域链作用域链：[[scope]]中所存储的执行器上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。执行期上下文执行期上下文：当函数执行时，会创建一个称为执行期上下文的内部对象(AO/GO)。一个执原创 2020-09-03 10:52:56 · 129 阅读 · 0 评论 -
使用CSS3新增属性实现动画集锦
现如今，不仅JavaScript和JQuary等技术能够实现简单动画，CSS3也能代替JavaScript实现一些简单的动画了！下面就跟我一起操练起来吧！CSS3实现简单动画简单阴影盒子动画bilibili置顶动画3D导航栏旋转动画简单导航栏遮罩动画一遮罩动画二淡入淡出动画切换动画简单阴影盒子动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2020-08-31 16:55:04 · 454 阅读 · 0 评论 -
javascript初级篇—预编译
js运行三部曲语法分析(通篇扫描的过程)预编译解释执行引例function test(){ console.log('a');}test();//a在这个例子中，由于JavaScript是解释性语言，因此会解释一句执行一句。最终的结果为a.test();function test(){ console.log('a');}如果是这种情况，将test()放在函数前面，结果依然能执行并且为a，这就是预编译的产生的效果.在看一个例子console.log(a);var原创 2020-08-28 11:37:50 · 179 阅读 · 1 评论 -
函数小练习
函数小练习刚刚接触函数这一章，有许多重要的细节需要小伙伴们一个一个去掌握，就让我们来练习几道小题目吧！1.写一个函数，功能是告知你所选定的动物叫声 function showVoice(animal){ switch(animal){ case "dog": document.write("汪汪"); break; case "frog": document.write("呱呱"); break; case "cat": document.write("喵喵");原创 2020-08-27 21:26:36 · 326 阅读 · 0 评论 -
javascript初级篇—函数、初始作用域
函数定义函数声明函数表达式组成形式函数名称(*尽量使用驼峰式命名规则)参数形参实参返回值作用域函数声明JavaScript 使用关键字 function 定义函数。函数可以通过声明定义，也可以是一个表达式。<script type = text/javascript>function test(){ //代码块}</script>弱类型语言永远都输出不了地址，只能输出地址所指向的空间！函数表达式命名函数表达式Jav原创 2020-08-25 22:04:38 · 151 阅读 · 0 评论 -
JavaScript初级篇—基本数据类型、typeof、类型转换
JavaScript基本数据类型数据类型string、number、Boolean、object、function、symbol对象类型object、date、array不包含任何值的数据类型null、undefinedtypeof操作符typeof的作用就是用来查看js变量的数据类型在此之前，你需要了解JavaScript的基本数据类型并且记住一下几点:NaN属于Number类型Array、Date、NULL属于object类型未定义变量属于undefin原创 2020-08-24 22:31:52 · 234 阅读 · 0 评论 -
Javascript初级篇—条件语句，循环语句
条件语句使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。//if 语法结构<script type="text/javascript">if(条件为true){ //代码块}</script>了解了if基本语法之后，接下来直接实现一个简单的案例！提前小知识:使用window.prompt(‘input’)来输入数据//if 语法结构<script type="text/javascript"> var s原创 2020-08-23 20:55:37 · 316 阅读 · 0 评论 -
JavaScript初级篇—javascript入门
浏览器组成shell部分内核部分渲染引擎(语法规则和渲染)js引擎其他模块浏览器内核主流浏览器内核IEtridentChromewebkit/blinkfirefoxGeckooperaprestoSafariwebkitjavascript的特点解释性语言单线程ECMA标注——为了取得技术上的又是，微软推出了JScript，CEnvi推出了ScriptEase，与JavaScript同样可以在浏览器上运行。为了统一原创 2020-08-23 11:00:42 · 293 阅读 · 0 评论 -
CSS初级篇—两栏布局、BFC及两个经典bug、浮动模型
两栏布局众所周知，div属于块级元素，其特点是独占一行，那么如何让两个div并到一排呢？因此我们需要用到我们上章讲到的定位来实现这个效果。//html代码<div class="right"></div><div class="left"></div>//css代码.right{ position: absolute; width: 100px; height: 100px; background-color: #原创 2020-08-22 17:15:33 · 200 阅读 · 0 评论 -
CSS初级篇—基本属性、盒子模型、层模型及定位
CSS基础篇—基本属性、盒子模型、层模型及定位CSS基本属性CSS常用属性元素分类盒子模型层模型定位绝对定位(absolute)相对定位(relative)固定定位(fixed)CSS基本属性css基本属性用来填充css内容基本结构如下：选择器{ 属性名:属性值; 属性名:属性值;}CSS常用属性font-size 设置字体大小(任何字体的大小设置的为它的高而不是宽)font-weight 字体加粗(属性值：bold、lighter、 normal、bolder)*字体能不能被加到原创 2020-08-22 11:46:54 · 219 阅读 · 0 评论 -
CSS补充篇—css选择器权重计算问题
CSS权重计算在开发过程中，编写css样式时，会有css属性和选择器的优先级问题。因此我们需要了解内部结构和原理才能达到自己想要的效果。首先你需要了解每个选择器的权重值是多少，如果您不知道，请点击下方链接跳转到另外一篇博客中，寻找到选择器权重表进行查看CSS基础篇选择器权重就单论css权重这个知识点，据说有很多在大厂里面的前端工程师都有些人不知道这个知识点，所以学到就是赚到，下面就让我举几个例子带大家感受一下权重的重要性吧！权重计算的特点：只要写在同行的选择器，只要将每个选择器的权重值相加即可原创 2020-08-22 09:55:36 · 238 阅读 · 0 评论 -
CSS初级篇—引入、选择器、选择器权重
CSS引入CSS(cascading style sheet)层叠样式表行间样式<div style="width:100px; height:100px; background-color:red"> </div>页面级css<style type="text/css"> </style>外部css文件//a.html<head><link rel="stylesheet" type="text/css"原创 2020-08-21 21:54:45 · 223 阅读 · 0 评论 -
HTML初级篇—标签和属性
HTML初级篇—基础标签HTML（HyperText Markup Language）标签标签属性几种标签常用的属性HTML字符实体HTML（HyperText Markup Language）超文本标记语言标签html语言是由一对一对标签组成，每一对标签都有其特殊的功能，由头标签和尾标签组成。1. 结构化标签—<html>和</html>—<head>和</head>—<body>和</body>—<title原创 2020-08-21 17:13:07 · 327 阅读 · 0 评论