前端
文章平均质量分 66
lambo mercy
无限进步
展开
-
学习 Vue 03day
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。Vue Router。原创 2022-11-01 14:34:48 · 1049 阅读 · 1 评论 -
学习 vue02
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。引用自 vue-cli 官网上的一句话: 程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。链接组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。原创 2022-10-31 17:19:33 · 198 阅读 · 0 评论 -
Vue简介01
在创建 vue 实例期间,可以在 filters 节点中定义过滤器,示例代码如下。原创 2022-10-31 13:09:04 · 3096 阅读 · 0 评论 -
10_BootStrap
不适合:元素较多的网站,不适合做响应式,最好分开做。适合:元素内容较少的网站,例如:企业站。指定宽度并居中,自带间距 15px。栅格化:网页宽度等分为 12 等份。容器宽度(container)布局行 自带间距-15px。使用插件需要引入以下文件。1、引入 css 代码。// 需要注意先后顺序。列(column)数。槽(gutter)宽。原创 2022-10-15 10:44:03 · 225 阅读 · 0 评论 -
09_响应式
portrait:竖屏/ landscape 横屏。多个媒体查询,需要注意顺序,遵循 css 层叠性。根据设备宽度的变化,设置差异化样式。默认值,包括以上 3 种情形。外链式 css 引入。原创 2022-10-15 10:42:32 · 91 阅读 · 0 评论 -
08_实战
* 根字号基量 基于375px的设计图 */// 根字号基量 基于375px的设计图。1、less 中使用 rem。2、less 中使用 vw。原创 2022-10-15 10:41:09 · 71 阅读 · 0 评论 -
07_less
VS Code 插件 Easy Less 设置 settings.json。// 单行注释 快捷键 ctrl + ,单行注释不会出现在css //* 快注释 快捷键 shift + alt + A */less 运算写法完成 px 单位到 rem 单位。控制单个文件导出路径,文件第一行指定输出路径。保存 less 文件自动生成 css 文件。VS Code 插件: Easy Less。less 文件夹输出到 css 文件夹。less 一个 css 预处理器。// 可以省略后缀.less。原创 2022-10-15 10:39:50 · 372 阅读 · 0 评论 -
06_Flex 布局
flex 容器下的元素默认水平排列:默认主轴在 x 轴,弹性盒子沿着主轴排列。Flex 布局模型中,可以调节主轴或侧轴的对齐方式来设置盒子之间的间距。Float 布局会造成浮动的盒子脱标,不能撑开父级容器。弹性盒子沿主轴均匀排列,空白间距均分在弹性[盒子两侧]弹性盒子沿主轴均匀排列,空白间距均分在相邻[盒子之间]弹性盒子沿主轴均匀排列,弹性盒子与容器之间[间距相等]默认值,弹性盒子沿着主轴线被拉伸至铺满容器。主轴默认是水平方向,侧轴默认是垂直方向。修改主轴方向,实现改变元素排列方向。原创 2022-10-15 10:37:53 · 332 阅读 · 0 评论 -
05_移动端网页适配
原理:根据不同的视口宽度,给网页 html 根节点设置不同的 font-size。rem 布局方案中,将网页等分成 10 份,HTML 标签的字号为视口宽度。vw单位的尺寸 = px单位数值 / ( 1 / 100 * 视口宽度)rem宽度 = 75px / (375px / 10) = 2rem。rem单位的尺寸 = px单位数值 / 基准根字号。不同设备屏幕尺寸,设置不同的 HMLT 标签字号。设备宽度不同,HTML 标签字号设置多少合适。基准根字号 = 设备宽度(视口宽度)/ 10。原创 2022-10-15 10:33:35 · 372 阅读 · 0 评论 -
04_动画 animation
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;如果有 2 个时间值,第一个时间表示动画时长,第二个时间表示延迟时间。动画的本质:快速切换大量图片时在人脑中行成的具有连续性的画面。animation: 动画1, 动画2, ...动画N;animation: 动画名称 动画花费时长;动画:实现多个状态间的变化过程,动画过程可控。逐帧动画:两个动画之间状态不补全。构成动画的最小单元:帧或动画帧。动画名称 和 动画时长必须赋值。补间动画:两个动画之间平滑动画。原创 2022-10-15 10:31:22 · 362 阅读 · 0 评论 -
03_空间转换(3D 转换)
perspective: 像素值;/* (800-1200) */左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向。/* 透视距离(视距): 人眼睛到屏幕的距离 */transform: rotateZ(角度);transform: rotateX(角度);transform: rotateY(角度);rotate3d(x, y, z, 角度);z 轴的正方向指向用户(屏幕外边方向)x, y, z 取 0-1 之间的数字。透视效果:近大远小,近实远虚。自定义旋转周的位置及旋转角度。原创 2022-10-15 10:29:52 · 270 阅读 · 0 评论 -
02_平面转换 transform
单独设置某个方向的移动:translateX(), translateY()transform: translate(水平移动距离,垂直移动距离);transform: scale(x轴缩放倍数, y轴缩放倍数);transform-origin 原点水平位置, 原点垂直位置;使用 transform 实现位移、旋转、缩放等效果。/* 复合属性 先后顺序不一样,效果也不一样 */transform: scale(缩放倍数);transform: rotate(角度);/* x、y等比例缩放 */原创 2022-10-15 10:27:55 · 701 阅读 · 0 评论 -
11_CSS 实战 2
Search Engine Optimization 搜索引擎优化。base.css 基本公共的样式 清除浏览器默认样式。common.css 重复使用样式 网页头,网页尾。uploads/ 非固定使用的图片素材。images/ 固定使用的图片素材。index.css 页面单独的样式。标签语义化,适合的地方使用合适的标签。favicon.ico 文件放根路径。将网页制作成 html 后缀。description 描述。index.html 首页。绝对定位,盒子具备行内块特点。原创 2022-10-15 10:25:45 · 63 阅读 · 0 评论 -
10_CSS 装饰
覆盖,背景图等比缩放,直到刚好填满整个盒子没有空白,图片可能显示不全。给 hover 状态设置,鼠标移入有过渡效果,移出没有过渡效果。优点:减少服务器发送次数,减轻服务器压力,提高页面加载速度。包含,背景图等比缩放,直到不会超出盒子的最大,可能有留白。过渡需要默认状态和 hover 样式不同,才能有过渡效果。transition 属性设置在不同状态中,效果不同。transition 属性 时长, 属性 时长;溢出部分:盒子内容部分超出盒子范围的区域。给默认状态设置,鼠标移入移出都有过渡效果。原创 2022-10-14 12:09:32 · 501 阅读 · 0 评论 -
09_CSS 定位
Tips: 如果 4 个定位都有,以 top 和 left 为准。绝对定位查找父级的方法:逐级向上,最终是浏览器窗口。行内元素/行内块元素一行显示多个 -> 水平布局。数值越大,显示越靠前 */可以让元素自由的摆放在网页的任意位置。子绝父相:父级相对定位,子级绝对定位。原本垂直布局的块级元素变成水平布局。块级元素独占一行 -> 垂直布局。同层级,后写的会覆盖在先写的元素。偏移值可以设置水平和垂直方向。相对于非静态定位的父元素定位。垂直距离下边 buttom。标准流 < 浮动 < 定位。原创 2022-10-14 12:05:50 · 53 阅读 · 0 评论 -
08_CSS 实战基础
控制 input placeholder 样式。原创 2022-10-14 12:04:47 · 72 阅读 · 0 评论 -
07_CSS浮动
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素。行内元素或行内块元素:从左往右,水平布局,空间不够自动折行。浮动找浮动,下一个浮动元素会在上一个浮动元素后面,左右浮动。浮动元素会脱离标准流(脱标),在标准流中不占用位置。浮动元素比标准流高半个级别,可以覆盖标准流中的元素。作用:根据元素在 HTML 中的结构关系查找元素。给添加的块级元素设置 clear:both;标准流:又称为文档流,浏览器排列元素的规则。行内元素或行内块元素换行书写会产生一个空格。块级元素:从上往下,垂直布局,独占一行。原创 2022-10-14 12:03:39 · 88 阅读 · 0 评论 -
06_CSS 特性
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果。h 系列标签的 font-size 会继承失效。如果元素有浏览器默认样式,就不继承父元素属性。优先级高的选择器样式会覆盖优先级低的选择器。(1)子元素有默认继承父元素样式的特点。可继承的常见属性(文字属性都可以继承)a 标签的 color 会继承时效。总结:选择范围越小,优先级越高。不同选择器具有不同的优先级,(1)优先级公式(由低到高)(2)继承失效的特殊情况。,最终写在最后的样式生效。(2)复合选择器权重叠加。计算公式,每级之间不进位。原创 2022-10-14 11:44:57 · 64 阅读 · 0 评论 -
05_CSS 盒模型
代表标签div p h ul li dl dt dd form header nav footerCopy to clipboardErrorCopied代表标签a span b u i s strong ins em delCopy to clipboardErrorCopied代表标签input textarea button selectdisplay: block; 属性值效果block块级元素inline-block行内块元素inline行内元素p 标签中不要嵌套 div p h 等块级元素a原创 2022-10-14 11:43:05 · 180 阅读 · 0 评论 -
04_CSS 背景相关属性
background-position: 水平方向位置 垂直方向位置;background-image: url(图片路径);背景位置_background-position。水平方向:left center right。垂直方向:top center bottom。方位名词(最多只能表示 9 个位置)坐标轴 原点(0,0) 盒子的左上角。(默认值)水平和垂直方向都平铺。图片左上角与坐标原点重合。/* 不分先后顺序 */水平方向平铺(x 轴)垂直方向平铺(y 轴)不设置高宽会默认显示。原创 2022-10-14 11:40:54 · 168 阅读 · 0 评论 -
03_CSS 选择器
div、p、h 需要设置元素的宽度,否则会自动撑满父元素。背景颜色 background-color。红绿蓝三原色+透明度,取值 0-1。父选择器 > 子代选择器: { }VS Code 等代码编辑器自带。红绿蓝三原色,取值 0-255。#000000 简写 #000。父选择器 后代选择器: {选择器1, 选择器2: {4、hover 伪类选择器。选择器1.选择器2: {VS Code里的快捷键。选择器:hover {简写语法,快速生成代码。文字颜色 color。原创 2022-10-14 11:38:25 · 58 阅读 · 0 评论 -
02_CSS 字体和文本样式
数字 + em ( 推荐:1em=当前标签的 font-size 大小)单行文本垂直居中:line-height=元素父元素高度。如果客户端都没有这些字体就选择一种无衬线字体。倍数(当前标签 font-size 的倍数)取消上下间距:line-height=1。宋体、Times New Roman。无衬线字体(sans-serif)文字笔画粗细不均匀,并且首尾有装饰。文字笔画粗细均匀,并且首尾无装饰。层叠性:后面的样式覆盖前面的样式。等宽字体(monospace)衬线字体(serif)原创 2022-10-14 11:36:51 · 72 阅读 · 0 评论 -
01_CSS 层叠样式表
style 标签可以写在页面任意位置,一般放在 head 标签中。合法的类名:数字、字母、下划线、中划线。link 标签引入单独 css 文件。CSS 写在标签 style 属性中。id 选择器一般与 js 配合使用。CSS 写在 style 标签中。通过 link 标签引入到网页中。一个元素可以有多个类名,空格隔开。这是一段设置了css样式的文字。标签 style 属性中。一个标签只能有一个 id。一般用于统一设置页面样式。页面中唯一,不能重复。原创 2022-10-14 11:35:06 · 53 阅读 · 0 评论 -
02-HTML 标签元素
input type="password" placeholder="密码框占位符" />target: _self 当前窗口打开(默认) / _blank 新窗口打开。(3)自定义列表 Description List。(2)表格结构_thead tbody tfoot。默认选中第一项,可以指定默认选中 selected。name 属性分组,一个分组只能有一个值被选中。(2)有序列表 Ordered List。原创 2022-10-13 16:42:12 · 132 阅读 · 0 评论 -
JSON基本认识
JSON,全称是 JavaScript Object Notation,即 JavaScript对象标记法。JSON是一种轻量级(Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。JSON 的名称中虽然带有JavaScript,但这是指其语法规则是参考JavaScript对象的,而不是指只能用于JavaScript 语言。原创 2022-10-08 00:00:00 · 150 阅读 · 0 评论 -
HTML 标签
标签用于定义描述列表(或定义列表),该标签会与 ( 定义项目/名字)和( 描述每一个项目/名字)一起使用。名词1名词1解释1名词1解释21.原创 2022-10-07 00:00:00 · 94 阅读 · 0 评论 -
初识html
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件, 因此将其俗称为 HTML 文件。HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。原创 2022-10-02 11:51:49 · 86 阅读 · 0 评论