亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

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

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

使用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

普安县| 榆社县| 武陟县| 南丰县| 合阳县| 海南省| 鹿泉市| 社会| 巴林左旗| 平潭县| 略阳县| 囊谦县| 岳池县| 日土县| 石城县| 宁安市| 鹰潭市| 饶平县| 婺源县| 大同县| 门源| 山西省| 厦门市| 衡山县| 竹溪县| 蚌埠市| 寿宁县| 塔城市| 惠州市| 巴楚县| 古丈县| 辽中县| 岳池县| 晋城| 莲花县| 克拉玛依市| 滕州市| 金平| 南汇区| 巴东县| 渭南市|