純css面板插件，自適應(yīng)，多樣式

FWHeart 發(fā)布于2019-04-23 13:22 / 3028人閱讀

摘要：標(biāo)題寬度考慮到標(biāo)題的實(shí)際長(zhǎng)度問題，設(shè)置百分比寬度在不同的分辨率中會(huì)導(dǎo)致太寬或者太窄的問題，很不好看，所以我給標(biāo)題設(shè)定了幾個(gè)固定寬度，基本能適用于所有場(chǎng)景了。

最近在做公司的系統(tǒng)后臺(tái)，用的bootstrap，在設(shè)計(jì)布局的時(shí)候不喜歡他的面板，所以自己寫了這個(gè)面板插件，分享給大家

先上預(yù)覽圖：

默認(rèn)樣式：

綠色：

黃色：

藍(lán)：

紅：

使用方法：

引用MoUi.css

HTML中使用為：

<div class="mo-group mo-group-default mo-group-radius">
            <div class="mo-group-title mo-group-title-left mo-group-title-sm">
                <span class="fa fa-map-marker">span> 標(biāo)題
            div>
            <div class="mo-group-body">
                ...
            div>
        div>

圓角樣式

mo-group-radius

面板顏色樣式為：

默認(rèn)：mo-group-default

綠色：mo-group-success

藍(lán)色：mo-group-primary

黃色：mo-group-warning

紅色：mo-group-danger

標(biāo)題浮動(dòng)：

左浮動(dòng)：mo-group-title-left

其他后續(xù)補(bǔ)充。。。

標(biāo)題寬度：

考慮到標(biāo)題的實(shí)際長(zhǎng)度問題，設(shè)置百分比寬度在不同的分辨率中會(huì)導(dǎo)致太寬或者太窄的問題，很不好看，所以我給標(biāo)題設(shè)定了幾個(gè)固定寬度，基本能適用于所有場(chǎng)景了。

mo-group-title-xs? 寬度100px

mo-group-title-sm 寬度200px

mo-group-title-md 寬度300px

mo-group-title-lg 寬度500px

?源碼下載：點(diǎn)擊

歡迎轉(zhuǎn)載，請(qǐng)注明出處！http://blog.pishiduo.com/content/35

云服務(wù)器 GPU云服務(wù)器 css自適應(yīng) css圖片自適應(yīng) asp 自適應(yīng)css 純CSS

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1792.html

相關(guān)文章

【CSS練習(xí)】IT修真院--練習(xí)1-九宮格

摘要：用于顯示日志信息及輸入一些命令請(qǐng)求監(jiān)聽。可獲得請(qǐng)求列表，點(diǎn)開某一項(xiàng)將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請(qǐng)求的請(qǐng)求方法狀態(tài)碼請(qǐng)求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶代理，幫服務(wù)器識(shí)別設(shè)備用預(yù)覽。九宮格——用html+css制作一個(gè)網(wǎng)頁(yè) 一. 目標(biāo)效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述圓角...

Tecode 2019-08-29 15:34 評(píng)論0 收藏0
一個(gè)前端程序猿的Sublime Text3的自我修養(yǎng)

摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認(rèn)更好的語(yǔ)法高亮，而且他完美支持。語(yǔ)法高亮默認(rèn)安裝的對(duì)的支持讓人抓狂，幀動(dòng)畫別開玩笑了你只會(huì)看到一片白色的純文本一樣的代碼。事實(shí)上不光，我建議用完全替代原來(lái)的來(lái)完成語(yǔ)法高亮。文章轉(zhuǎn)載自本人的博客《三省吾身丶丶》點(diǎn)擊查看喜歡的話請(qǐng)瘋狂的推薦吧！ ^_^ 本文章會(huì)在本人有插件或者設(shè)置更新時(shí)，進(jìn)行不定時(shí)更新偷懶了，圖片地址直接設(shè)置的博客...

KunMinX 2019-08-22 10:59 評(píng)論0 收藏0
15個(gè)有趣的JavaScript與CSS庫(kù)

摘要：而調(diào)試器具有對(duì)模型控制器以及視圖的實(shí)時(shí)管理權(quán)限。項(xiàng)目地址是一個(gè)輕量級(jí)純寫的文本工具提示庫(kù)。它支持種不同國(guó)家的貨幣格式，以及超過(guò)種不同語(yǔ)言的本地化設(shè)置。項(xiàng)目地址是一個(gè)根據(jù)規(guī)范構(gòu)建的輕量級(jí)框架。它壓縮后僅有，同時(shí)它沒有預(yù)先設(shè)定的元素和內(nèi)置動(dòng)畫。在十一月份的前端技術(shù)列表中，我們整合了一些令人感到驚嘆的 GitHub 項(xiàng)目，其中包含了新的 CSS 框架、node.js包管理器，以及用于實(shí)現(xiàn)圖...

chemzqm 2019-08-30 13:15 評(píng)論0 收藏0
15個(gè)有趣的JavaScript與CSS庫(kù)

摘要：而調(diào)試器具有對(duì)模型控制器以及視圖的實(shí)時(shí)管理權(quán)限。項(xiàng)目地址是一個(gè)輕量級(jí)純寫的文本工具提示庫(kù)。它支持種不同國(guó)家的貨幣格式，以及超過(guò)種不同語(yǔ)言的本地化設(shè)置。項(xiàng)目地址是一個(gè)根據(jù)規(guī)范構(gòu)建的輕量級(jí)框架。它壓縮后僅有，同時(shí)它沒有預(yù)先設(shè)定的元素和內(nèi)置動(dòng)畫。在十一月份的前端技術(shù)列表中，我們整合了一些令人感到驚嘆的 GitHub 項(xiàng)目，其中包含了新的 CSS 框架、node.js包管理器，以及用于實(shí)現(xiàn)圖...

wangjuntytl 2019-08-22 11:02 評(píng)論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評(píng)論0 收藏0