吴小花的博客
学如逆水行舟,不进则退。
展开
-
纯CSS绘制会话气泡
效果如下:html结构 <div class="lockTips">修改URL可能会导致关键词排名的浮动,流量的波动等问题,非必要<span>不建议修改</span></div>css样式.lockTips { width: 524px; line-height: 40px; background: #e6f7ff; border-radius: 4px 4px 4px 4px; border: 1px sol.原创 2021-10-29 14:02:33 · 444 阅读 · 0 评论 -
CSS按钮hove变色 | 回到顶部 | 指定区域外点击,关闭指定区域| 设置导航高亮
1.按钮hover上去变色(渐变,从底部向上变) .btn-item { text-transform: uppercase; width: 250px; line-height: 50px; text-align: center; font-size: 18px; font-family: Oswald;原创 2020-06-30 13:21:31 · 2068 阅读 · 0 评论 -
transition和animation
transiton.pic { &:hover { transform: rotate(45deg); //旋转45度 } transition: transform 1s ease-out; }animationanimation基础和写法①动画名称(name)--@keyframes,与transition不同的是,anima...原创 2019-12-26 14:50:30 · 169 阅读 · 0 评论 -
项目经验之一《常用CSS技巧》 超出部分隐藏 | 水平滚动 | 绝对定位实现居中对齐|css渐变动画|改变PNG图标颜色|分享社媒|去掉youtueb推荐视频|禁用右键
1.css超出2行隐藏并用...表示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;2.水平滚动条 display: inline-block; white-space: nowrap...原创 2019-07-09 15:14:29 · 629 阅读 · 0 评论 -
::before和::after伪元素的用法
1.常见伪类和伪元素css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。:before和::after下特有的content,用于在css渲染中向元素逻辑上的...转载 2019-05-29 23:11:50 · 640 阅读 · 0 评论 -
vscode中使用Sass,并自动编译为CSS文件
1.执行命令npm install2.全局安装Sassnpm i sass -g3.查看sass版本sass -v4.将文件自动编译为css文件sass --watch ./sass:./css5.将这行命令写到package.json文件里6.然后执行:npm run goSass如果发现上述方法不能成功,还可以使用如下方法。1.在vsc...原创 2019-04-02 15:58:27 · 16054 阅读 · 3 评论 -
响应式布局解决方案
1.remrem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。默认情况下,html元素的font-size为16px,为了计算方便,通常可以将html的font-size设置成: html{ font-size: 62.5% }这种情况下: 1 rem = 1...原创 2019-03-27 16:19:18 · 895 阅读 · 0 评论 -
响应式 Web 设计 - 媒体查询
1.CSS3@media查询使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。<!-- link元素中的CSS媒体查询 --><link rel="stylesheet"media="(max-width: 800px)" h...原创 2019-03-27 15:42:37 · 614 阅读 · 0 评论 -
css实现超出文本溢出用省略号代替
1.多行文本display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /*截取第三行*/overflow: hidden; 效果:2.单行文本overflow: hidden;text-overflow:ellipsis;white-space: nowrap;...原创 2019-03-13 13:38:46 · 402 阅读 · 0 评论 -
在vue-cli中安装scss
1.步骤一: 安装node-sass、sass-loader、style-loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev 步骤二: 安装sass-resources-loade...原创 2019-03-16 21:46:41 · 2659 阅读 · 0 评论 -
Css 预处理语言Sass、less、stylus区别
CSS 预处理器框架,分别是 Sass、Less 、Stylus。CSS预处理器为CSS提供了更多的更加灵活的可编程性。增加了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等特性。0.背景介绍 Sass:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架。目前受LESS影响,已经进化到了全面兼容CSS的SCSS(S...翻译 2019-03-10 17:28:23 · 1519 阅读 · 1 评论 -
SCSS入门学习
学习网站:https://www.w3cschool.cn/sass/n2pq15ps.html1.sass使用$符号来标识变量2.用中划线声明的变量可以使用下划线的方式引用,反之亦然$link-color: blue;a { color: $link_color;}3.在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块4.父选择器的标识符&当包含父...原创 2019-03-04 14:35:04 · 608 阅读 · 0 评论 -
sass(scss)的安装
1.sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。ruby官网:https://rubyinstaller.org/downloads/...原创 2019-03-04 12:46:46 · 4847 阅读 · 0 评论 -
css3背景渐变属性
#bg-gradient{ width: 100%;height:580px; background: -webkit-linear-gradient(left,#ee8d57,#ef6b4d); /*Webkit浏览器 Safari 5.1 - 6.0 */ background: -o-linear-gradient(left,#ee8d57,#ef6b4d); /*...原创 2018-04-09 14:28:48 · 628 阅读 · 0 评论 -
Flex 布局学习笔记
学习网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex弹性布局1.任何一个容器都可以指定为 Flex 布局Webkit 内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}注意,设为 ...翻译 2019-03-04 18:35:20 · 183 阅读 · 0 评论 -
css3 动画属性
1.css3动画属性2.@keyframes规则@keyframesanimationname{keyframes-selector{css-styles;}}3.animation(动画)属性animation: name duration timing-function delay iteration-count direction fill-mode pl...转载 2019-03-06 22:16:03 · 654 阅读 · 0 评论