![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 67
TardisKey
这个作者很懒,什么都没留下…
展开
-
webpack安装配置
此时dist文档下出现一个bundle.js的文件,修改dist/index.html 改成引入bundle.js。同时在dist中创建一个index.html ,在src中创建一个index.js。–save-dev 表示保存在项目里,并写入package.json配置文件。新建dist文件夹(浏览器最终要读取的文件都输出在这里面),src文件夹(用于创建一个项目入口,自己项目都写在这里)在 webpack.config.js 配置相关参数。结束后,生成一个packge.json文件。原创 2023-07-03 14:58:46 · 255 阅读 · 0 评论 -
Webpack配置
https://cloud.tencent.com/developer/article/1195063原创 2021-09-30 16:12:57 · 113 阅读 · 0 评论 -
前端开发库 - BootStrap JQuery Sass
文章目录引入 Bootstrap使图片自适应移动端用 Bootstrap 居中文本创建一个 Bootstrap 按钮创建一个 Bootstrap 块级元素按钮Bootstrap 按钮的不同主题添加图标Bootstrap 栅格系统引入 Bootstrap添加如下代码到 HTML 顶部来引入 Bootstrap<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min原创 2021-09-10 15:10:27 · 291 阅读 · 0 评论 -
JavaScript -函数式编程
文章目录头等 first class 函数 高阶 ( higher order) 函数在函数中重构全局变量使用 map 方法从数组中提取数据 Array.prototype.map()使用 filter 方法从数组中提取数据使用 slice 方法返回数组的一部分使用 slice 而不是 splice 从数组中移除元素使用 concat 方法组合两个数组使用 concat 而不是 push 将元素添加到数组的末尾使用 reduce 方法分析数据使用 sort 方法按字母顺序给数组排序使用 split 方法原创 2021-09-09 13:38:43 · 140 阅读 · 0 评论 -
JavaScript -面向对象
文章目录在对象上创建方法使用 this 关键字提高代码重用性定义构造函数使用 instanceof 验证对象的构造函数在对象上创建方法let duck = { name: "Aflac", numLegs: 2, sayName: function() {return "The name of this duck is " + duck.name + ".";}};duck.sayName();使用 this 关键字提高代码重用性sayName: function() {r原创 2021-09-09 09:37:15 · 289 阅读 · 0 评论 -
JavaScript -基础数据结构及算法
文章目录数组(Array)数组(Array)> 包含类型let simpleArray = ['one', 2, 'three', true, false, undefined, null];> 数组长度Array.length> 索引let ourVariable = ourArray[0];> 设置一个索引位置的元素值ourArray[1] = "not b anymore";> push() 将元素插入到数组的末尾arr.push(7, 'V原创 2021-09-07 16:00:42 · 102 阅读 · 0 评论 -
JavaScript - 调试
文章目录使用 type of 检查变量的类型Off by one errors 错误(有时称为 OBOE)使用 type of 检查变量的类型console.log(typeof "");console.log(typeof 0);console.log(typeof []);console.log(typeof {});按顺序显示字符串 string、number、object 和 objectJavaScript 有六种原始(不可变)数据类型:Boolean、Null、Undefin原创 2021-09-03 14:33:59 · 90 阅读 · 0 评论 -
JavaScript - 正则表达式
文章目录.test() 测试字符是否存在于字符串中 /coding/匹配多个文字字符串匹配时忽略大小写 i.match() 提取匹配项全局匹配(搜索多次) g用通配符匹配任何内容(模糊匹配) 通配符(.)将单个字符与多种可能性匹配 [ ]匹配字母表中的数字和字母 连字符(-)匹配排除后的字符 否定字符集 脱字符(^)匹配出现一次或多次的字符 (+)匹配出现零次或多次的字符 (*)惰性匹配来查找字符 (匹配最小可能部分).test() 测试字符是否存在于字符串中 /c原创 2021-09-03 13:20:49 · 158 阅读 · 0 评论 -
JavaScript - ES6(ECMAScript 6.0标准)相关记录
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的版本标准文章目录var 和 let 关键字差异var 和 let 关键字的作用域var 和 let 关键字差异使用 var 关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题。var camper = 'James';var camper = 'David';console.log(camper);控制台将显示字符串 David使用 let 的时候,同一名字的变量只能被声明一次。 请注意 “use原创 2021-08-18 14:55:51 · 229 阅读 · 0 评论 -
JavaScript - 基础JavaScript相关记录
数据类型undefined(未定义)、null(空)、boolean(布尔型)、string(字符串)、symbol、number(数字)、bigint(可以表示任意大的整数)和 object(对象)原创 2021-08-12 15:18:47 · 179 阅读 · 0 评论 -
响应式网页设计-CSS网格
在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)CSS 网格 display :grid ;可以对该容器使用与 CSS 网格(CSS Grid)相关的属性grid-template-columns 添加多列.container { display: grid; grid-template-columns: 50px 50px;}在网格容器中添加两列,宽度均为 50pxgrid-template-columns 属性值的个数表示网格的列原创 2021-08-09 14:45:17 · 197 阅读 · 0 评论 -
响应式网页设计-CSS弹性盒子
CSS 灵活框布局flex布局元素称为Flex容器(flex container),简称容器。他的所有子元素自动称为容器成员,称为Flex项目(flex item),简称项目。display: flex 定位两个盒子在一个元素的 CSS 中添加 display: flex;,就可以使用其它 flex 属性来构建响应式页面一些元素中添加display: flex ,会自动布局,更好看flex-direction排列成行或列排列 flex 容器中的子元素row:横向排列(主轴水平方向,原创 2021-08-09 13:36:18 · 694 阅读 · 0 评论 -
响应式网页设计-应用视觉设计相关记录
text-align 属性控制文本的对齐方式text-align: justify; 可以让除最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘。text-align: center; 可以让文本居中对齐。text-align: right; 可以让文本右对齐。text-align: left; 是默认值,它可以让文本左对齐。strong 标签加粗文本添加 strong 标签后,浏览器会自动给元素添加这段样式:font-weight:bold;。(粗体)<p>.原创 2021-08-06 10:36:40 · 254 阅读 · 0 评论 -
响应式网页设计-基础CSS相关记录
Google字体<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">加在<style>之前font-family: Lobster,monospace;当link被注释掉,及Lobster字体失效,则会自动降级使用monospace字体多个class <img class="class1 class2"> 在一个元.原创 2021-08-05 10:34:41 · 87 阅读 · 0 评论 -
实践记录-one
1.如何将div(元素b)居中方案:新建一个最外层的div:<div class="main">(元素a)(仅在body下).main{ position: fixed; width:100%;/*设定长度高度为100%*/ height:100%; display: flex; justify-content:center;/*水平居中*/ align-items:center;/*垂直居中*/}flex应用于容器内元素...原创 2021-08-03 16:30:19 · 71 阅读 · 0 评论 -
vs code配置github
问题:拉代码时出现The authenticity of host ‘github.com (192.30.253.113)’ can’t be established.解决方法:本地少了 know_host文件,在刚刚那个位置输入yes就可以了,而不是回车问题:fatal: Could not read from remote repository解决方法:https://fzy15116089232.blog.csdn.net/article/details/111537943问题:在gi原创 2021-08-03 09:59:21 · 381 阅读 · 0 评论 -
学习网站记录
前端学习MDN原创 2021-08-02 14:15:07 · 98 阅读 · 0 评论 -
CSS小项目九宫格
<!DOCTYPE html><!-- 九宫格 --><html> <style> ul { position: fixed;/* 相对页面的位置固定 */ top: 50%; left: 50%; text-align: center;/* 居中 */ transform: translate(-50%,-50%原创 2021-08-02 14:19:24 · 105 阅读 · 0 评论 -
CSS属性记录
border-styleborder-style:dotted solid double dashed;上边框是点状右边框是实线下边框是双线左边框是虚线top规定元素的顶部边缘auto 默认值。通过浏览器计算上边缘的位置。% 设置以包含元素的百分比计的上边位置。可使用负值。length 使用 px、cm 等单位设置元素的上边位置。可使用负值。inherit 规定应该从父元素继承 top 属性的值。text-align元素中的文本的水平对齐方式left 把文本排列到左边.原创 2021-08-02 13:42:36 · 89 阅读 · 0 评论 -
CSS布局
颜色CSS 背景色<h1 style="background-color:DodgerBlue;">China</h1><p style="background-color:Tomato;">China is a great country!</p>CSS 文本颜色<p style="color:DodgerBlue;">China is a great country!</p>CSS 边框颜色<h1 style原创 2021-08-02 11:18:00 · 131 阅读 · 0 评论 -
CSS选择器
层叠样式表* (Cascading Style Sheets)描述 HTML 文档样式的语言。描述应该如何显示 HTML 元素css选择器简单选择器元素选择器在此例中,所有 <p> 元素都将居中对齐,并带有红色文本颜色:p { color: red; text-align: center;}Id选择器这条 CSS 规则将应用于 id="para1" 的 HTML 元素:id 名称不能以数字开头#para1 { ......}CSS 类选择器1、应用原创 2021-08-02 10:47:17 · 84 阅读 · 0 评论 -
响应式网页设计-HTML(标记语言)相关记录
<!DOCTYPE html><html><head><meta charset="utf-8"> 避免中文乱码<title>菜鸟教程(runoob.com)</title></head><body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p></body></html><!D原创 2021-08-02 10:16:41 · 258 阅读 · 0 评论