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;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这段代码需要加入我们以前的基础代码中，因为里面有颜色引用，例如： 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

ok，完成，收工！