![](https://img-blog.csdnimg.cn/20210301121538314.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 69
CSS基础知识
Harry-iu
这个作者很懒,什么都没留下…
展开
-
Sass:css的预处理器的使用规则
文章目录认识sass安装语法规则动态变量嵌套mixin alert函数继承extend@import方法data-type数字函数字符串处理方法颜色函数列表 List使用interpolation方法控制指令自定义函数警告和错误公众号:今日在学来源博客:【Harryの心阁】认识sass它是一个css的预处理器, 文件的后缀为.scss安装npm i -g sass# 使用$ sass <input.scss> [output.css]语法规则动态变量// 使用变量,原创 2021-08-17 12:26:51 · 242 阅读 · 0 评论 -
CSS3伪类元素 before和after 设置背景尺寸
JavaScript伪类元素来源博客:【Harryの心阁】伪类元素是行内元素,直接设置宽和高是没有反应的,使用相对定位absolute或者给伪类元素加display:block/inline-block 才能设置宽高要注意content中如果设置图片后,无法控制其大小将图片用作背景效果,通过background-size控制其大小,而且要注意先写background:url()再写background-size否则效果无法实现错误示范section ul a:nth-child(2原创 2021-02-19 14:32:41 · 3247 阅读 · 1 评论 -
自定义邮箱模板,邮箱回复,卡片模式
JavaScript1.仓库介绍2.演示图例3.模板介绍4.模板使用5.版权来源博客:【Harryの心阁】1.仓库介绍此仓库为邮箱回复模板,卡片形式使用请保留作者信息,谢谢⭐我的博客地址:【Harry】2.演示图例3.模板介绍index1.html为自定义通知邮件模板index.html为自定义博主通知邮件主题textarea文件中自定义回复是以textarea标签写的,兼容性较差4.模板使用此邮箱模块试用于【twikoo】等等修改变量可适配其他的评论框架原创 2021-02-11 22:13:10 · 545 阅读 · 1 评论 -
CSS3知识回顾(13)+Bootstrap前端框架
规范git指令git commit的规范化查看信息响应式布局Bootstrap前端框架栅格系统(grip system)响应式工具来自博客:【Harry】git指令git --version 查看git版本git diff 比较文件的不同,及暂存区(staging area)和工作区(workspace)的差异git commit的规范化格式:<type>(<scope>):<subjext>type(必须)feat:新功能(feature)。原创 2021-02-04 22:50:13 · 161 阅读 · 0 评论 -
给你的博客顶部添加灯笼特效,牛气冲天
查看toc查看效果自定义内容源码如下来自博客:【Harryの心阁】,原创转载请标明出处,谢谢❤查看效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Za8ggMY0-1612341634904)(https://7.dusays.com/2021/02/03/21a146a79535d.gif)]演示站点: 点击这里自定义内容可自定义灯笼字体/* 修改灯笼的字体 */.d-box .d1::after{ content: '牛年吉祥';}原创 2021-02-03 16:44:14 · 458 阅读 · 0 评论 -
CSS知识回顾(11)flex
flex常见布局flex父级属性flex子项属性背景渐变常见布局流式布局(百分比布局)–重点宽度加最大值或者最小值控制max-width/min-width<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">二倍精灵图将精灵图缩放为原来的一半在测算距离在缩放代原创 2021-02-01 22:39:52 · 96 阅读 · 0 评论 -
CSS知识回顾(10)
知识回顾CSS3思维导图3D转换透视perspective3D旋转CSS移动端background特殊样式来源博客:u.mr90.topCSS3思维导图3D转换x右面为正,左边为负y下面为正,上面为负z外面为正,里面为负transform:translate3d(x,y,z),且xyz都不能省略透视perspective透视(视距)写到被观察元素的父盒子上3D旋转可以沿着xyz分别旋转,加透视效果更明显使用左手定则判断方向transform:rotate3原创 2021-01-31 22:24:30 · 1987 阅读 · 4 评论 -
CSS知识回顾(9)
知识回顾CSS3 2D转换transform-originscale(x,y)2D综合写法动画动画序列动画属性速度曲线细节小熊案例来源博客:u.mr90.topCSS3 2D转换translatetranslate 移动,transform:translate(x,y)translateX/Y 右/下移动translate不会影响其他的元素如果里面的参数是%移动的而距离是盒子的宽度或者自身元素的%translate对行内元素是无效的rotaterotate(ndeg),旋转原创 2021-01-31 22:23:26 · 121 阅读 · 2 评论 -
CSS知识回顾(8)
知识回顾css初始化HTML5input属性CSS3新选择器属性选择器结构伪类选择器伪元素选择器盒子模型css滤镜(filter)CSS3calc函数CSS3过渡 transition小米商城logo的实际运用来源博客:u.mr90.topcss初始化* { margin: 0; padding: 0}em, i { font-style: normal}li { list-style: none}img { border: 0;原创 2021-01-31 22:21:17 · 122 阅读 · 0 评论 -
CSS知识回顾(7)
知识回顾css定位固定定位粘性定位定位叠放次序绝对定位盒子局中定位的特殊特性浮动和定位元素的显示和隐藏精灵图vertical-align属性文本省略号margin负值的使用来源博客:u.mr90.topcss定位为什么需要定位-因为标准流和浮动流无法快速实现定位的组成:定位模式+边偏移边偏移使用top,buttom,right,left属性移动静态定位:position:static(很少使用)相对定位:position:relative(位置保留)绝对定位:position:abso原创 2021-01-31 22:19:38 · 112 阅读 · 0 评论 -
css知识回顾(6)
知识回顾常见的元素圆角的使用阴影的使用浮动使用问题总结来源博客:u.mr90.top常见的元素块级元素:(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等)行内元素:(span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、sm原创 2021-01-31 22:18:31 · 131 阅读 · 0 评论 -
css知识回顾(5)
知识回顾行高特性背景css特性盒子模型边框border内边距padding外边距margin圆角边框来源博客:u.mr90.top行高特性line-height=height可以实现垂直局中line-height>height 文字偏下line-height<height 文字偏上font行高可以跟单位也可以不跟,如果不跟,则是是的倍数背景background-repeat: repeat,no-repeat,repeat-x,repeat-ybackground-p原创 2021-01-31 22:17:10 · 108 阅读 · 0 评论 -
css3知识回顾(4)
知识回顾font复合属性文本属性选择器后代选择器子选择器并集选择器伪类选择器元素来源博客:u.mr90.topfont复合属性font: font-style,font-weight,font-size/line/height,font-familyfont-size和font-family两个属性不能省略文本属性text-decoration 文本修饰 text-indent 文本缩进选择器后代选择器元素1 元素2 { 声明 },元素2是元素1的孩子,也可以是孙子,也可以类原创 2021-01-31 22:16:00 · 83 阅读 · 0 评论 -
css知识回顾(3)
知识回顾css字体css链接css列表css表格css轮廓来源博客:u.mr90.topcss字体font-variant:把段落设置为小型的大写字母字体属性有small-caps,normal,inherit16px=1emcss链接a标签的状态a:link普通的,未被点击的链接时候的状态a:visited用户已经访问的链接a:hover鼠标指针位于链接的上方a:active链接被点击的时刻顺序要求a:hover 必须跟在a原创 2021-01-31 22:14:32 · 128 阅读 · 0 评论 -
CSS知识回顾(2)
知识css创建css背景css文本css创建插入样式表的方法有三种:外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)CSS 优先规则:内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器css背景关键字{% tabs bg %}值描述repeat默认。背景图像将在垂直方向和水原创 2021-01-31 22:12:10 · 117 阅读 · 0 评论 -
Css知识回顾(1)
知识什么是css思维导图css语法css派生选择器css ID选择器css 类选择器属性选择器什么是css层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。思维导图css语法css基础语法选择器+声明(属性+值)注:多个属性值之间加;css高级语法原创 2021-01-31 22:08:58 · 159 阅读 · 0 评论