css
夜码狂农
这个作者很懒,什么都没留下…
展开
-
设备像素与CSS像素关系的通俗解说及应用
设备像素与CSS像素,作为前端开发者,可能会对这两个概念感到困惑。css已经比较麻烦了,我们为什么还要用这两个概念来加重负担呢?他们是否有足够的应用场景?问题引出让我们先看两个经常发生在我们周围的案例:当我们把window10中的缩放与布局设置为超过100%时,电脑中所有图标、文字、界面都将比100%时变得更粗,原因是什么?另一个案例是:当我们对网站做移动端适配时,通常会采用750设计稿,即UI设计师的设计稿中页面宽度为750px,我们写css时却要按照375px来写。这就产生一个问题:为原创 2020-08-22 13:54:33 · 570 阅读 · 0 评论 -
CSS开发技巧(六):固定间距等比两栏布局的实现
业务场景试想,我们需要这样一种两栏布局:两栏高度固定,中间的间距固定为20px,左栏的宽度固定为父元素宽度的100%减去20px再乘以40%;右栏的宽度固定为父元素宽度的100%减去20px再乘以60%。我们是否真的需要这种布局呢?答案是肯定的。就UI设计图而言,往往只针对某种分辨率做了设计,当前端还原成设计稿时,不仅需要考虑设计图所示分辨率,还需要其他分辨率的缩放情况。当 UI设计图采用以上设计思路时,就需要前端用CSS来实现该效果。难点分析:多次运算calc不能实现我们可以用width:原创 2020-08-08 12:47:17 · 1257 阅读 · 0 评论 -
CSS开发技巧(五):妙用padding实现元素的高度和宽度保持比例
在前端开发中,我们可能需要实现一定的适配,其中常见的一个需求是:元素保持高宽比,等比例进行缩放。思路分析现在,我们来分析这一需求:由于需要缩放,宽度和高度都不能写成固定值。要保持高宽比,元素的高度和宽度中有一个属性需要根据另一个属性计算得到,那么先确定高度还是宽度呢?显然,应该先确定宽度。我们的前端开发中一般对于页面高度不会有过多的要求,相比而言宽度显得更为“珍贵”,因此应该先确定...原创 2020-02-29 14:17:57 · 1415 阅读 · 0 评论 -
CSS开发技巧(四):解决flex多行布局的行间距异常、子元素高度拉伸问题
asd原创 2019-12-12 22:59:02 · 12622 阅读 · 4 评论 -
CSS开发技巧(三):图片点击缩放
前言 利用CSS实现图片的点击缩放是一个很值得研究的效果。在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度。然而图片限制了宽度,一些图片的细节便又无法看清。 实现这种需求的一种直观方式是固定图片宽高,然后提供点击缩放的功能。这是本文要讨论的要点。 需要额外说明的是,CSS实现业务需求的方式是灵活的,这与开发者的功底也是密切相关的,实现上述的业务需...原创 2019-10-13 13:57:56 · 6074 阅读 · 0 评论 -
CSS开发技巧(二):表格合并边框后的单元格宽度计算
前言:分离边框模型和合并边框模型时表格的两种模型,它通过以下属性确定:border-collapse:separate(默认值) | collapse | inherit当采用分离边框模型时,表格单元格宽度是相当清晰的,和盒模型几乎一致。 当使用合并边框模型时,则不太明了,可能产生以下疑问: (1)两个单元格的边框合并成了一个边框,那么这个边框究竟算谁的呢? (2)...原创 2019-10-13 14:02:14 · 1831 阅读 · 0 评论 -
CSS开发技巧(一):button样式设置
button样式需要注意的有几点:1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调; 2、建议有一个padding,以免内部文本显得过于拥挤; 2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动; 3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。 4、获得焦点时的outline建议去掉,否则较为难看。普通状态样式设置: ...原创 2019-10-13 14:01:27 · 23015 阅读 · 0 评论 -
原生JS设计轮播图
什么是轮播图? 比如淘宝首页这样:一、需求分析: 窗口:显示图片的固定位置,不管切换哪种图,始终在窗口中呈现。 1、切换按钮: 在窗口中,有两个固定的按钮,分别实现查看上一张图片和下一张图片的功能。 2、跳转按钮: 轮播窗口底部,有一排圆形按钮,点击对应按钮,将出现对应的图片,同时当前按钮高亮。如,点击第五个按钮,将出现第五张图片。 3、自动播放: 当鼠标不在窗口上时,自动轮播原创 2019-10-12 09:28:49 · 378 阅读 · 0 评论 -
CSS3轻松实现彩色旋转六面体动画
一、效果预览:二、基本思路:1、首先这个一个自动触发的动画,因此应使用animation设计; 2、当鼠标放上去的时候变色,只需使用hover即可;三、实现代码:四、实践中的一些总结: 五、不足之处原创 2019-10-12 09:28:44 · 2202 阅读 · 0 评论