CSS
文章平均质量分 81
Joyce的前端日常
这个作者很懒,什么都没留下…
展开
-
CSS之自定义原生checkbox样式
需求原生的checkbox的样式基本不能满足项目的要求。在项目上,常常不使用原生的checkbox,而做个假的,通过点击事件来判断是否选中。但往往,这并不是一个好的办法。如何解决?可以通过伪类来自定义checkbox的样式。原生checkbox样式:自定义checkbox样式:实现demo:https://jsfiddle.net/ken0qvj6/1/<div> ...原创 2020-03-11 16:21:52 · 2125 阅读 · 0 评论 -
CSS实现两行input框样式
需求实现如下这样的两行的input框样式。placeholder是两行的:在输入的时候也是两行:实现demo: https://jsfiddle.net/2L7adr86/不要想着把input变为两行,而是直接使用textarea。如果在mobile的时候需要显示成input一样的样式,可以将row的值改成1,并在样式上加上white-space: nowrap;<texta...原创 2020-03-09 19:05:58 · 5543 阅读 · 0 评论 -
CSS之:focus-within自身或某个后代focus的伪类
1. 什么是:focus-within?:focus-within 是一个CSS 伪类 ,表示一个元素或其后代元素获得焦点。在表单中,这个伪类非常有用。2. 兼容性需要注意的是,IE不支持。3. 例子看下面这个例子,在input被选中的时候,隐藏*,并把整行变为灰色。<form> <div class="field"> <span>...原创 2020-02-24 17:54:54 · 858 阅读 · 0 评论 -
List样式进阶——图片环绕、分栏多列布局
前言好几个月没有更新了,也侧面反应工作太忙。最近被各种List的样式折磨得不轻。看似样式简单,但是在实现时也遇到不少问题。这篇小文记录一下,也提供给遇到相似问题的同学。List图片环绕如图,实现这样一个效果:List环绕在图片周围List的点始终和段落对齐,且在内容的外部实现demo: https://jsfiddle.net/doyk9hx1/1/<div class...原创 2019-10-16 11:20:20 · 674 阅读 · 0 评论 -
实现表格第一列固定
背景(1) 需求固定表格的第一列,其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。(2) 难点这个功能的难点在于:如果把第一列从表格中抽出,行无法对齐。(3) 已有解决方案网上有很多解决方案:固定表格高度,只能显示一列。将第一列抽出固定在最左。js动态计算各高度对于这些方案要不过于繁琐复杂,要不单行显示不利于用户体验。实现对于...原创 2018-05-21 11:51:30 · 8959 阅读 · 1 评论 -
移动端H5嵌入iframe滚动问题
背景(1) 实现功能如图,悬浮窗中为iframe,如果超出容器大小实现滚动。(2) 问题在iOS上,悬浮窗中的内容如果不是iFrame是可以滚动的,但换成iframe后就无法在其中滚动。解决方案(1) 思路问题在于overflow: auto或者overflow: scroll没有生效。需要在容器上加上:height: 57vh;overf...原创 2018-05-23 17:13:34 · 9325 阅读 · 0 评论 -
Flex布局
文章目录1. 前言(1) Flex的兼容性(2) 为什么要使用Flex?1. 前言(1) Flex的兼容性作为一个经历过需要兼容IE6时代的前端,不需要用float后,使用position(absolute)和display(inline-block)已经很爽了。Flex其实已经出现很久了,但是原来因为浏览器的兼容问题,很多实际项目并不能使用。现在它兼容性已经能在项目中被接受了,如下:...原创 2019-01-18 18:22:40 · 880 阅读 · 0 评论 -
Flex布局——flex-basis、flex-grow、flex-shrink
1. 前言Flex布局的基础以及其他属性,请参考上篇:https://blog.csdn.net/joyce_lcy/article/details/86544661。为什么会把这个部分抽出来单独作为一篇呢?因为这三个属性不太容易理解并且需要搭配在一起使用。2. 剩余空间剩余空间:是父容器在主轴上可以被项目瓜分的空间。以下图为例,黑色边框是父容器,ABC是项目。白色区域为剩余空间,300...原创 2019-02-20 18:11:29 · 1281 阅读 · 0 评论 -
CSS3自定义滚动条
(1) 属性[1]::-webkit-scrollbar 滚动条整体部分[2]::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。[3]::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)[4]::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分[5]::-we...原创 2019-03-07 17:57:02 · 722 阅读 · 0 评论 -
CSS去除原生select箭头
去除原生select的默认样式,去掉箭头。select{ border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none;}select::-ms-expand { display: none; }原创 2018-03-20 16:29:44 · 5828 阅读 · 0 评论 -
CSS3序列帧动画
本文介绍了CSS3种的animation以及如何实现帧动画原创 2017-12-04 16:49:46 · 20524 阅读 · 3 评论 -
全屏切换_页面
时下比较流行的首页是全屏切换(就是每滑动一次,屏幕被一个块填满,resize窗口时当前块会随之变化),如何实现这一布局呢?请不要考虑通过js动态获取屏幕高度...大家通常会想到,给div设置height为100%,发现不起作用,于是给它的父元素body也设置这样一个属性,依旧不管用。额..难道css不支持设置height:100%?大家忽略了body还有一个父元素那就是html,将它设置高原创 2015-05-04 14:36:47 · 585 阅读 · 1 评论 -
CSS段落溢出
重构段落时,常常遇到不能按照自己所设想的进行自动换行,也不能将内容拆成几个段落来实现。而内容却已超出了父容器的情况,如下图:这样的情况如何处理呢?方法一:word-wrap:break-word;方法二:word-break:break-all;word-wrap和word-break有什么区别呢?word-wrap用来说明是否允许单词(西文)断句;原创 2015-02-13 17:39:18 · 950 阅读 · 0 评论 -
sass中国教程摘抄
1.使用变量1-1.变量声明$highlight-color:#F90;与CSS属性不同,变量可以在css规则块定义之外存在。当变量定义在css规则块内,那么该变量只能在此规则块内使用。1.2.变量引用$highlight-color:#F90;.selected { border:1px solid $highlight-colo转载 2015-07-06 15:08:58 · 713 阅读 · 0 评论 -
父、子容器高度不定,实现垂直居中
在做垂直居中时,需要将子容器相对于父容器做绝对定位,设置top为50%,接下来的任务就是将子元素上移自身高度的50%。当我们不知道子容器自身的高度时,我们借助css3中的transform属性进行自身平移。原创 2015-07-06 15:25:34 · 4023 阅读 · 0 评论 -
inline-block
讲讲关于inline-block容易遇到的问题原创 2015-09-08 14:48:35 · 448 阅读 · 0 评论 -
EDM - 新作
介绍了EDM遇到的坑和解决方案,解决了Gmail中控制隐藏失效的问题原创 2016-08-26 18:23:19 · 690 阅读 · 1 评论 -
CSS3实现徽章翻转效果
徽章由小变大,从反面翻转到正面,最终显示出徽章上的图案的动画效果原创 2017-09-11 18:25:55 · 2011 阅读 · 0 评论 -
锚点偏移
在进行锚点定位时,页面往往定位到页面的最顶部,无论是上部有导航条,还是出于美观考虑,都希望定位后该内容与页面顶部有一些间距。而锚点自动定位是无法达到的。如何处理呢?我们无法改变的是需要定位的元素一定要到最顶部,可以考虑采用padding-top进行加高。然后问题出现了,此时,元素上部会有一大截空白。于是,可以考虑设置margin-top为负,数值等同于padding-top的设置抵消掉空白。原创 2015-04-02 14:11:03 · 1217 阅读 · 0 评论