css布局
阡路陌人
修行ing
展开
-
css边框两色效果
box:after { content: ''; display: block; width: initial; height: 2px; background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); background: .原创 2021-03-31 09:40:38 · 1277 阅读 · 0 评论 -
input框在chrome浏览器下粘贴的默认底色
Chrome浏览器对于input输入框的值会有一个默认的记录,导致后续在输入的时候出现选择后在input框会出现一个默认底色,如图:这样对整个界面而言就感觉恨不协调,为了消去这种现象,可以在css中引入一下代码:input:-webkit-autofill { box-shadow: 0 0 0 1000px #ffffff inset !important;/* 浏览器记住密码的底色的颜色 */ -webkit-text-fill-color: #606266 !important;原创 2020-12-09 17:51:18 · 482 阅读 · 0 评论 -
前端打印功能css print
下面是关于前端打印功能的几种整理,大家有什么好的方法,还望提出。。。先谢谢啦第一种:jquery有个打印功能的API(PrintArea)不过这个特别要注意一个就是打印出新空白,查看源码,在源码中的doc = iframe.contentWindow.document; 使用时需要先open加上doc.open();问题解决第二种:window.print()这一种在前原创 2018-01-23 13:23:17 · 12467 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况原创 2017-08-30 10:25:19 · 3775 阅读 · 0 评论 -
去掉页面的滚动条
去掉页面上的滚动条 body::-webkit-scrollbar {display: none;}如果使用了iframe,则可以使用scrolling="no原创 2019-07-05 15:44:44 · 4094 阅读 · 2 评论 -
css样式中的滚轮事件和隐藏滚动条
css样式中的滚轮事件和隐藏滚动条原创 2017-09-11 16:39:47 · 4227 阅读 · 0 评论 -
网页整体放大或者缩小
案例:非PC端项目,做的是固定设备上的项目。由于固定设备上的分辨率和正常的触屏设备不一,所以在开发的时候未做适配工作(即使用的是px单位)。现阶段需要将该项目来一个PC端版本的,第一想法就是使用媒体查询去处理,不过这样的工程量就有点大了,需要对每个界面每个样式做更改;后面想的是能不能整体进行一个适应的放大缩小的,这样岂不很nice,于是就碰到了css3中zoom属性官方介绍document.getElementsByTagName('body')[0].style.zoom = 0.8;注意点:zoo原创 2020-08-14 18:10:28 · 891 阅读 · 0 评论 -
css 宽高等比例设置
往往在处理自适应的图片在渲染为正方形的时候:第一种想法就是把图片裁剪成宽高比例1:1的图形;第二种方式我们使用js去控制图片img父盒子div的高度去和宽度相等(以上方式就比较繁琐了);第三种使用简单的css去控制。下面就说下第三种方式啦!html格局为:<div class="box"> <img src="图片路径" alt=""></div>css布局:.box{ width: 40%; // 父盒子的宽度%,自适应 看实际情况去设置百分比原创 2020-07-30 14:23:17 · 3880 阅读 · 0 评论 -
css 取消鼠标双击选中
有时候我们在页面上操作的时候,总会碰到鼠标连点的情况下,这样会导致你点击的文字地方出现一片蓝色选中状态,例如:导致体验效果不理想。取消上面情况:(css) -moz-user-select:none; -ms-user-select: none; -webkit-user-select: none; user-select: none;做个记录,防止遗忘。。。...原创 2019-07-09 09:56:55 · 3213 阅读 · 0 评论 -
input 框隐藏光标问题
有时候利用input框触发弹框往往会出现以下情况:解决的方法:<input type="text" value="" placeholder="请输入" readonly unselectable="on" >原创 2019-01-16 14:07:46 · 5887 阅读 · 0 评论 -
CSS设置table下tbody的滚动条
今天碰到一个关于对tabel的表的滚动事件,需求是表头不动,改变的是tbody,如果tbody里面的内容过多,让其进行滚动事件。 首先想到的就是利用css中overflow-y:scroll; 来进行内容的滚动,但是在处理tabel的display状态时,就将tabel表的布局给打乱了,如果给tabel的父级进行限制,则这个表会进行滚动。。。在css上设置如下代码就可以了table tb...原创 2018-02-23 17:41:49 · 13058 阅读 · 2 评论 -
css设置单行居中,多行居左/居右
css设置单行居中,多行居左/居右原创 2017-09-21 14:07:26 · 6806 阅读 · 6 评论