91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用CSS3怎么編寫田字格列表樣式

發布時間:2021-06-06 10:44:42 來源:億速云 閱讀:344 作者:Leah 欄目:web開發

本篇文章為大家展示了使用CSS3怎么編寫田字格列表樣式,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

CSS

<style>
        ul li{ list-style: none;}
        .mp-list{   
            position: relative;
            overflow: hidden;
            z-index: 0;
            background-color: #fff;
        }        
        .mp-list:before {
            content: '';
            position: absolute;
            width: 33.33%;
            left: 33.33%;
            height: 100%;
            border-left: .02rem solid #ddd;
            border-right: .02rem solid #ddd;
        }
        .mp-list li {
            width: 33.33%;
            height: 2rem;
            line-height: 2rem;
            font-size: .28rem;
            text-align: center;
            border-bottom: .02rem solid #ddd;
            margin-bottom: -1px;
            float: left;
            position: relative;
            z-index: 10;
            color: #212121;
        }
        .mp-list li a {
            color: #212121;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .28rem;
        }
    </style>

HTML

<ul class="mp-list">
    <li><a hybrid-link="" href="" title="">香港</a></li>
    <li><a hybrid-link="" href="" title="">澳門</a></li>
    <li><a hybrid-link="" href="" title="">臺灣</a></li>
    <li><a hybrid-link="" href="" title="">曼谷</a></li>
    <li><a hybrid-link="" href="" title="">新加坡</a></li>
    <li><a hybrid-link="" href="" title="">首爾</a></li>
    <li><a hybrid-link="" href="" title="">東京</a></li>
    <li><a hybrid-link="" href="" title="">濟州島</a></li>
    <li><a hybrid-link="" href="" title="">芭堤雅</a></li>
</ul>
當顯示4列時,給:after添加樣式,注意需要更改li的width、.mp-list:before的位置。
.mp-list:after {
    content: '';
    position: absolute;
    width: 10%;
    left: 75%;
    height: 100%;
    border-left: .02rem solid #ddd;
    border-right: 0;
}

上述內容就是使用CSS3怎么編寫田字格列表樣式,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

临夏县| 涞源县| 澄江县| 东源县| 义马市| 沁水县| 台北县| 宁明县| 榆社县| 高唐县| 黔南| 三门县| 陆丰市| 观塘区| 阿合奇县| 株洲市| 南木林县| 伊春市| 海丰县| 广元市| 县级市| 中西区| 丽江市| 宝丰县| 翼城县| 禄劝| 托里县| 和硕县| 曲松县| 永新县| 正镶白旗| 浮山县| 宽甸| 洛阳市| 察哈| 鹤岗市| 阿瓦提县| 花莲市| 焦作市| 宝鸡市| 武安市|