资讯专栏INFORMATION COLUMN

前端经常遇到的的问题

番茄西红柿 / 1930人阅读

摘要:如何在图片开始加载时获取大小可以在这里找到。其他不平铺横向平铺纵向平铺固定滚动水平居中水平居中并垂直居中二关闭隐藏滑动上下事件属性可返回事件的目标节点触发该事件的节点,如生成事件的元素文档或窗口。的结合示例关闭隐藏滑动

一、关于样式(CSS)

1、Input

1)Input可编辑可下拉

<div>
   <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" >
  <datalist id="itemlist">
     <option>item1option>
     <option>item2option>
   datalist>
div>

 

2)Input下拉

<select>
    <option value="-1" >---请选择分辨率---option>

    <option value="0" >320 X 240option>

select>

 

3)Input边线点击不显示

input点击边框样式无效

outline: none;  /**/

 

4)提示文字:placeholder="手机号"

input修改提示文字颜色

::-webkit-input-placeholder { /* input提示文字颜色 */
    color: #fff;
    font-size:20px;
}

 

5)input出现背景是黄色

这种点击框也不会出现黄色了

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

还有一种就是关闭自动填充:autocomplete="off"

2、是否占位:显示/隐藏

1)display

display:none;  /*不占位*/

display: block;  /*显示*/

 

2)visibility

visibility: hidden;   /*占位*/

visibility: visible;  /*显示*/

3、定位

1) 绝对定位:position:absolute

 a)   父级不自动增高,解决方法:overflow:auto;

2)相对定位:position: relative;

3)固定定位:position:fixed;

4、Textarea

1)div模拟textarea文本域轻松实现高度自适应

.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);*/
}

5、手指光标

 cursor: pointer; /*手指光标*/

 

6、文本省略号

1)单行文本省略号

.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;
}

 

7、滚动条修改样式

::-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;
} 

8、透明度

1)背景与字体透明

opacity:0.5; /* 0-1 的透明度 */

2)背景透明,字体不透明

 background: rgba(216, 216, 216, .1.5);

9、img图片截图

.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

10.背景图

1)尺寸等比扩展图片来填满元素,即cover值: background-size:cover; 

2)尺寸等比缩小图片来适应元素的尺寸,即contain值:background-size:contain; 

3)尺寸以图片自身大小来填充元素,即auto值: background-size:auto;

4)图片模糊

使用filter()函数实现模糊背景,使用方法:

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
 filter: blur(5px);

 

blur(px)

给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

5)其他 

不平铺: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; 

二、Js

1.fadeOut关闭、隐藏

2.slideUp/out//滑动上/

3.event .target  

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...

    Flands 评论0 收藏0
  • 入门级前端开发可能需要的安利列表

    摘要:开发篇版本管理工具,无脑的视图操作,功能强大并且支持多账号点我跳转网站篇学习最重要的是经常百度,要始终坚信着你的水平能遇到的坑,别人都帮你踩过了。另外就是开发过程多看文档,很多问题文档都会有相关的解决方案,多看几次就能想到解决方法。 IDE篇 程序员最重要的的就是IDE了,一个好的IDE可以帮你省略大量的时间,以及少生很多闷气,下面开始前端的IDE推荐: VSCode 最推荐的IDE...

    wwolf 评论0 收藏0
  • vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

    摘要:使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时样式会变小。。这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。 最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里...

    CodeSheep 评论0 收藏0
  • vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

    摘要:使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时样式会变小。。这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。 最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里...

    monw3c 评论0 收藏0
  • vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

    摘要:使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时样式会变小。。这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。 最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里...

    loostudy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<