css - 随笔分类 - 子钦加油

纯CSS3+DIV实现小三角形边框

摘要：html代码是这样的 <div class="arrow-up">  </div> <div class="arrow-down">  </div> <div class="arrow-left">  </div> <div c 阅读全文

posted @ 2020-07-31 23:18 子钦加油阅读(1352) 评论(0) 推荐(0)

如何用css实现弧度圆角?三角形以及圆形

摘要：用css画矩形圆角，需要使用到border-radius这个属性，下图四角圆，代码显示如下：border-radius:60px; width:360px; height:200px; border:#900 1px solid;margin:20px 20px; 也可以通过控制border-ra 阅读全文

posted @ 2019-11-24 01:51 子钦加油阅读(2923) 评论(0) 推荐(2)

RGB颜色查询对照表

摘要：因为兼容性问题，色阶板功能只能在IE浏览器中运行 RGB颜色对照表 #FFFFFF #FFFFF0 #FFFFE0 #FFFF00 #FFFAFA #FFFAF0 #FFFACD #FFF8DC #FFF68F #FFF5EE #FFF0F5 #FFEFDB #FFEFD5 #FFEC8B #FFE 阅读全文

posted @ 2019-08-12 13:12 子钦加油阅读(1821) 评论(0) 推荐(0)

CSS绘制三角形和箭头，不用再用图片了

摘要：前言还在用图片制作箭头，三角形，那就太lou了。css可以轻松搞定这一切，而且颜色大小想怎么变就怎么变，还不用担心失真等问题。先来看看这段代码: CSS绘制三角形和箭头，不用再用图片了 CSS绘制三角形和箭头，不用再用图片了看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只需要用元阅读全文

posted @ 2019-06-28 10:36 子钦加油阅读(1175) 评论(0) 推荐(0)

多个div使用display:inline-block时候div之间有间隔

摘要：开发场景中用到display:inline-block;然后呢，div间就有间隙，但是ajax加载出来的数据没有间隙，解决办法如下 display:inline-block表示行内块元素，后面自带空格字符。当然有空隙，如果想去掉空隙，在父系上加font-size:0；然后，在子div上加一个font 阅读全文

posted @ 2019-06-26 14:20 子钦加油阅读(1303) 评论(0) 推荐(0)

HTML技巧篇：实现元素水平与垂直居中的几种方式

摘要：如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。 1）单行文本的居中主要实现css代码：水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/ 我们先阅读全文

posted @ 2019-06-26 11:19 子钦加油阅读(2231) 评论(0) 推荐(0)

CSS .css边框属性（border）

摘要：效果图如下：在盒子模型中我们通常会给盒子设置边框属性，使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border，他下面还有width,style,color的属性，在开发中，我们会使用连写。写法1：（按照方向）快捷键：bd+border: 1px sol 阅读全文

posted @ 2019-06-20 23:21 子钦加油阅读(1542) 评论(0) 推荐(0)

教你两招用纯CSS写Tab切换

摘要：说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。而今天所要分享的，是使用 0 行JS代码来实现Tab切换！具体效果如下： Tab切换方法一：模拟单选框原理关于模拟单选框，在我之前文章中有讲到，详情请戳→纯CSS模拟单选框和复选框该方法大致原理阅读全文

posted @ 2019-06-20 21:21 子钦加油阅读(1264) 评论(1) 推荐(0)

css等比例分割父级容器（完美三等分）

摘要：css等比例分割父级容器（完美三等分）父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？ html部分代码：方法一：浮动布局+百分比（将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比）方法二：行内元素（inline-block）+百分比方法三：父元阅读全文

posted @ 2019-06-20 21:00 子钦加油阅读(1375) 评论(0) 推荐(0)

使用CSS实现无滚动条滚动

摘要：我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的，但存在的问题阅读全文

posted @ 2018-09-10 11:20 子钦加油阅读(2437) 评论(0) 推荐(0)

弹出遮罩层后，如何禁止底层页面的滚动

摘要：弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。一个小程序的项目，是用MPVUE(一个使用 Vue.js 开发阅读全文

posted @ 2018-09-10 09:34 子钦加油阅读(14862) 评论(3) 推荐(2)

子钦加油

随笔分类 - css