摘要:如何在图片开始加载时获取大小可以在这里找到。其他不平铺横向平铺纵向平铺固定滚动水平居中水平居中并垂直居中二关闭隐藏滑动上下事件属性可返回事件的目标节点触发该事件的节点,如生成事件的元素文档或窗口。的结合示例关闭隐藏滑动
<div> <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" > <datalist id="itemlist"> <option>item1option> <option>item2option> datalist> div>
<select> <option value="-1" >---请选择分辨率---option> <option value="0" >320 X 240option> select>
input点击边框样式无效
outline: none; /**/
input修改提示文字颜色
::-webkit-input-placeholder { /* input提示文字颜色 */ color: #fff; font-size:20px; }
这种点击框也不会出现黄色了
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
还有一种就是关闭自动填充:autocomplete="off"
1)display
display:none; /*不占位*/ display: block; /*显示*/
visibility: hidden; /*占位*/ visibility: visible; /*显示*/
a) 父级不自动增高,解决方法:overflow:auto;
.testdisplay { width: 100%; min-height: 200px; max-height: 400px; margin-left: auto; margin-right: auto; outline: 0; font-size: 12px; line-height: 24px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);*/ }
cursor: pointer; /*手指光标*/
.digital-limit { overflow: hidden; text-overflow: ellipsis; /*显示...*/ white-space: nowrap; /*文本不换行,这样超出一行的部分被截取,显示...*/ }
2)多行文本省略号
.digital-normal { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px !important; /*高宽分别对应横竖滚动条的尺寸*/ height: 8px !important; } ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 8px !important; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1) !important; background: rgba(0,0,0,.1) !important; } ::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0) !important; border-radius: 10px !important; background: rgba(0,0,0,0) !important; }
opacity:0.5; /* 0-1 的透明度 */
background: rgba(216, 216, 216, .1.5);
.historys img{ width: 100%; height: 100%; position: absolute; right: -5px; clip: rect(0 103px 100px 0px); }
通过js在图片刚刚开始加载的时刻可以获取其宽度和高度,然后用js决定限制图片的高度还是宽度。如何在图片开始加载时获取大小可以在这里找到。
Js:
$(function(){ $(.historys img).each(function(){ var $this=$(this); imgReady($this.attr(src),function(){ if(this.width>this.height){ $this.attr(height,100); $this.removeAttr(width); } }); }); });View Code
使用filter()函数实现模糊背景,使用方法:
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);
blur(px) |
给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。 |
不平铺:background-repeat: no-repeat;
横向平铺:background-repeat: repeat-x;
纵向平铺:background-repeat: repeat-y;
固定:background-attachment: fixed;
滚动:background-attachment: scroll;
水平居中:background-position: center;
水平居中并垂直居中:background-position: center center;
targe事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
1~3的结合示例
$(document).ready(function(){ $(".backdrop,.box").click(function(event){ if (event.target.className == backdrop) { $(#backdrop).fadeOut(); //fadeOut:关闭、隐藏 $(#box).slideUp(200); //slideUP:滑动 } }); });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2003.html
摘要:开发篇版本管理工具,无脑的视图操作,功能强大并且支持多账号点我跳转网站篇学习最重要的是经常百度,要始终坚信着你的水平能遇到的坑,别人都帮你踩过了。另外就是开发过程多看文档,很多问题文档都会有相关的解决方案,多看几次就能想到解决方法。 IDE篇 程序员最重要的的就是IDE了,一个好的IDE可以帮你省略大量的时间,以及少生很多闷气,下面开始前端的IDE推荐: VSCode 最推荐的IDE...
摘要:使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时样式会变小。。这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。 最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里...
摘要:使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时样式会变小。。这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。 最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里...
摘要:使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时样式会变小。。这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。 最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里...
阅读 716·2023-04-25 19:43
阅读 3912·2021-11-30 14:52
阅读 3788·2021-11-30 14:52
阅读 3856·2021-11-29 11:00
阅读 3786·2021-11-29 11:00
阅读 3872·2021-11-29 11:00
阅读 3560·2021-11-29 11:00
阅读 6111·2021-11-29 11:00