CSS技巧
WebKoalaBoy
Nothing is impossible
展开
-
css技巧---menu菜单加new
<span id="${menuInfo.menuId}"> ${menuInfo.menuName} <#if menuInfo.newMenu == true> <i class="newIcon"></i> </#if></span>.newIcon{ width: 32px; height: 32px; position: absolute; z-in...原创 2020-11-23 23:38:09 · 293 阅读 · 0 评论 -
css技巧---电子表体字体引入
如何使用电子表体字体原创 2020-11-23 17:55:36 · 1005 阅读 · 0 评论 -
css技巧---位置中间的竖线|垂直居中
法一:html:<div id="separator" class="separator-wrap"> <span class="separator-symbol">|</span></div>css:.separator-wrap { height: 10vh; line-height: 10vh; display: flex; flex-flow: row nowrap; alig..原创 2020-11-20 18:18:17 · 3795 阅读 · 0 评论 -
css技巧--给选中的tab加下划线
1、代码.inquiry-list-wrap .mini-tab-active :after { content: ''; width: auto; min-width: 44px; height: 2px; background: #1182FB; border-radius: 1px; display: block; margin-top: 1px;}2、效果图原创 2020-11-19 16:21:36 · 2946 阅读 · 1 评论 -
如何避免CSS :before、:after 中文乱码
问题:在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码。解决方案: 避免在CSS的:before, :after中使用中文,如果一定要使用,可以使用中文对应的Unicode。可以使用使用站长工具,或者是JavaScript的原生方法escape将中文转为Unicode。 需要注意的是Unicode在CSS中的书写方式,例如“小时”对应的Unicode...原创 2020-10-16 13:48:19 · 547 阅读 · 0 评论 -
css cursor属性整理
一、用法:.mouse-cursor{ cursor:pointer}二、属性值:值 描述 url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针(一只手) mov...原创 2020-07-03 15:56:29 · 487 阅读 · 0 评论 -
css技巧之手写css箭头
用css实现一个黑色的三角箭头原创 2020-02-24 23:05:28 · 776 阅读 · 0 评论 -
纯CSS实现分栏宽度拉伸调整
Html:<div class="column"> <div class="column-left"> <div class="resize-bar"></div> <div class="resize-line"></div> <div class="res...原创 2020-01-01 23:54:32 · 1532 阅读 · 0 评论 -
清除浮动Clearfix
清除浮动原创 2018-11-07 14:57:14 · 161 阅读 · 0 评论 -
用纯css做一个圆
用纯css做一个圆原创 2018-11-07 14:36:52 · 12650 阅读 · 0 评论 -
Box-sizing reset
Box-sizing reset重置框模型,使宽度和高度不受边界或填充的影响。原创 2018-11-06 16:45:51 · 169 阅读 · 0 评论 -
使用网格在父元素中水平和垂直地居中定位子元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .grid-centering {翻译 2018-11-06 11:43:36 · 326 阅读 · 0 评论 -
给文字加一个渐变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .gradient-text {原创 2018-11-06 11:21:18 · 152 阅读 · 0 评论