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

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

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

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

先上預(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)題浮動：

左浮動：mo-group-title-left

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

標(biāo)題寬度：

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

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

mo-group-title-sm 寬度200px

mo-group-title-md 寬度300px

mo-group-title-lg 寬度500px

?源碼下載：點擊

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

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

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

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

相關(guān)文章

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

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

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

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

KunMinX 2019-08-22 10:59 評論0 收藏0
15個有趣的JavaScript與CSS庫

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

wangjuntytl 2019-08-22 11:02 評論0 收藏0
15個有趣的JavaScript與CSS庫

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

chemzqm 2019-08-30 13:15 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

netmou 2019-08-23 12:28 評論0 收藏0