css
文章平均质量分 50
scorpio_h
这个作者很懒,什么都没留下…
展开
-
微信小程序 文字超过行后隐藏显示省略号
两种情况:1、只需要显示一行,超过的省略号处理text{overflow:hidden;//超出一行文字自动隐藏text-overflow:ellipsis;//文字隐藏后添加省略号white-space:nowrap;//强制不换行}2、如果在多行的情况下 height: 90rpx;line-height: 30rpx;...原创 2018-05-31 11:28:16 · 9423 阅读 · 2 评论 -
position 有哪些值?absolute/relative 是相对于谁定位的?
absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 relative: 生成相对定位的元素,相对于其正常位置进行定位。 fixed: 生成绝对定位的元素,相对于视窗口进行定位. static:默认值。没有定位 inherit:规定应该从父元素继承 position 属性的值。...原创 2020-02-18 15:12:27 · 1050 阅读 · 0 评论 -
webpack之css自动转rem(px2rem-loader)
主要是使用 px2rem-loader 插件配合lib-flexible来实现1、安装px2rem-loadernpm i px2rem-loader -D2、配置px2rem-loader { loader: 'px2rem-loader', ...原创 2019-06-17 23:52:14 · 3445 阅读 · 0 评论 -
webpack之自动补齐css前缀,增强项目兼容性(postcss-loader autoprefixer)
通过 postcss-loader 和 autoprefixer 两款插件实现1、安装两款插件npm i postcss-loader autoprefixer -D2、在webpack.prod.js中加入以下配置 { test: /.less$/, use: [ ...原创 2019-06-17 23:27:22 · 3011 阅读 · 0 评论 -
CSS语法之@规则(at-rule)
at-rule由一个@关键字和后续的一个区块组成,如果没有区块,则以分号结束。@charset用于提示css文件使用的字符串编码方式,它如果被使用,必须出现在最前面。这个规则只是在给出语法解析阶段前使用,并不影响页面上展示效果。@charset "utf-8"@import用于引入一个css文件,除@charset规则不会被引入外,可以引入一个文件的全部内容。@impo...原创 2019-02-09 11:54:25 · 8879 阅读 · 1 评论 -
iconfont在项目中的使用方式
iconfont是一个阿里的图标库1、地址: https://www.iconfont.cn2、注册登录后选择‘我的项目’,并创建我的项目3、选择需要的图标并加入购物车,选择购物车把购物车内的图标加入项目文件夹中4、点击下载至本地,会获得如下文件夹和文件。5、下面这一排文件有用,上面3个没有用。6、在项目中新建一个iconfont文件夹,将下面这6个文件放入...原创 2019-02-03 21:56:24 · 2072 阅读 · 0 评论 -
react-transition-group中TransitionGroup配合CSSTransition做列表动画渲染
1、js文件import React, { Component, Fragment } from 'react'import { CSSTransition, TransitionGroup } from 'react-transition-group'import './style.css'class App extends Component { constructor(pr...原创 2018-12-22 15:15:12 · 948 阅读 · 0 评论 -
react-transition-group中CSSTransition的基础用法
1、加载react-transition-groupyarn add react-transition-group或npm install react-transition-group --save2、在react组件中引入import { CSSTransition } from 'react-transition-group'3、编写简单的React组件代码...原创 2018-12-22 14:32:11 · 5016 阅读 · 0 评论 -
使用CSS3制作简单的React的动画效果
React上仅使用CSS3实现简单的动画效果,以下demo实现的是简单的文字展现和消失动画1、展现效果的React模版和简单的JS代码,主要是通过state.show的bool值控制hello的展现和消失import React, { Component, Fragment } from 'react'import './style.css'class App extends Co...原创 2018-12-22 10:07:31 · 743 阅读 · 0 评论 -
手写横向文字滚动
1、html 文章标题1文章标题2文章标题3文章标题4文章标 feawfaw efaw feawfawe faw ef原创 2017-06-14 16:49:19 · 435 阅读 · 1 评论 -
用CSS做文字向上移动的轮播
hellohellohellohellohellohellohellohellohellohello hellohellohellohellohellohellohellohellohellohello hellohellohellohellohellohellohellohellohellohello原创 2017-04-14 18:06:52 · 4108 阅读 · 0 评论 -
用CSS制作类似磨砂玻璃效果
background:hsla(0,0,100%,.16);一句话搞定。。原创 2017-04-26 16:53:07 · 2123 阅读 · 0 评论 -
使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。displ转载 2017-04-19 17:22:58 · 2460 阅读 · 0 评论 -
只用CSS修改radio的原点样式
需要两个label,第一个label配合input,第2个label才是input的内容HTML:微信支付CSS: .regular-radio { display: none; } .regular-radio + label { -webkit-appearance: none;原创 2017-04-14 14:43:51 · 9269 阅读 · 0 评论 -
文字垂直居中的方法记录
1、给个行高2、多行文本固定高度垂直居中 content age .wrapper{ height:400px; display:table; } .content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099;原创 2017-03-23 17:42:07 · 475 阅读 · 0 评论 -
select如何让标题不显示在选项中以及修改三角形图标样式
請選擇 女性 男性 保密主要就是加一个“hidden”属性原创 2017-03-30 09:37:18 · 2140 阅读 · 0 评论 -
解决ios电话颜色会变的问题
meta name="format-detection" content="telephone=no"/>原创 2017-03-28 12:22:04 · 821 阅读 · 0 评论