【前端】网易尴尬的一面

1.自我介绍

2.手写布局

Q:一行显示,左侧文字,文字后面紧邻不定个icon,超出父元素长度,文字就显示为省略号,但icon仍要显示。

不会做!!!

3.点赞布局

Q:ul>li>a>span,给点赞加事件怎么做?如何找到是哪个项的点赞呢?如果还有一个follow按钮也有事件,如何区分呢?

答了事件循环,根据target判断,可以判断target元素的属性。

4.img请求不同尺寸的图片

ul>li>img*n,根据手机大小不同,显示不同的图片,怎么做?


5.有很多图片,懒加载怎么判断是不是当前视口?

#网易##前端工程师##面经##秋招##内推##前端#
全部评论
请教大家,布局怎么实现的啊~~
点赞 回复 分享
发布于 2018-08-30 17:10
啥是点赞布局?
点赞 回复 分享
发布于 2018-08-30 17:10
可以给每一项dom元素设定data属性找到e.target的dataset,或者找当前事件对象的父节点通过其判断被点赞的评论?
点赞 回复 分享
发布于 2018-08-30 17:32
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>flex布局实现</title>     <style type="text/css">         body {             margin: 0;             }                 .container {                 display: flex;             flex-wrap: nowrap;                 align-items: center;                 justify-content: flex-start;         }         .left-text {             text-align: left;             text-overflow: ellipsis;             overflow: hidden;             white-space: nowrap;        }       .icon-container {                align-self: flex-end;                }    </style> </head> <body> <div class="container">        <div class="left-text">这是左边的文字</div>        <div class="icon-container">                 <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>        </div> </div> </body> </html>
点赞 回复 分享
发布于 2018-08-30 17:32
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>flex布局实现</title>     <style type="text/css">         body {             margin: 0;             }                 .container {               background: pink;             width: 500px;               display: flex;             align-items: center;    /*垂直居中*/            }         .left-text {             text-overflow: ellipsis;             overflow: hidden;             white-space: nowrap;        }    </style> </head> <body> <div class="container">        <div class="left-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ullam consectetur nostrum aspernatur id ut, magnam nesciunt sit doloribus in vitae sint illo deleniti maxime soluta animi. Ipsa, dolores, veniam?</div>                     <span>1</span>            <span>2</span>            <span>icon3</span>            <span>icon4</span>            <span>icon5</span>            <span>icon6</span>                   </div> </body> </html>
点赞 回复 分享
发布于 2018-08-30 21:56
咋就一面
点赞 回复 分享
发布于 2018-08-30 23:41

相关推荐

牛客410815733号:这是什么电影查看图片
点赞 评论 收藏
分享
评论
点赞
26
分享
牛客网
牛客企业服务