2021年8月工作踩坑记录【适合web前端开发工程师阅读】

最新推荐文章于 2024-05-03 14:55:36 发布

挽枫blog

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量129

点赞数

分类专栏：工作踩坑记录文章标签： css html html5

本文链接：https://blog.csdn.net/qq_19313497/article/details/120294522

版权

工作踩坑记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

img标签的最佳实践

<img src={imgPath} 
style={{objectFill:'fill'}} 
alt={imgTitle} 
onError={(e)=>{
	e.target.onerror = null;
	e.target.src = staticImgPath;}} 
/>

onError
实际生产环境中，可能存在img的src来自oss服务器上的一张图，由于某种原因获取不到，导致img无法加载出来，这个时候就会触发img的onError方法，通过该方法我们可以在图片加载不出来时选择项目本地的一张图片。
object-fill css属性
该属性规定图片以何种方式填充img的content

css实战攻略职场常用

// 单行文本溢出显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

// 多行文本控制
/**适用范围：WebKit**/
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden;

// css hover控制其他元素
<html>
<body>
<style>
    #a:hover {color : #FFFF00;}
    #a:hover > #b:first-child{color : #FF0000;}    
    #a:hover > #b{color : #FF00FF;}  
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>

javascript 技巧

// 实现最晚的时间在最前面
array.sort((a, b) => new Date(a[sortKey]).getTime() - new Date(b[sortKey]).getTime())

挽枫blog

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021年8月工作踩坑记录【适合web前端开发工程师阅读】

img标签的最佳实践<img src={imgPath} style={{objectFill:'fill'}} alt={imgTitle} onError={(e)=>{ e.target.onerror = null; e.target.src = staticImgPath;}} />onError实际生产环境中，可能存在img的src来自oss服务器上的一张图，由于某种原因获取不到，导致img无法加载出来，这个时候就会触发img的onError方法，通过该
复制链接

扫一扫