css自学框架之面板

面板是我们开发中经常用到，也就是页面版面中一块一块的板块，效果如下图：
请添加图片描述

一、css代码

.myth-panel {background-color: var(--white);border: solid 1px transparent;}.myth-panel .myth-panel-header {border-bottom: solid 1px transparent;padding: 8px 15px;font-size: 14px;font-weight: 700; margin-bottom: -1px;}.myth-panel .myth-panel-header a{float: right;margin-right: 10px;}.myth-panel .myth-panel-body {padding: 15px;}.myth-panel.myth-panel-default {border-color: #ddd;}.myth-panel.myth-panel-default > .myth-panel-header {border-color: #ddd;background-color: #f5f5f5;color: #444;}.myth-panel.myth-panel-blue {border-color:var(--blue);}.myth-panel.myth-panel-blue > .myth-panel-header {border-color:var(--blue);background-color: var(--blue);color: #fff;}.myth-panel.myth-panel-blue > .myth-panel-header a{color: #fff;}.myth-panel.myth-panel-yellow {border-color: var(--yellow);}.myth-panel.myth-panel-yellow > .myth-panel-header {border-color: var(--yellow);background-color: var(--yellow);color: #fff;}.myth-panel.myth-panel-yellow > .myth-panel-header a{color: #fff;}.myth-panel.myth-panel-red {border-color: var(--red);}.myth-panel.myth-panel-red > .myth-panel-header {border-color: var(--red);background-color: var(--red);color: #fff;}.myth-panel.myth-panel-red > .myth-panel-header a{color: #fff;}.myth-panel.myth-panel-green {border-color: var(--green);}.myth-panel.myth-panel-green > .myth-panel-header {border-color: var(--green);background-color: var(--green);color: #fff;}.myth-panel.myth-panel-green > .myth-panel-header a{color: #fff;}

这段代码需要加入我们以前的基础代码中，因为里面有颜色引用，例如： var(–red)。

二、HTML代码

<div class="mythBox mid"><h2>默认面板</h2><div class="myth-panel myth-panel-default"><div class="myth-panel-body">默认面板</div></div><h2>带标题的面板</h2><div class="myth-panel myth-panel-default"><div class="myth-panel-header">面板标题</div><div class="myth-panel-body">面板内容</div></div><h2>带标题和更多按钮的面板</h2><div class="myth-panel myth-panel-default"><div class="myth-panel-header">面板标题 <a href="">更多>></a> </div><div class="myth-panel-body">面板内容</div></div><h2>其他颜色面板</h2><div class="myth-panel myth-panel-blue"><div class="myth-panel-header">面板标题  <a href="">更多>></a></div><div class="myth-panel-body">面板内容</div></div><div class="myth-panel myth-panel-yellow"><div class="myth-panel-header">面板标题</div><div class="myth-panel-body">面板内容</div></div><div class="myth-panel myth-panel-red"><div class="myth-panel-header">面板标题</div><div class="myth-panel-body">面板内容</div></div><div class="myth-panel myth-panel-green"><div class="myth-panel-header">面板标题</div><div class="myth-panel-body">面板内容</div></div></div>