上一页 1 2 3 4 5 6 7 8 9 ··· 15 下一页
摘要: sass的控制指令 if : 条件语句(判断语句) for : 循环语句 while :循环语句 each : 循环语句 html结构: <h1 class="text">hello</h1> <div class="wrap">选择器</div> <p class="item">多选一吧</p> 阅读全文
posted @ 2022-03-22 22:53 秋弦 阅读(55) 评论(0) 推荐(0) 编辑
摘要: sass作用域和循环指令 作用域: 声明变量: 全局变量: 在页面的最外边声明的变量是全局变量。拥有全局作用域 局部变量: 在某个选择器内或函数内声明的变量就是局部变量 , 拥有局部作用域 变量的作用域: 全局作用域: 在任何地方都可以访问使用 局部作用域: 只能在变量声明的地方使用 html结构: 阅读全文
posted @ 2022-03-22 22:53 秋弦 阅读(74) 评论(0) 推荐(0) 编辑
摘要: sass变量的声明: 通过 $ 声明变量 , $ 后边的就是变量的名字, 比如:$wd;声明变量后需要给变量赋值 ,比如 $wd:200px 变量的命名规则: 变量名都是自定义的 变量名可以使用字母,_ 作为开头,后边可以使字母,数字,_ , - 的组合,比如:$wd:100px $_ht:100p 阅读全文
posted @ 2022-03-22 16:06 秋弦 阅读(78) 评论(0) 推荐(0) 编辑
摘要: 介绍: Sass (Syntactically Awesome StyleSheets) ,Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高 阅读全文
posted @ 2022-03-22 15:13 秋弦 阅读(199) 评论(0) 推荐(0) 编辑
摘要: ​ CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们 阅读全文
posted @ 2022-03-13 15:00 秋弦 阅读(29) 评论(0) 推荐(0) 编辑
摘要: 元素默认是基线对齐 vertical-aligin: 图片和文本的垂直方向的对齐方式 设置对齐方式时,要把所需要对齐的元素都添加该属性,并且取值保持一致 适用场景: 适用于行内块元素和行内元素,以及表格单元格(table-cell)元素垂直方向对齐方式,不能用于块级元素 取值: baseline 基 阅读全文
posted @ 2022-03-13 13:03 秋弦 阅读(373) 评论(0) 推荐(0) 编辑
摘要: 一、过渡transition 特点: 过渡是两个状态之间的过渡,只能从一种状态过渡到另一种状态 过渡需要事件触发,不能自动执行 综合属性: 可以同时控制多个属性进行过渡,多个属性之间用逗号隔开 transition: width 2s linear 1s,height 2s linear 1s; 拆 阅读全文
posted @ 2022-03-11 18:26 秋弦 阅读(185) 评论(0) 推荐(0) 编辑
摘要: 1.单行文本水平居中 说明: 只针对块元素中的行内元素,或者 行内块元素,使用text-align:center; 属性 HTML: <div class="box"> <span> 我是文字 </span> </div> CSS: .box { background-color: pink; he 阅读全文
posted @ 2022-03-07 14:31 秋弦 阅读(71) 评论(0) 推荐(0) 编辑
摘要: 1.上下margin重叠问题 HTML: <div class="box1"></div> <div class="box2"></div> CSS: * { margin: 0; padding: 0; } .box1 { height: 100px; width: 100px; backgrou 阅读全文
posted @ 2022-03-07 11:23 秋弦 阅读(35) 评论(0) 推荐(0) 编辑
摘要: 1.影响 让子元素默认横向排列 (默认主轴:水平方向;相反侧轴:垂直方向) 弹性盒子会把行内元素,变成块元素 只有一个元素时,使用margin:auto 自动居中 2.修改主轴方向 属性:flex-direction 属性值: row (默认:水平排列) row-reverse 水平取反排列 col 阅读全文
posted @ 2022-03-06 19:23 秋弦 阅读(467) 评论(0) 推荐(0) 编辑
摘要: 1.单行文本溢出显示省略号 HTML: <div> Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码 编辑器,编辑器中内置了扩展程序管理的功能。 </div> CSS: div{ he 阅读全文
posted @ 2022-03-05 22:16 秋弦 阅读(57) 评论(0) 推荐(0) 编辑
摘要: 以阿里矢量图标库为例: 1.添加图标 1.登录网站 2.找到自己需要的图标,点击加入购物车 3.点击左上角购物车图标,讲刚刚选中的图标添加到项目,选中要加入的项目,点击确定 2.使用方式(下载后使用) 1.在项目设置里面,勾选这几个选项,保存 2.将该项目的图标下载到本地,会得到一个压缩包 3.下载 阅读全文
posted @ 2022-03-05 17:05 秋弦 阅读(165) 评论(0) 推荐(0) 编辑
摘要: 1.怪异盒模型 **语法:**box-sizing:border-box; padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度。 HTML : <div> 怪异盒模型 </di 阅读全文
posted @ 2022-03-04 14:16 秋弦 阅读(76) 评论(0) 推荐(0) 编辑
摘要: CSS伪类 1.链接伪类 :link 未访问链接 :visited 已访问链接 :hover 鼠标划过链接 :active 已选中的链接 2.结构伪类 first-child 选择父元素的第一个子元素。 last-child 选择父元素的最后一个子元素。 nth-child(n) n取值:数字,ev 阅读全文
posted @ 2022-03-04 11:29 秋弦 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 字体模块(@font-face) 语法: font-family:你的字体名称 src:url(你的字体文件路径) font-weight:你的字体粗细 font-style:你的字体样式 HTML Code: <div>天道酬勤</div> CSS Code: @font-face { font- 阅读全文
posted @ 2022-03-03 20:15 秋弦 阅读(20) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 7 8 9 ··· 15 下一页