2020年3月11日23點16分
一溉浙、導航欄的分隔符
這種文字之間的分割線，傳統(tǒng)省事的做法是使用管道符（
|）來替代 蒋荚。但是效果并不是太好戳稽，自定義程度不是太高。所以一般會使用盒模型的邊框 border 來模擬圆裕，在配合使用強大的 CSS3 偽類和偽元素更是如魚得水广鳍。一句 CSS 語句就解決了：??
li:not(:last-child)::after{}
二、滑入和滑出
這種滑入滑出的效果吓妆，在 JQuery 里面對應的是 slideDown() 和 slideUp() 方法。但是在 MVVM 時代吨铸，寫項目的時候為了這個小小的效果就引入一個 Jquery 庫怎么想也是不劃算的行拢，所以自己實現。
如果你不在乎效果诞吱，只求功能能夠實現舟奠，可以采用的做法是控制 display 屬性值在 none 和其他值之間切換。
以下部分來自張鑫旭的 「CSS 世界」推薦這本書：
按照常規(guī)思路我們會使用height+overflow:hidden實現房维。但是沼瘫，很多時候，我們展開的元素內容是動態(tài)的咙俩，換句話說高度是不固定的耿戚，因此湿故，height使用的值是默認的auto，應該都知道的auto是個關鍵字值膜蛔，并非數值坛猪，正如height:100%的100%無法和auto相計算一樣，從0px到auto也是無法計算的皂股，因此無法形成過渡或動畫效果墅茉。
因此，下面代碼呈現的效果也是生硬地展開和收起：
.element {
height: 0;
overflow: hidden;
transition: height .25s;
}
.element:hover {
height: auto; /* 沒有transition效果呜呐，只是生硬地展開 */
}
難道就沒有什么一勞永逸的實現方法嗎就斤？有，不妨試試max-height蘑辑，CSS代碼如下：
.element {
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
.element.hover {
max-height: 666px; /* 一個足夠大的最大高度值 */
}
其中展開后的max-height值洋机，我們只需要設定為保證比展開內容高度大的值就可以，因為max-height值比height計算值大的時候以躯，元素的高度
就是height屬性的計算高度槐秧，在本交互中，也就是height:auto時候的高度值忧设。于是刁标，一個高度不定的任意元素的展開動畫效果就實現了。
但是址晕，使用此方法也有一點要注意膀懈，即雖然說從適用范圍講，max-height值越大使用場景越多谨垃，但是启搂，如果max-height值太大，在收起的
時候可能會有“效果延遲”的問題刘陶，一般我會給設置為500px胳赌、或600px，也有延遲但基本不會察覺匙隔。
三疑苫、錨點定位的元素如何間隔地址欄一段距離
上面這個演示效果是我在項目中碰到的一個真實需求。導航條是通過position:fixed;固定定位在頁面中的纷责。這時候我們點擊導航條來加載對應的部分捍掺。因為使用的是錨點定位技術，所以頁面定位元素會緊貼著地址欄再膳。這就會造成固定定位的導航欄覆蓋定位元素挺勿。這時候我們需要。定位元素和瀏覽器最頂端產生一定的距離喂柒。我們首先想到的就是給定位元素添加一個padding-top來產生距離不瓶。但是這個方法會影響當前頁面的布局禾嫉。
有沒有一個方法，在不影響當中頁面布局的情況下湃番，達到我們想要的效果夭织。這時候就需要用到內聯元素垂直方向上的padding對當前頁面布局無影響，來達到這個目的吠撮。
例如：我們給一個內聯元素設置垂直方向的padding：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
h3{
padding-top: 200px;
}
span{
padding-top: 100px;
}
</style>
</head>
<body>
<h3>小標題</h3>
<span>內聯元素</span>
</body>
</html>
這時給 span 填上背景色：
span{
padding-top: 100px;
background-color: rgba(23,45,12,0.2);
}
觀察發(fā)現可得尊惰，內聯元素的padding在垂直方向同樣會影響布局，影響視覺表現泥兰。只是因為內聯元素沒有可視寬度和可視高度的說法（clientHeight和clientWidth永遠是0）弄屡，垂直方向的行為表現完全受line-height和vertical-align的影響，視覺上并沒有改變和上一行下一行內容的間距鞋诗，因此膀捷，給我們的感覺就會是垂直padding沒有起作用。
就利用內聯元素padding在垂直方向上對布局沒影響削彬，但是又有布局效果來實現錨點定位的元素間隔地址欄一段距離
四全庸、返回頂部動畫
頁面返回頂部用到的也是錨點定位技術。但是錨點定位技術融痛，有一個體驗特別不好的地方就是沒有動畫效果壶笼，具體表現為一觸即達。
以前常用的辦法是使用 JQ 的animate 動畫來實現雁刷。有沒有更簡單的辦法呢覆劈？比如說使用純CSS將它實現。下面介紹兩種簡單的辦法讓頁面滾動平滑：
- CSS 的 scroll-behavior
- JS 的 scrollIntoView
CSS 的 scroll-behavior 演示代碼：凡是需要滾動的地方都加一句scroll-behavior:smooth就好了沛励！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
scroll-behavior: smooth;
}
.inner{
width: 1000px;
margin: 0 auto;
}
p{
margin: 120px 0;
}
</style>
</head>
<body>
<div class="inner">
<p>
眼見那少年與中年漢子已拆到七十余招责语，劍招越來越緊，兀自未分勝敗目派。突然中年漢子一劍揮出坤候，用力猛了，身子微微一晃企蹭，似欲摔跌铐拐。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑。他隨即知道失態(tài)练对，忙伸手按住了口。
</p>
<p>
眼見那少年與中年漢子已拆到七十余招吹害，劍招越來越緊螟凭，兀自未分勝敗。突然中年漢子一劍揮出它呀，用力猛了螺男，身子微微一晃棒厘，似欲摔跌。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑下隧。他隨即知道失態(tài)奢人，忙伸手按住了口。
</p>
<p>
眼見那少年與中年漢子已拆到七十余招淆院，劍招越來越緊何乎，兀自未分勝敗。突然中年漢子一劍揮出土辩，用力猛了支救，身子微微一晃，似欲摔跌拷淘。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑各墨。他隨即知道失態(tài)，忙伸手按住了口启涯。
</p>
<p>
眼見那少年與中年漢子已拆到七十余招贬堵，劍招越來越緊，兀自未分勝敗结洼。突然中年漢子一劍揮出黎做，用力猛了，身子微微一晃补君，似欲摔跌引几。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑。他隨即知道失態(tài)挽铁，忙伸手按住了口伟桅。
</p>
<p>
眼見那少年與中年漢子已拆到七十余招，劍招越來越緊叽掘，兀自未分勝敗楣铁。突然中年漢子一劍揮出，用力猛了更扁，身子微微一晃盖腕，似欲摔跌。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑浓镜。他隨即知道失態(tài)溃列，忙伸手按住了口。
</p>
<p>
眼見那少年與中年漢子已拆到七十余招膛薛，劍招越來越緊听隐，兀自未分勝敗。突然中年漢子一劍揮出哄啄，用力猛了雅任，身子微微一晃风范，似欲摔跌。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑沪么。他隨即知道失態(tài)硼婿，忙伸手按住了口。
</p>
<a href="#">返回頂部</a>
</div>
</body>
</html>
JS 的 scrollIntoView
如果我們的網頁已經通過CSS設置了scroll-behavior:smooth聲明禽车，則我們直接執(zhí)行target.scrollIntoView()方法就會有平滑滾動寇漫，無需再額外設置behavior參數。
使用方式為：
dom.scrollIntoView({
behavior: "smooth"
});
五哭当、最后
綜合演示源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>導航欄</title>
<style>
*{margin:0;padding:0;}
html,body{
scroll-behavior: smooth;
}
.inner{
width: 1000px;
margin: 0 auto;
}
ul{
list-style: none;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
}
li{
width: 100px;height: 60px;
float: left;
background-color: rgba(135, 206, 2350, 1);
text-align: center;
position: relative;
}
li:not(:last-child)::after{
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 99;
height: 20px;
border-left: 1px solid #333;
}
li > a{
text-decoration: none;
display: inline-block;
line-height: 60px;
width: 100%;
color: #000;
}
li > a:active{
color:#000;
}
li > a:hover{
/*background-color: #ab47bc;*/
color: #fff;
}
/*滑入滑出*/
li a dl dd{
max-height: 0;
background-color: skyblue;
overflow: hidden;
transition: max-height 0.5s ease 0s;
}
li a:hover dl dd{
max-height: 500px;
}
.content{
margin-top: 60px;
}
h3 > a{
display: inline-block;
font-size: 22px;
line-height: 60px;
color: #000;
text-decoration: none;
}
h3 > a:hover{
text-decoration: underline;
}
section div p {
overflow: hidden;
margin: 30px 0;
font-size: 18px;
}
section h3 a span{
padding-top: 75px;
background-color: yellow;
}
</style>
</head>
<body>
<nav>
<ul class="inner">
<li><a href="#tianlongbabu">
<dl>
<dt>天龍八部</dt>
<dd>
<p>滅門</p>
<p>聆秘</p>
<p>救難</p>
<p>坐斗</p>
<p>治傷</p>
<p>洗手</p>
</dd>
</dl>
</a></li>
<li><a href="#ludingji">
<dl>
<dt>鹿鼎記</dt>
<dd>
<p>第一回</p>
<p>第二回</p>
<p>第三回</p>
</dd>
</dl>
</a></li>
<li><a href="">笑傲江湖</a></li>
<li><a href="">射雕英雄傳</a></li>
<li><a href="">神雕俠侶</a></li>
<li><a href="">倚天屠龍記</a></li>
<li><a href="">俠客行</a></li>
<li><a href="">雪山飛狐</a></li>
<li><a href="">飛狐外傳</a></li>
<li><a href="">越女劍</a></li>
</ul>
</nav>
<section class="inner content">
<h3><a><span id="tianlongbabu">天龍八部</span></a></h3>
<div>
<p>
青光閃動猪腕，一柄青鋼劍倏地刺出，指向中年漢子左肩钦勘，使劍少年不等劍招用老陋葡，腕抖劍斜，劍鋒已削向那漢子右頸彻采。那中年漢子豎劍擋格腐缤，錚的一聲響，雙劍相擊肛响，嗡嗡作聲岭粤，震聲未絕，雙劍劍光霍霍特笋，已拆了三招剃浇。中年漢子長劍猛地擊落，直砍少年頂門猎物。那少年避向右側虎囚，左手劍訣一引，青鋼劍疾刺那漢子大腿蔫磨。
</p>
<p>兩人劍法迅捷淘讥，全力相搏。</p>
<p>
練武廳東邊坐著二人堤如。上首是個四十左右的中年道姑蒲列，鐵青著臉，嘴唇緊閉搀罢。下首是個五十余歲的老者蝗岖，右手捻著長須，神情甚是得意榔至。兩人的座位相距一丈有余剪侮，身后各站著二十余名男女弟子。西邊一排椅子上坐著十余位賓客。東西雙方的目光都集注于場中二人的角斗瓣俯。
</p>
<p>
眼見那少年與中年漢子已拆到七十余招，劍招越來越緊兵怯，兀自未分勝敗彩匕。突然中年漢子一劍揮出，用力猛了媒区，身子微微一晃驼仪，似欲摔跌。西邊賓客中一個身穿青衫的年輕男子忍不住“嗤”的一聲笑袜漩。他隨即知道失態(tài)，忙伸手按住了口宙攻。
</p>
<p>便在這時奠货，場中少年左手呼的一掌拍出，擊向那漢子后心座掘。那漢子向前跨出一步避開递惋，手中長劍驀地圈轉，喝一聲：“著溢陪！”那少年左腿已然中劍萍虽，腿下一個踉蹌，長劍在地下一撐形真，站直身子待欲再斗杉编，那中年漢子已還劍入鞘，笑道：“褚?guī)煹芘厮凶尩寺凶專瑐貌粎柡γ丛１悖俊蹦巧倌昴樕n白绒净，咬著嘴唇道：“多謝龔師兄劍下留情〕ニィ”</p>
<p>那長須老者滿臉得色挂疆，微微一笑，說道：“東宗已勝了三陣下翎，看來這‘劍湖宮’又要讓東宗再住五年了缤言。辛師妹，咱們還須比下去么视事？”坐在他上首的那中年道姑強忍怒氣胆萧，說道：“左師兄果然調教得好徒兒。但不知左師兄對‘無量玉壁’的鉆研，這五年來可已大有心得么跌穗？”長須老者向她瞪了一眼订晌，正色道：“師妹怎地忘了本派的規(guī)矩？”那道姑哼了一聲蚌吸，便不再說下去了锈拨。</p>
<p>這老者姓左，名叫子穆羹唠，是“無量劍”東宗的掌門奕枢。那道姑姓辛，道號雙清佩微，是“無量劍”西宗掌門缝彬。</p>
<p>“無量劍”原分東、北哺眯、西三宗谷浅，北宗近數十年來已趨式微，東西二宗卻均人材鼎盛族购】翘埃“無量劍”于五代后唐年間在南詔無量山創(chuàng)派，掌門人居住無量山劍湖宮寝杖。自于大宋仁宗年間分為三宗之后违施，每隔五年，三宗門下弟子便在劍湖宮中比武斗劍瑟幕，獲勝的一宗得在劍湖宮居住五年磕蒲，至第六年上重行比試。五場斗劍只盹，贏得三場者為勝辣往。這五年之中，敗者固然極力鉆研殖卑，以圖在下屆劍會中洗雪前恥站削，勝者也是絲毫不敢松懈。北宗于四十年前獲勝而入住劍湖宮孵稽，五年后敗陣出宮许起，掌門人一怒而率領門人遷往山西，此后即不再參預比劍菩鲜，與東西兩宗也不通音問园细。三十五年來，東西二宗互有勝負接校。東宗勝過四次猛频，西宗勝過兩次，那龔姓中年漢子與褚姓少年相斗，已是本次比劍中的第四場鹿寻，姓龔的漢子既勝睦柴，東宗四賽三勝，第五場便不用比了烈和。</p>
</div>
<h3><a><span id="ludingji">鹿鼎記</span></a></h3>
<div>
<p>北風如刀爱只，滿地冰霜。</p>
<p>江南近海濱的一條大路上招刹，一隊清兵手執(zhí)刀槍，押著七輛囚車窝趣，沖風冒寒疯暑，向北而行。前面三輛囚車中分別監(jiān)禁的是三個男子哑舒，都作書生打扮妇拯，一個是白發(fā)老者，兩個是中年人洗鸵。后面四輛中坐的是女子越锈，最后一輛囚車中是個少婦，懷中抱著個女嬰膘滨。女嬰啼哭不休甘凭。她母親溫言相呵，女嬰只是大哭火邓。囚車旁一名清兵惱了丹弱，伸腿在車上踢了一腳，喝道：“再哭铲咨，再哭躲胳！老子踢死你！”那女嬰一驚纤勒，哭得更加響了坯苹。</p>
<p>離開道路數十丈處有座大屋，屋檐下站著一個中年文士摇天，一個十一二歲的小孩粹湃。那文士見到這等情景，不禁長嘆一聲闸翅，眼眶也紅了再芋，說道：“可憐，可憐坚冀！”</p>
<p>那小孩子問道：“爹爹济赎，他們犯了什么罪了？”那文士道：“又犯了什么罪？昨日和今朝司训，已逮去了三十幾人构捡，都是我們浙江有名的讀書人，個個都是無辜株連壳猜」椿眨”他說到“無辜株連”四字，聲音壓得甚低统扳，生怕給押送囚車的官兵聽見了喘帚。那小孩道：“那個小女孩還在吃奶，難道也犯了罪咒钟？真沒道理吹由。”那文士道：“你懂得官兵沒道理朱嘴，真是好孩子倾鲫。唉，人為刀俎萍嬉，我為魚肉乌昔，人為鼎鑊，我為糜鹿壤追！”那小孩子道：“爹磕道，你前幾天教過我，‘人為刀俎大诸，我為魚肉’捅厂，就是給人家斬割屠殺的意思。人家是切菜刀资柔，是砧板焙贷，我們就是魚和肉』哐撸‘人為鼎鑊辙芍，我為糜鹿’這兩句話，意思也差不多么羹与？”那文士道：“正是故硅！”眼見官兵和囚車已經去遠，拉著小孩的手道：“外面風大纵搁，我們回屋里去吃衅。”當下父子二人走進書房腾誉。</p>
<p>那文士提筆蘸上了墨徘层，在紙上寫了個“鹿”字峻呕，說道：“鹿這種野獸，雖是龐然大物趣效，性子卻極為和平瘦癌，只吃青草樹葉，從來不傷害別的野獸跷敬。兇猛的野獸要傷它吃它讯私，它只有逃跑，倘若逃不了西傀，那只有給人家吃了斤寇。”又寫了“逐鹿”兩字拥褂，說道：“因此古人常常拿鹿來比喻天下抡驼。世上百姓都溫順善良，只有給人欺壓殘害的份兒肿仑。《漢書》上說：‘秦失其鹿碎税，天下共逐之尤慰。’那就是說雷蹂，秦朝失了天下伟端，群雄并起，大家爭奪匪煌，最后漢高祖打敗了楚霸王责蝠，就得了這只又肥又大的鹿∥ィ”</p>
<p>那小孩點頭道：“我明白了霜医。小說書上說‘逐鹿中原’，就是大家爭著要做皇帝的意思驳规‰攘玻”那文士甚是喜歡，點了點頭吗购，在紙上畫了一只鼎的圖形医男，道：“古人煮食，不用灶頭鍋子捻勉，用這樣三只腳的鼎镀梭，下面燒柴，捉到了鹿踱启，就在鼎里煮來吃报账。</p>
<p>皇帝和大官都很殘忍研底，心里不喜歡誰，就說他犯了罪笙什，把他放在鼎里活活煮熟飘哨。《史記》中記載藺相如對秦王說：‘臣知欺大王之罪當誅也琐凭，臣請就鼎鑊芽隆∑饣瑁’就是說：‘我該死洞辣，將我在鼎里燒死了罷！’”</p>
<p>那小孩道：“小說書上又常說‘問鼎中原’书聚，這跟‘逐鹿中原’好像意思差不多愁憔⊥蠓觯”</p>
<p>那文士道：“不錯。夏禹王收九州之金吨掌，鑄了九口大鼎半抱。</p>
<p>當時的所謂‘金’其實是銅。每一口鼎上鑄了九州的名字和山川圖形膜宋，后世為天下之主的窿侈，便保有九鼎∏锩＃《左傳》上：‘楚子觀兵于周疆史简。定王使王孫滿勞楚子。楚子問鼎之大小輕重焉肛著≡脖’只有天下之主，方能保有九鼎枢贿。楚王只是楚國的諸侯殉农，他問鼎的輕重大小，便是心存不軌萨咕，想取周王之位而代之统抬。”</p>
</div>
</section>
</body>
</html>
