css
残月飞鹰
QQ:870488643
展开
-
ie兼容性语法-仅在ie下起作用的样式语法
/*ie10+以上识别*/@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .split-line{padding-left:15px;} .child-left-btn{padding-left:15px;}}<%-- ie10-以下识别 --%><!--[if IE]><style> .split-line{padding-le...原创 2021-11-16 09:48:00 · 296 阅读 · 0 评论 -
H5页面悬浮球,可拖动
H5页面悬浮球,可拖动$(document).ready(function() { //设置样式 $("body").css({"margin":0,"padding":0}); $(".homepage-btn").css({//初始化HOME图标到屏幕右上角 "left":($(window).width()-$(".homepage-btn").width()-10) + "px" , "top":"85%" }) setTimeout('$(".homepage-b原创 2020-12-05 17:19:27 · 2119 阅读 · 0 评论 -
css文字换行
/*文字换行 汉字和英文数字字符也适配*/white-space:normal;word-break:break-all;word-wrap:break-word;/**指定div内容 几行 然后省略号**/overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;(行数) -webkit-box-orient: vertical;...原创 2020-06-21 11:06:00 · 13196 阅读 · 0 评论 -
css3 给div四个角加边框,并待内边阴影
box-shadow: 0 0 2.5vw #237ad4 inset; background: linear-gradient(#1359df, #1359df) left top, linear-gradient(#1359df, #1359df) left top, linear-gradient(#1359df, #1359df) right top, ...原创 2020-01-17 14:03:47 · 5405 阅读 · 0 评论 -
background渐变色兼容性写法
background: #006988; background:-moz-linear-gradient(left,#43c7bb,#006988); background:-webkit-linear-gradient(left,#43c7bb,#006988); background: -o-linear-gradient(left,#43c7bb,#00...转载 2020-01-15 09:08:36 · 860 阅读 · 0 评论 -
html5页面横向柱状图
关于横向柱状图,不使用各种插件的情况下,用CSS3+DIV+Javascript实现,效果图如下:css相关样式:/**滚动条样式**/::-webkit-scrollbar { width: .6em;}::-webkit-scrollbar-track { } ::-webkit-scrollbar-thumb { border:1px solid #419BF9...原创 2019-08-18 00:35:26 · 3150 阅读 · 0 评论 -
关于echarts横向柱子特殊效果
项目上有个特殊的需求,需要做出echarts横向柱子,柱子上边有个小人随着柱子的百分比移动,柱子右边显示百分比,柱子左边显示标签值,实现的效果如下图:横向柱子实现思路:整个页面的效果图如下:实现思路:整个横向柱子以一个div包着,将这个div分成3个区域:左、中、右;左边分成上下2个div ;分别填充label标签,也就是每根柱子的说明中间也是分成上下2部分,上边...原创 2019-08-18 00:06:21 · 847 阅读 · 0 评论 -
css 文字超出部分使用省略号显示
/*文字超出部分使用省略号显示*/.ut-s { text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; outline: 0 !important}翻译 2018-03-30 09:34:39 · 2565 阅读 · 0 评论 -
手机app页面Toast提示框
模仿android里面的Toast效果,小白一枚原创 2017-03-03 17:08:45 · 3481 阅读 · 3 评论