![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 76
css demo
Da Zeng
啥都好就是记性差了点ᶘ ͡°ᴥ͡°ᶅ
展开
-
DaZeng:画loading、三角图标、图片重叠排列效果
画loading、三角图标loading三角图标loading示例图:原理:把一个div变圆了旋转,缺口就是border一边透明代码 <以第一个为案例><button class="cart-load"> <view class="load"></view> //小程序 -- web 换成div同理适用 (也可以把load写成cart-load::after样式)</button>.cart-load{ posi原创 2021-12-28 11:09:07 · 502 阅读 · 0 评论 -
DaZeng:css文字的溢出隐藏及文字多行的溢出隐藏
单行 text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行更改-webkit-line-clamp的数字控制显示即行,例子为2行 text{ word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;原创 2021-09-14 19:05:48 · 172 阅读 · 0 评论 -
DaZeng:CSS3滤镜filter
CSS3滤镜filter前言使用原理前言每天一个知识点,今天的我又来记录了。说实话是第一次看到这个东西,需求是怎样的呢?大致就是做一个图标是这样的但是UI提供的图片是此时就引入了滤镜这个东西。使用引入图片<view class="exp"> <image src='/images/ico_alert.png'></image></view>设置样式.exp>image { height: 36rpx; width: 36rp原创 2021-07-21 19:16:50 · 278 阅读 · 2 评论 -
DaZeng:Flex的使用及相关问题
Flex的使用及相关问题Flex的使用flex内容溢出设置width:0设置overflowFlex的使用yyds:Flex 布局教程——阮一峰flex-box属性设置:flex-direction:row → | row-reverse ← | column ↓ | column-reverse ↑ ; 项目的排列方向flex-wrap:nowrap | wrap | wrap-reverse 换行的内容上下交换;flex-flow: <flex-direction> |原创 2021-07-20 17:17:26 · 247 阅读 · 6 评论 -
DaZeng:小程序ios安全距离及CSS的计算
小程序ios安全距离及CSS的计算为什么要设置安全距离使用wx.getSystemInfo()使用env()或constant()calc使用案例style传变量定义CSS值为什么要设置安全距离一句话就是让元素ios底部有一定的距离,不要被小黑条遮挡,当然安卓也要考虑距底部的距离只是不用考虑安全距离了。安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。使用wx.getSystemIn原创 2021-07-20 15:42:04 · 1121 阅读 · 0 评论 -
DaZeng:inline-block和vertical-align的问题分析
inline-block和vertical-align的问题分析前言inline-block的对齐原理解决问题前言功能完成了,今天来结合最近的程序上问题做踩坑一些记录。最近做的是小程序,但是这个问题放在web端也是会存在的,而且会很常见。inline-block在使用上最常见的问题还是前面一个是div包裹的img后面是文字,设置inline-block后却出现垂直方向不对齐情况。而我的问题大致则是我的view设置为了inline-block,父元素设置了高度,真机测试的时候某些机型出现了如下情况:in原创 2021-07-20 14:37:42 · 461 阅读 · 0 评论 -
DaZeng:sass的基础使用
从0独立开发企业级电商系统Vue全家桶实现小米商城(二)scssNav-HeaderVue全家桶实现小米商城(二)Vue全家桶实现小米商城(二)scss优点:预编译可统一修改。在src下新建assets文件夹创建scss文件夹存放reset.scss文件:清空浏览器的内置样式*{ margin: 0; padding: 0; outline: none;}html,body{ font: 14px/1.5 Helvetica Neue,Helvetica,A原创 2020-12-16 13:42:52 · 195 阅读 · 0 评论 -
DaZeng:响应式布局和自适应布局——深入浅出
自适应布局作用自适应是让同一个页面布局适应不同的屏幕。响应式布局作用响应式是不同的屏幕用不同的布局。响应式布局:使用媒体查询,就是写多个@media 命令来控制设备的大小,让页面在不同的宽度范围下,显示为不同的布局效果 。如果使用 min-width属性,则应该从小的断点开始写,到大的断点结束。media属性一般来说,先写一个默认大屏幕的样式;再写其它断点下的样式;可能断点判断异常,还需要在部分区间去写一个断点。link<link rel="stylesheet" media="原创 2020-11-25 16:29:50 · 459 阅读 · 0 评论 -
DaZeng:雪碧图(精灵图)的使用
雪碧(精灵)图要求显示效果:(轮播图导航栏效果)原创 2020-11-25 13:43:21 · 5172 阅读 · 1 评论