![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
wh_week8
只有时间才能记录一切。
展开
-
HTML网页一键变黑白色调
【代码】HTML网页一键变黑白色调。原创 2022-12-02 22:07:27 · 604 阅读 · 1 评论 -
js动态添加style样式
var style = document.createElement('style') style.type = 'text/css' style.appendChild(document.createTextNode('input[type="checkbox"]:checked {\n' + ' /* background-position: -48px 0; */\n' + ' background: url(' + require('../../asse.原创 2021-12-14 16:56:59 · 8432 阅读 · 0 评论 -
Outlook客户端解析Html类型邮件样式问题
工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则:1.邮件使用table+css布局2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>生日祝福</t原创 2021-08-20 17:58:01 · 6611 阅读 · 0 评论 -
outlook邮件中样式错乱问题
场景:公司人力资源共享中心为关怀员工提出对在职员工推送生日祝福/入职周年庆祝的消息(含短信、企微、以及邮件),要求邮件和企微推送消息为网页形式展现。现象:邮件模板编写完成后不同的收件平台渲染的情况大相径庭,再outlook客户端以及网页版收到的邮件内容出现了严重的变形问题。如图所示(左侧为Foxmail显示、右侧为outlook显示):代码:<div style="max-width: 414px;min-width: 414px;max-height:736px;min..原创 2021-08-13 10:37:50 · 6112 阅读 · 0 评论 -
CSS设置元素叠加显示
CSS元素的重叠方式负margin:给元素设置负margin使其移动后 原来的位置是不会保留的负margin可以让元素的占用空间变小 后面的元素可以覆盖当前的元素(这里有两个相同大小的div 宽高都是100px (如图一) 当我们给上面类名为div的div设置了-margin-bottom之后 (见图二) 我们发现下面的元素覆盖了-margin的位置)图一:浮动原来的位置不保留 并且可以遮盖住其他元素脱离页面流定位相对定位:原来位置保留 并且不会挤到其他元素,只会重叠..转载 2021-08-04 13:57:58 · 2586 阅读 · 0 评论 -
CSS修改页面滚动条样式
众所周知浏览器默认的滚动条样式方方正正,怎么能跟得上前端高大上的页面要求,于是绝大多数开发者都会修改默认的滚动条样式以匹配页面,并且将其设置为全局样式。下面呢是一个修改滚动条样式的案例,供大家参考。/* 浏览器滚动条样式 */::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-button {}::-webkit-scrollbar-track { border-radius:原创 2021-07-06 09:31:53 · 362 阅读 · 0 评论 -
CSS设置元素浮动固定位置
效果图:原创 2021-06-18 17:23:19 · 1643 阅读 · 0 评论 -
CSS左图右文水平居中显示
效果图:代码:<div slot="left"> <img src="../assets/user/user_img.jpg" class="user_img"/> <span class="user_name">王浩,您好</span></div><style>.user_img{ padding-left: 0; vertical-align: middle; /*wid原创 2021-06-10 15:44:14 · 302 阅读 · 0 评论 -
CSS设置上图下文布局,固定宽度,超出部分滑动展示
效果图:原创 2021-06-10 15:40:22 · 571 阅读 · 0 评论