![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web样式
web样式
前端一名小学生
这个作者很懒,什么都没留下…
展开
-
web多分辨率自适应
UI给的图如下,要求不同屏幕大小下都是平铺满屏,并且登录那一块上下居中,中间几个模块的上下边距成了问题;最后解决效果如下:图1大屏幕图2小屏幕首先,背景平铺body { background-image: url(/themes/admin_htcyltd/public/assets/images/background.png); background-size: 100% 100%;}利用js判断屏幕宽高代码如下: var width_layer = document.b原创 2021-03-25 08:47:43 · 866 阅读 · 0 评论 -
三角形条幅设计
根据项目需求,用css做了一个如下图所示的CRM三角形条幅,简单说就是三角形背景色块,加一个倾斜缩放的CRM字体;代码如下:<div class="triangle-topleft"> <span class="font-CRM">CRM</span></div>.triangle-topleft { width: 0; height: 0; border-top: 32px solid #ebf2f9;原创 2021-03-24 14:47:51 · 112 阅读 · 0 评论 -
文字超出部分显示省略号...兼容IE
文字超出分为单行展示和多行展示,以下代码可以兼容多个浏览器以及小程序和APP唯独低版本IE浏览器不兼容单行设置:text-overflow: ellipsis;overflow: hidden;white-space: nowrap;多行设置text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;IE兼容方式原创 2021-03-24 14:44:41 · 516 阅读 · 2 评论 -
背景渐变/字体颜色渐变(可应用于银行卡背景框)
背景色渐变(可应用于银行卡背景框)先放两张背景渐变的样图银行卡渐变色红黄色渐变盒子我就不写了直接放css代码:background-color:#038EAB;background-repeat:repeat-x;background:-webkit-linear-gradient(left,#03ADA4,#038EAB);可从 top/left开始渐变自行设置接下来是字体颜色渐变可以应用于小图标,先放两张样图css代码:(只写了其中一种实现形式)background-ima原创 2021-03-24 13:44:20 · 533 阅读 · 0 评论 -
原生checkbox(复选框)样式调整
原生checkbox(复选框)样式调整应UI要求改变原生复选框的样式,本来想用layui带出来样式再调,奈何页面早就做好了,复选框绑定了点击事件,如果大动就要改大量的js代码。想了想用伪元素来尝试解决这个问题。仅做了UI要求的样式,有需求可以更换伪元素的样式。样式如下:代码如下:input[type=checkbox] {text-align: center;vertical-align: middle;border: none;appearance: none;/关键代码 隐藏原生样式/原创 2021-01-29 10:18:34 · 2091 阅读 · 0 评论