国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

<strike id="sq0a0"></strike>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/CSS 面試題: 手寫 collapse(折疊) 的 css/html 部分

CSS 面試題: 手寫 collapse(折疊) 的 css/html 部分

Tikitoo 發布于2019-08-30 11:26 / 2992人閱讀

摘要：雜劇，宋代以滑稽搞笑為特點的一種表演形式，元代發展成戲曲形式。每本以四折為主，在開頭或折間另加楔子，每折用同宮調同韻的北曲套曲和賓白組成。

源碼: https://github.com/any86/any-...

做一個組件庫不難

其實vue/react等框架的出現, 讓自己做一個ui變得簡單, 大部分的js邏輯都被庫封裝, 反而組件的代碼主要都是css, 所以只要css寫好了, 一個組件就完成60%以上了.

為自己的職業未來造輪子

vue馬上也快出3了, 現存的所有vue組件庫都會重建, 這又是一個造輪子收集star的好時機, 如果你也想趁機造一個組件庫, 那么開始吧:

最終效果

常規版本

簡化版

html


    
        
            
            唐詩
        
        
            唐詩，泛指創作于唐朝詩人的詩。唐詩是中華民族珍貴的文化遺產之一，是中華文化寶庫中的一顆明珠，同時也對世界上許多民族和國家的文化發展產生了很大影響，對于后人研究唐代的政治、民情、風俗、文化等都有重要的參考意義和價值。
        
    

    
        
            
            宋詞
        
        
            宋代盛行的一種中國文學體裁，宋詞是一種相對于古體詩的新體詩歌之一，標志宋代文學的最高成就。宋詞句子有長有短，便于歌唱。因是合樂的歌詞，故又稱曲子詞、樂府、樂章、長短...
        
    

    
        
            
            元曲
        
        
            元曲，是盛行于元代的一種文藝形式，包括雜劇和散曲，有時專指雜劇。 雜劇，宋代以滑稽搞笑為特點的一種表演形式，元代發展成戲曲形式。每本以四折為主，在開頭或折間另加楔子，每折用同宮調同韻的北曲套曲和賓白組成。如關漢卿的《竇娥冤...

scss

// 間距
$space: 4px;
// 單位圓角
$radius: 2px;
// 灰色
$gray-100: #f8f9fa !default;
$gray-300: #dee2e6 !default;

.a-collapse {
    overflow: hidden;
    border-radius: $radius*2;
    border: 1px solid $gray-300;

    &__item {
        &:nth-of-type(n+2) {
            border-top: 1px solid $gray-300;
        }



        >header {
            background-color: $gray-100;
            padding: 2*$space;
            font-size: 14px;
            cursor: pointer;

            >i.icon-arrow {
                width: 1em;
                height: 1em;
                display: inline-block;
                vertical-align: middle;
                background-image: url("data:image/svg+xml;utf8,")
            }

            >p {
                display: inline-block;
                vertical-align: middle;
                font-weight: bold;
            }
        }

        >article {
            display: none;
            padding: $space;
            font-size: 14px;
        }
    }

    // 展開情況下
    &__item {
        &--open {
            >header {
                border-bottom: 1px solid $gray-300;

                >i.icon-arrow {
                    transform: rotate(90deg);
                }
            }

            >article {
                display: block;
            }
        }
    }

    // 簡化版本
    &--simplify {
        border: none;

        .a-collapse__item {
            >header {
                border: none;
                background-color: transparent;
            }
        }


    }
}

本文并不想講js, 如果大家感興趣剩下的js工作就交給大家完成了, 等vue3發布, 屆時我會結合ts實現完整的組件, 簡要邏輯:

給組件增加一個"手風琴"的選項, 就是只可以同時打開一個"頁".

給每次點擊header標簽的時候, 觸發"頁"的合并和展開.

給"合并/展開"加個動畫效果,提示這里需要js計算"頁"高度, 才能實現和"餓了么ui中collapse組件"的"合并/展開"一樣的動畫.

嘿, 看是不是js的工作并不是很多!

GPU云服務器云服務器手寫js面試題 linux的面試題 js的基礎面試題面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114995.html

css基礎知識整理篇

摘要：折疊后的計算參與折疊的都是正值在都是正數的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負值有正有負，先取出負中絕對值中最大的，然后，和正值中最大的相加。單冒號用于偽類，雙冒號用于偽元素。轉自某個大神整理的面試題盒子模型標準盒子模型內容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...

QiShare 2019-08-29 11:24 評論0 收藏0
CSS規范 > 8 盒模型 Box Model

摘要：當兩個及以上外邊距折疊，合并后的外邊距寬度是發生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 評論0 收藏0
獻給前端求職路上的你們（上）

摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你）前言我是...

animabear 2019-08-21 11:34 評論0 收藏0
獻給前端求職路上的你們（上）

摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你）前言我是...

jackzou 2019-08-30 15:53 評論0 收藏0
獻給前端求職路上的你們（上）

摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你）前言我是...

hiyang 2019-08-01 16:27 評論0 收藏0