CSS
bluelotos893
谦谦君子,温润如玉。
展开
-
根据设计稿设置rem大小,elementUI px转rem
根据设计稿设置rem大小,px转rem原创 2022-10-07 20:39:34 · 2548 阅读 · 0 评论 -
table固定表头
设置table表头固定原创 2022-09-01 13:03:17 · 7445 阅读 · 1 评论 -
安卓平板浏览器强制横屏方案测试
总结:暂无很好的保持横屏方案,相比之下体验较好的是使用第三方APP“屏幕旋转助手”对系统应用进行横屏设置,浏览器使用Chrome,缺陷是对桌面横屏、相机横屏有问题,APP本身也会存在一些稳定问题,有时需要设置几次才可以成功。...原创 2020-10-21 17:25:12 · 2037 阅读 · 0 评论 -
jQuery点赞效果
<script type="text/javascript">(function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq对象,要在那个html标签上显示 str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</原创 2020-07-21 09:51:44 · 279 阅读 · 0 评论 -
html2canvas使用心得
需求:微信中将一些动态内容生成一张图片,用户可保存html2canvas是比较成熟的一个插件,于是用了起来,下面是使用中遇到的一些问题总结:图片模糊:使用background-image的方式会引起模糊,直接使用img就解决了选择版本:1.0.0-rc.4(iOS选择1.0.0-rc.5会有问题,图片显示不出来)...原创 2020-07-06 19:53:40 · 273 阅读 · 0 评论 -
table固定表头
table内容很多的时候需要固定表头以获取更好的浏览体验,这就需要另外制作一个内容一样的表头来掩人耳目,但是由于是两个不同的表格,随着真实表格内容的变化,真实表格表头的宽度也会随之变化,而赝品的表格则不会变化,分分钟就露馅了。解决思路:保持两个表格的宽度一致保持表头的th或者tr宽度一致保持两个表格的边框、padding样式一致赝品的表格定位在顶部不跟随滚动表格数据变化时宽度会改变...原创 2019-04-01 19:24:13 · 3022 阅读 · 0 评论 -
bootstrap前端分页的DOM生成
前端分页需要的几个数据:记录总条数、每页显示多少条,从第几页开始,最多显示多少个页码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2019-04-09 18:31:58 · 263 阅读 · 0 评论 -
普通layer弹框样式
记录一下自己平时经常用到的弹出层表单,方便以后复制使用。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scala...原创 2019-05-08 15:12:28 · 181 阅读 · 0 评论 -
table 每行留一些空隙的border处理
需求是实现下面的效果这里推荐一篇关于CSS选择器不错的文章 – 使用这些 CSS 属性选择器来提高前端开发效率!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-05-07 22:51:15 · 1228 阅读 · 0 评论 -
设置iframe窗口不出现滚动条
iframe窗口在多数浏览器中的默认高度是150px,所以在不处理的情况下出现滚动条是大概率事件,我们需要在涉及DOM变化的地方加上一个获取实时内容高度的事件,然后再设置到iframe上。 //假定iframe的ID为iframe_name function setIframeHeight(){ var contentHeight = document.body.scrollHeig...原创 2019-07-25 09:07:48 · 3867 阅读 · 0 评论 -
前端打印时不显示背景和border颜色的CSS设置
元素有设置背景色,但是打印时不显示背景色,在背景色设置后面加上 !importantborder的颜色不显示,子元素的border颜色设置成和父元素不一样就显示了(很奇葩的现象,但是管用)。<style media=print type="text/css"> div.mark-target-a{background: #E73535 !important;} div....原创 2019-07-25 15:21:16 · 5700 阅读 · 1 评论 -
css自定义单选框、复选框
span.pg-option-item-radio,span.pg-option-item-checkbox { position: relative; display: inline-block; margin: 3px 0; min-width: 100px; cursor: default; line-height: 1.5; padding: 0 5px 0 19px; ...原创 2019-08-23 16:52:30 · 260 阅读 · 0 评论 -
自定义加载中样式
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-...原创 2019-04-04 17:46:55 · 435 阅读 · 0 评论 -
rem的使用
通过SASS方式要弄明白rem的使用,需将这几个概念结合起来自己推演一下:屏幕大小和设计稿的宽度,将设计稿分为多少份,根元素字体大小,否则看到别人的代码不知道为什么那样写,公式中数值的设定前提是对于某一尺寸的设计稿和基准字体大小而言的。以下假定设计稿宽度为750px情形:// 媒体查询@media screen and (width:375px) { html { ...原创 2019-04-04 11:18:45 · 406 阅读 · 0 评论 -
input 与其他元素对齐
相信大家一定遇到过input与其他元素无法对齐的情况,不论type是text、radio、CheckBox,由于input有其独特的默认样式,padding和border、行高、字体样式等。1.radio、CheckBox类型:这两个在设置好大小后使用position:relative,设置top值,根据相邻元素高度去设置,一般情况下都没问题第二种就是设置input父元素为相对定位,设置上...原创 2019-03-13 11:35:57 · 2624 阅读 · 0 评论 -
CSS笔记
CSS实现单行、多行文本溢出显示省略号(…)如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。当行溢出实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;显示效果 多行溢出实现方法:display: -webkit-bo原创 2017-05-18 19:38:59 · 267 阅读 · 0 评论 -
table、td宽度失效-table布局的问题
项目中table布局还是比较常用的,遇到了一个table宽度失效的问题,先上代码:div style="width:800px;margin: 60px;"> table style="width: 100%;max-width: 100%;"> tbody> tr style="max-width: 900px;overflow: hidden原创 2017-11-16 15:01:18 · 7051 阅读 · 0 评论 -
懒加载图片代码
使用lazyload.js 和 swiper.js 一起用时发现加载图片加到一屏后就不加载了,查不出原因,用了下面代码就可以了,亲测可用,移动端、微信都正常。var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight; ...转载 2018-03-23 21:40:20 · 449 阅读 · 0 评论 -
浏览器打印分页
<HTML><HEAD><TITLE>print</TITLE><meta http-equiv="content-type" content="text/html;charset=gb2312"><style>/**//*** 打印相关*/ @media print {.not转载 2018-05-06 21:57:54 · 922 阅读 · 1 评论 -
微信loading动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-06 21:56:48 · 662 阅读 · 0 评论 -
网易loading图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-06 21:57:38 · 214 阅读 · 0 评论 -
单行文字两端对齐 CSS
/* 这种写法最后一行不会两端对齐 */p { width: 300px; word-wrap: break-word !important; text-align: justify;}/* 如果是需要单行也两端对齐加上下面的代码 */p:after { display: inline-block; content: ''; padding-le...原创 2018-05-26 17:50:58 · 657 阅读 · 0 评论 -
谷歌搜索按钮样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-23 18:45:59 · 792 阅读 · 0 评论 -
scrollTop()的兼容性问题
公司的移动端项目之前使用$(&amp;amp;amp;amp;amp;quot;body&amp;amp;amp;amp;amp;quot;).scrollTop()方法在微信和QQ浏览器中都使用正常,后来到了荣耀平板上Chrome浏览器就失灵了,取值始终为0。 猜想到了是由于浏览器的兼容性问题,具体就不去研究,解决问题就行://获取窗口滚动高度function getScrollTop(){ var scrollTop = window原创 2018-06-12 11:50:37 · 5618 阅读 · 0 评论 -
固定表格td宽度不被撑开
在需要固定表头或表左侧列时,我们需要两个table,然后使用定位的方式达到锁定的效果,那么就需要保证两个表格的每个单元格宽度一致才不会被察觉出来是两个表格。有2种方案,1是等待两个表格都渲染完毕后,获取其中一个表格某行的单元格宽度,逐一设置宽度给另一个表格,达到两个表格同宽的效果。2是设置百分比,td设置百分比的权重要比直接设置具体数值高,但是即使设置了百分比依然可能会被表格内的内容撑开超过...原创 2018-10-12 16:16:02 · 4590 阅读 · 0 评论 -
模仿Excel设置单元格 -- table单个TD的边框颜色效果
最近有这么个需求,鼠标点击td时需要变化td的颜色,由于一般都是适用了·border-collapse: collapse;这个属性,故相邻的两个td共用一个边框,先看一看设置不同值的效果:解决思路:直接设置行不通,设置2px又显得太宽了,不过看了WPS的表格选中状态时就是会比其它的要宽一倍的,而且行之间切换时td的高度会变化,会有跳动的感觉,所以当自身实现不了时,就得靠其它的元素来辅助了,上...原创 2018-10-27 17:45:47 · 1837 阅读 · 1 评论 -
Chrome浏览器表头打印相关
表头打印重叠:需要每页都有相同的表头,使用table的thead就可以实现,但是有时候会出现表头内容和正文在顶部重叠,也不知道是什么原因,原来是打印的table外面又包裹了一个div,且设置了宽度为A4纸大小210mm,把这个宽度属性去掉后就正常了。多一条边框:当table、tr、td都设置了边框,有时候跨页的时候上一页的底部可能会多一条边框,把table的border去掉就正常了。...原创 2018-11-19 09:31:41 · 1267 阅读 · 0 评论 -
让两个div元素有相同的高度
取得它们的高度后得到最大高度,然后赋值 var $divClass = $('.className'); var height = 0; $divClass.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $divCla原创 2017-11-22 10:44:21 · 4403 阅读 · 0 评论