純CSS實現新浪網頁的橫向選項卡

2021-08-08 16:35:36 字數 1227 閱讀 9260

1、先是html

此處是實際內容，跟著選項卡的切換而變化
2、css

.selection-card-area


.horizontal-selection-card


.horizontal-selection-card:after


.horizontal-selection-card>li


.horizontal-selection-card>li.active


.horizontal-selection-card>li:not(.active)
css這部分內容需要重點介紹，基本的dom元素非常簡單，採用的是ul-li的列表形式，每個li元素就是乙個選項卡，因為是橫向布置，所以我把它們設定成向左浮動，這樣可以使得每個li之間沒有間隙，但是float會破壞原來的流式布局，使得外面的ul元素縮小，於是對ul元素採用overflow：hidden來恢復布局，當然還可以用乙個不可見的額外元素，然後設定clear清空浮動來實現同樣的效果；當前啟用的li元素邊框線是左右灰色細線，頭部紅色線粗，底部無線，而沒有啟用的li元素的所有邊框顏色需要和li元素背景色一致，這樣就避免了在選項時因為邊框線的切換導致li元素寬度變化；最後是選項卡底部的線條切換，選中的卡片下面是沒有線的，而其他卡片底部都要有線條，我並不是直接在li元素上面設定邊框線，而是在底部另外加了一條長線，通過在ul元素設定偽類：after來實現，對底部長線設定絕對定位，以便於我控制它的位置，針對定位的top屬性，這裡用到了calc屬性的計算功能，然後再通過設定z-index屬性控制底部線條的可見、隱藏，使得當前選中的選項卡與底部內容渾然一體。

3、dom事件繫結，這裡在每個選項看上繫結了click事件，從而實現「當前啟用卡」的樣式的切換 

function changetype(dom, type)


}
4、效果

純CSS實現橫向滾動條

一 前言 基於大部分場景，我們需要使用橫向滾動，這種時候，大部分會選擇swiper來實現，但是其實，我們也可以通過純css的方式實現乙個滾動條 二 實現 大家都知道overflow 可以單獨設定 橫向滾動 overflow x scroll 縱向滾動 overflow y scroll 基於上面知識...

純css 如何實現文字超出部分橫向滾動

君不見黃河之水天上來，奔流到海不復回，君不見高堂明鏡悲白髮，朝如青絲暮成雪，人生得意須盡歡，莫使金樽空對月 下面解釋原因 首先 這裡的.box被設定了寬度為300px,而由於是塊級元素，所以預設寬度是100 在這裡也就是300px，但是的文字寬度其實是超過300px的，題主設定transform t...

純CSS實現跳動的文字

css start my face webkit keyframes my face 4 68 98 38 6 8 86 10 72 12 64 78 96 14 54 16 18 22 20 36 46 26 50 28 30 40 62 76 88 32 34 66 42 44 70 48 74...