随笔分类 - 前端学习
摘要：props 是子组件用来接收来自组件外部（父组件）传递进来的数据。 创建Vue应用：Vue.createApp( ) 插值表达式 用 {{ }} 定义插值表达式里面可以填入data中定义的变量，也可以填入JS表达式，但是不可以填JS语句。 template: `<div>{{message}}</d
阅读全文
posted @ 2021-11-20 16:07
Olebaba
摘要：VueX 是Vue的数据管理框架 背景：在传统的数据传递过程中，父子组件通过属性或者事件传值，多层组件通过provide/inject传值。但是存在一种需求，就是页面级别的数据传递。 基础用法 数据定义： vueX 创建了一个全局唯一的仓库，用来存放全局的数据， 数据在state中定义 数据调用：t
阅读全文
摘要：属性值 align-items的属性值有：baseline、center、flex-end、flex-start、stretch、inherit、initial、unset align-content的属性值 比align-items多了两个：space-around、space-between 当
阅读全文
摘要：justify-content 定义了flexbox flexbox内的元素在主轴的方向上的对齐方式。 它可以设置以下几种对齐方式： 靠近一方 justify-content:center； /*flex元素都居中排列，没有间距*/ justify-content:start； /*flex元素从行
阅读全文
摘要：flexbox 是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。 说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列
阅读全文
摘要：第二十二天到第二十四天：JavaScript里面的居民们 task1 题目： <div> <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type
阅读全文
摘要：倒数开始 滴答滴 滴答滴 task1 题目： 我们现在来做一个最简单的时钟，通过小练习来学习 Date，复习定时，然后再练习一下函数的封装具体需求如下： 在页面中显示当前日期及时间，按秒更新 格式为 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss 注意位数的补齐，比如：-- 假设时间为
阅读全文
摘要：第二十到第二十一天：让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能： 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项 1
阅读全文
摘要：JavaScript小练习 task 1 基于上一个任务中，关于加减乘除的任务，加上对于特殊情况的判断，比如判断两个输入框是否都是正常输入了数字类型的内容，比如除法的时候除数是否为0，当判断到输入有异常的时候，把错误信息提示到Console中。 1 <!DOCTYPE html> 2 <html>
阅读全文
摘要：HTML5如何引入外部字体 背景 现在我需要 “Montserrat-ExtraLight ExtraLight”类型的字体，但是html的font-family中找不到这个类型的字体。 于是我需要下载该类型的字体，并通过CSS将它引入html文档中。 方法 准备好下载的字体文件 在CSS文件中写入
阅读全文
摘要：字体变化设置 改变字体颜色 color 改变字体大小 font-size 改变字体粗细 font-weight 改变字体样式 font-family 改变字间距 letter-spacing 改变字体高宽比 transform: scale( 宽度：高度 ) /*实现伸缩效果*/ 引入外部字体样式
阅读全文
摘要：任务：参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=de
阅读全文
摘要：什么是圣杯布局 上部(header)和下部(footer)各自占领屏幕所有宽度。 上下部之间的部分(container)是一个三栏布局。 三栏布局两侧宽度不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 浮动方式实现 点击预览 1 <!DOCTYPE html> 2 <ht
阅读全文
摘要：今天学习了关于盒模型、浮动等页面布局的方法。 受到同学的启发，顺便学习了flex的布局。 还了解了一些编码的基本规则。 对我接下来的学习帮助很大。 交作业： HTML : https://github.com/ole511/font-end-learning/blob/master/day5.6-r
阅读全文
摘要：继承 一些属性可以被继承，一些不可以。 一般来说，字体颜色、字体大小会被继承，关于形状的如 padding 、border 、margin、width等就不会被继承。哪些属性属于默认继承很大程度上是由常识决定的。 控制继承 CSS提供了四个通用属性值来控制继承，每个CSS属性都可以接收这些值。 in
阅读全文
摘要：基本选择器 元素 类 . ID # 标签属性选择器 属性标签选择器跟在元素选择器后，例 li [class = "a"] 匹配 带有名为attr的属性 [attr] 匹配 带有名为attr的属性的元素，其值为value。 [attr = value] 匹配 带有名为attr的属性的元素，其值可以为v
阅读全文
摘要：链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时 默认的链接样式 链接具有下划线 link状态是蓝色的 visited状态是紫色的 hover状态时光标变成一个小
阅读全文
摘要：列表字体和间距 当创建样式列表时，需要调整样式，使其保持与周围元素相同的垂直间距和相互间的水平间距。 示例代码 /* 基准样式 */ html { font-family: Helvetica, Arial, sans-serif; font-size: 10px; } /*设置网页字体基准大小*/
阅读全文
摘要：border border-top设置上边界 border-bottom / border-left / border-right 同理 可以为每一条边设置 : border-top-width宽度 border-top-style类型：solid实线 dashed虚线 dotted点线 doubl
阅读全文
摘要：CSS背景 background 纯色背景 {background-colcor:gray; padding:20px} 为元素设置背景色，并设置了内边距，使得元素中的文本向外少有延伸。 用rgba设置背景颜色，例如半透明的黑色：rgba(0,0,0,0.5)，前三个参数是红绿蓝，最后一个参数可以实
阅读全文
浙公网安备 33010602011771号