css3
周家大小姐.
这个作者很懒,什么都没留下…
展开
-
css文字垂直居中
.label-library-li-left { writing-mode: vertical-rl; }原创 2021-08-12 10:21:16 · 150 阅读 · 0 评论 -
vue 竖线写法并去附最后一个竖线
<ul class="indicators"> <li v-for="(li, idx) in item.dataList" :key="idx"> <div class="name">{{ li.title }}</div> <div class="number">{{ li.number }}</div> //去除最后一个竖线 ..原创 2021-07-08 15:28:32 · 2705 阅读 · 0 评论 -
css3 display: grid;弹性布局一行固定几个
我这里设置的是一行3个间隔20px我用的是vue <ul ref="scrollView" class="shop-list" @click.stop="handleImgClick($event)" > <li v-for="(item, index) in slidelist" .原创 2021-07-08 13:51:36 · 6001 阅读 · 0 评论 -
css 文本两端对齐及数字两端对齐
html: <view class="content"> <view class="title">{{cell.title}}</view> <view class="name">{{cell.name}}</view> ...原创 2019-07-01 18:16:45 · 2943 阅读 · 0 评论 -
H5 video在ios上播放视频时会默认全屏显示,通过给video标签添加下面属性可以解决。
webkit-playsinline="true"playsinline="true"<video src="https://cdn.xiaobei.beer/event/public/reserve/assets/video/intro.mp4" poster="./assets/images/video-area.jpg" webkit-playsinline...原创 2019-09-03 18:07:45 · 4840 阅读 · 0 评论 -
H5 使用textarea输入时让文字下方出现下划线
<!DOCTYPE html><html lang="zh"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <...原创 2019-09-05 14:32:54 · 3489 阅读 · 0 评论 -
html css 横杠样式设置
<!-- 活动详情弹框 bigin --> <div class="z_activity_popup"> <div class="z_activity_mask"> <div class="z_activity_body"> <p class="z_activity_close">X<...原创 2019-09-05 17:05:47 · 2339 阅读 · 0 评论 -
css html 编写凌形图案
<div class="z_activity_diamond"> <div class="z_activity_diamond_top"></div> <div class="z_activity_diamond_bottom"></div><br /> ...原创 2019-09-05 17:28:41 · 252 阅读 · 0 评论 -
css 实现弹框滚动条
<!-- 活动详情弹框 bigin --> <div class="z_activity_popup"> <div class="z_activity_mask"> <p class="z_activity_close"> <span class="z_activity_close_...原创 2019-09-05 18:39:31 · 2033 阅读 · 0 评论 -
css 自定义滚动条样式
/* 滚动条样式 */::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0;}::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px;}::-webkit-scrollbar-...原创 2019-09-07 11:39:11 · 206 阅读 · 0 评论 -
css3 设置背景模糊
.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url() no-repeat 0 0 ; backgroun...原创 2019-05-29 20:41:40 · 1576 阅读 · 0 评论 -
vue引入less文件
npm install less less-loader在下方文件中配置:module: { rules: [{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", }, ] },重新启动:npm run dev<s...转载 2018-05-03 11:49:23 · 3633 阅读 · 0 评论 -
css3 flex使用
.box{display:flex;}flex的6个属性:flex-direction 容器内项目的排列方向(默认横向排列) flex-wrap 容器内项目换行方式 flex-flow 以上两个属性的简写方式 justify-content 项目在主轴上的对齐方式 align-items 项目在交叉轴上如何对齐 align-content 定义了多根轴线的对齐方...转载 2019-02-15 11:26:54 · 1220 阅读 · 0 评论 -
css3上下左右布局
html <!-- 图标分类 --> <view class="big-logo"> <block wx:for="{{logos}}"> <view class="logoinfo"> <image style="width:原创 2019-02-22 15:34:00 · 1758 阅读 · 0 评论 -
css3 position:sticky粘性定位
该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 54px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量 sticky属...原创 2019-04-13 14:27:33 · 635 阅读 · 0 评论 -
css3 flex-shrink 盒子收缩
.box{ display:flex; .child{ flex-shrink:10px 0 1; }}原创 2019-04-13 15:35:23 · 561 阅读 · 1 评论 -
css3 实现左右布局
.box{ display: flex; justify-content: space-between;//左右平均布局 width:300px; height: 300px; background: pink;}.left ,.right{ background: red; width: 100px; height: 100px;}...原创 2019-04-22 23:02:49 · 3201 阅读 · 0 评论 -
css3 从左到右自动换行和多行排列方式
如果一行放不下就会自动换行flex-wrap: wrap;.box{ display: flex; justify-content: space-between;//左右布局 width:300px; height: 300px; background: pink; flex-wrap: wrap;}.child1 ,.child2{ backgroun...原创 2019-04-22 23:33:10 · 7224 阅读 · 0 评论 -
css3 使用flex布局后遗症
因为在一个小程序中开发,采用的都是display: flex;justify-content: space-between;/* 自动换行 */flex-wrap: wrap;但是如果最后的数单个是没问题;如果只有两个的话;中间就会空出来一个,如果采用css3的justify-content: flex-start方法;那么他右边会空也来多一点;所以只能用js控制这...原创 2019-05-02 12:39:57 · 1086 阅读 · 0 评论 -
css3 flex-grow,flex-shrink,flex-basis三者的结合使用
不管在什么情况下左边的盒子宽都不会变 <style> .container{ display: flex; } .left{ background: #000; height:100px; /* flex-grow: 800px; 是扩...原创 2019-04-29 11:40:06 · 564 阅读 · 0 评论 -
css 修改placeholder 占位符 字体颜色
<input class='search-input' placeholder-class='placeholder-input' placeholder='蚂蚁花呗'></input> .placeholder-input{ color: #fff;}原创 2019-04-29 12:12:54 · 1781 阅读 · 0 评论 -
css3 超出部分显示省略号
/* 超出部分显示省略号*/display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。.goods { /* 一行显示*/ -webkit-line-clamp: 1; /* 将对象作为弹性伸缩盒子模型显示 */ display: ...原创 2018-11-22 21:26:27 · 1880 阅读 · 0 评论