CSS记录篇
文章平均质量分 87
lilly呀
这个作者很懒,什么都没留下…
展开
-
利用css实现视差滚动和抖动效果
利用css实现视差滚动和抖动效果原创 2023-04-25 16:08:00 · 2933 阅读 · 0 评论 -
【纯CSS】ul li前缀点(圆点、正方形点等)加颜色和变色(不使用背景图)
纯CSS ul li前缀点(圆点、正方形点等)加颜色和变色(不使用背景图)原创 2023-03-17 17:54:02 · 5010 阅读 · 0 评论 -
手机端日历calendar页面布局方案
背景:最近,手机微信端的项目需要重构,涉及到日历页面,需要重新设计一个,遇到的日历页面布局如下,在此记录一下。一、日历页面基本布局 查看设计稿,日历局部的布局难点在于红色部分,涉及到三级嵌套,而且有选中与未选中状态的背景色变化,且“入住”与“离店”状态之间又有灰色背景,处理好这部分的布局结构,那么问题也就迎刃而解了。 日历全局页面,分为两个部分,底...原创 2019-04-18 13:54:28 · 961 阅读 · 0 评论 -
你所不知道的iOS8
前言:最近,微信客户端项目进行界面改版(涉及6个界面),项目进行了部分重构,由于漏考虑版本的兼容性问题,待到客服同事拿着装着iOS8的iphone6p手机测试的时候,界面就全都乱套了,立马想到不兼容性,各种查询找到了针对移动端的解决方案(一般mobile的游览器内核都要高一些)。因为iphone使用的也是webkit内核,解决方案如下:display:flex;display:-web...原创 2019-02-19 11:02:00 · 227 阅读 · 0 评论 -
从vue-element-admin框架中,学习如何优雅地使用icon
前言:本文主要记录一下,从vue-element-admin框架中,学习到使用icon的经验。希望以后,可以运用到自己的项目中。一、前端icon的发展史 在远古时代,大部分图表都是用img来实现的。这样会使一个页面的请求资源中,图片img占了大部分,为了优化有了image sprite就是所谓的雪碧图,就是将多个图片合成一个图片,然后利用css的background-position定位显示不同的icon图标。 &nbs原创 2021-09-18 19:26:05 · 1930 阅读 · 0 评论 -
vue中使用CSS的(pointer-events)禁止鼠标的点击事件
前言:在有些场景下,我们需要把原本img的点击事件,给禁止掉,变成不可点击事件。一、html部分,给img添加class属性 通过三目运算符动态添加img的属性<img src="@assets/images/unRead.png" @click="showDtpicker()" :class="calendarFlag == true?'img-onlyRead':''" /> 关键控制div、img是否可以点击的属性是: pointe...原创 2020-06-05 16:21:34 · 5459 阅读 · 0 评论 -
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化。 若是只实现一个圆环的话,只用border和border-radius就能画出来。 但是这样的圆环不能动,产生进度条效果的重要因素就是得从0 开始变化,而不是一个完整的圆环在旋转。所以,实现的思路如下: 1.把整个圆环分成左右两部分; 2.左...原创 2020-04-23 15:52:00 · 6081 阅读 · 1 评论 -
转载——《CSS世界》中提到的使用技巧
目录1.清除浮动2.文字少时居中,多时靠左3.凹凸man4.让padding、border不影响盒模型的大小5.height:100%占屏效果6.任意高度元素展开8.CSS的悬浮图片替换效果9.利于SEO的“替换元素”标题logo10.高兼容、自动等宽、底部对齐的柱状图11.高兼容性的加载效果12.增大点击区域13.不适用伪元素的“三道杠”和“圆点...转载 2019-04-04 17:45:35 · 387 阅读 · 0 评论 -
从FrozenUI中学习CSS的实际解决方案
前言:最近,在查看FrozenUI框架时,上面提及了很多了CSS的常用场景的实际解决方案,(如:1px解决方案,文字截断,占位,表单开关,角标等,同时也解决了移动端的适配问题等),感觉很有实用价值,所以在此mark一下。一、1px的解决方案 1px解决移动端retina屏幕1像素的显示问题。<ul class="ui-list-text border-list"...转载 2019-01-21 17:18:32 · 763 阅读 · 0 评论 -
学习flex布局下的flex-grow,flex-shrink,flex-basis
前言:在学会flex布局以后,为网页布局带来了很多便利,特别是在移动端,可以轻松实现以往很难实现的布局。初学flex布局的时候,推荐大家可以先看阮大神的flex布局教程(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html),可以快速掌握flex布局,实现基本布局需求。 今天记录的flex子属性:flex-grow,flex...原创 2018-12-05 17:53:03 · 1008 阅读 · 1 评论 -
css实现多行文字截断效果
背景:在做响应式系统设计的时候,经常遇到需要对标题进行文字截取的效果,如下图所示:一、先从单行文本截断入手 一般,实现单行文本截断比较容易,使用文本溢出text-overflow:ellipsis;就可以实现单行文本截断了,示例如下:div { white-space: nowrap; overflow: hidden; text-overflo...原创 2018-11-02 18:12:47 · 3397 阅读 · 0 评论 -
解决子级用CSS float浮动 而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生的原因。 如何解决父div对象自适应高度,方法有三种,接下来逐一介绍。 1、首先先看html源代码<!DOCTYPE html><html><head><meta charset="utf-8"/><title&...转载 2018-10-10 14:42:39 · 277 阅读 · 0 评论 -
从box-sizing:border-box属性入手,来了解盒模型
从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。 背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局方式,div给出的宽度是百分比的形式,即框占窗口宽度的50%,但边界和内边距是用像素来表示的怎么办?为了避免这种问题,可以使用属性box-sizing来调整框...原创 2018-06-20 14:02:00 · 138693 阅读 · 12 评论 -
使用css属性,使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素 transform属性应用于元素的2D或3D转换,这个属性允许你将元素旋转,缩放,移动,倾斜等。值描述none定义不进行转...原创 2018-05-28 18:23:24 · 163534 阅读 · 2 评论