本文列舉幾個(gè)不需要使用js也能實(shí)現(xiàn)的效果
一撰茎、頁面回到頂部
回到頂部是頁面開發(fā)中很常見的一個(gè)功能嵌牺，一般的做法是對(duì)回到頂部組件做一個(gè)監(jiān)聽，當(dāng)用戶點(diǎn)擊的時(shí)候乾吻，設(shè)置body的scrollTop為0髓梅。今天發(fā)現(xiàn)一種更加簡單的方式，不需要用到j(luò)s也能實(shí)現(xiàn)绎签。就是通過鏈接的href來做
<a href="#">回到頂部</a>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
像代碼中這樣枯饿，當(dāng)點(diǎn)擊這個(gè)鏈接的時(shí)候，頁面會(huì)自動(dòng)回到頂部诡必，但是這種回到頂部是瞬間完成的奢方，我們需要一個(gè)滾動(dòng)的過程。所以我們需要對(duì)整個(gè)頁面做一個(gè)平滑滾動(dòng)的樣式爸舒。設(shè)置html的scroll-behavior為smooth
html{
scroll-behavior: smooth;
}
二蟋字、文本多行截?cái)嗫桑ㄕ归_）收起
1.實(shí)現(xiàn)這個(gè)多行截?cái)啾容^簡單，就是借助line-clamp這個(gè)屬性就可以扭勉，再配合這個(gè)webkit-box-orient屬性鹊奖，就可以實(shí)現(xiàn)這種三行截?cái)?/p>
.clamp{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
<p class="clamp">
慶歷四年春，滕子京謫守巴陵郡涂炎。越明年忠聚，政通人和，百廢具興唱捣，乃重修岳陽樓两蟀，增其舊制，刻唐賢今人詩賦于其上震缭，屬予作文以記之赂毯。
予觀夫巴陵勝狀，在洞庭一湖拣宰。銜遠(yuǎn)山党涕，吞長江，浩浩湯湯巡社，橫無際涯遣鼓，朝暉夕陰，氣象萬千重贺，此則岳陽樓之大觀也，前人之述備矣。
然則北通巫峽气笙，南極瀟湘次企，遷客騷人，多會(huì)于此潜圃，覽物之情缸棵，得無異乎？若夫淫雨霏霏谭期，連月不開堵第，陰風(fēng)怒號(hào)，濁浪排空隧出，日星隱曜踏志，
山岳潛形，商旅不行胀瞪，檣傾楫摧针余，薄暮冥冥，虎嘯猿啼凄诞。登斯樓也圆雁，則有去國懷鄉(xiāng)，憂讒畏譏帆谍，滿目蕭然伪朽，感極而悲者矣。至若春和景明汛蝙，
波瀾不驚烈涮，上下天光，一碧萬頃患雇，沙鷗翔集跃脊，錦鱗游泳，岸芷汀蘭苛吱，郁郁青青酪术。而或長煙一空，皓月千里翠储，浮光躍金绘雁，靜影沉璧，漁歌互答援所，
此樂何極庐舟！登斯樓也，則有心曠神怡住拭，寵辱偕忘挪略，把酒臨風(fēng)历帚，其喜洋洋者矣。嗟夫杠娱！予嘗求古仁人之心挽牢，或異二者之為，何哉摊求？不以物喜禽拔，不以己悲，
居廟堂之高則憂其民室叉，處江湖之遠(yuǎn)則憂其君睹栖。是進(jìn)亦憂，退亦憂茧痕。然則何時(shí)而樂耶？其必曰“先天下之憂而憂凿渊，后天下之樂而樂”乎梁只！噫！微斯人埃脏，
吾誰與歸？時(shí)六年九月十五日彩掐。
</p>
2.借助checkbox和label來實(shí)現(xiàn)按鈕（展開）收起
.btn::after{
content: '展開';
}
#state:checked + .btn::after{
content: '收起';
}
#state{
position: absolute;
left: -999999px;
}
#state:checked ~ p{
-webkit-line-clamp: 100;
}
<input type="checkbox" name="" id="state">
<label for="state" class="btn"></label>
三狗超、圖片對(duì)齊不變形
這種高度不同的圖片很容易破壞頁面的布局，這個(gè)時(shí)候如果給它一個(gè)高度渗稍，圖片會(huì)被拉伸變形非常丑
這時(shí)候可以用object-fit屬性团滥，給它一個(gè)cover選項(xiàng)竿屹，確保圖片按原始寬高比例進(jìn)行縮放，超出容器的部分會(huì)被裁切掉灸姊。和它配合的還有一個(gè)object-position屬性拱燃，它可以指定圖片顯示的位置，結(jié)合鼠標(biāo)移動(dòng)+過渡動(dòng)畫
img{
width: 200px;
height: 200px;
object-fit: cover;
object-position: left top;
transition: 1s;
}
img:hover{
object-position: right bottom;
}
