純css3制作網站後台管理面板

　　代碼如下:

　　dashboard

　　posts

　　media

　　pages

　　links

　　comments

　　widgets

　　plugins

　　users

　　tools

　　settings

　　q

　　p

　　o

　　f

　　n

　　Dashboard

　　Right Now

　　content

　　179posts

　　13pages

　　21categories

　　305tags

　　discussions

　　353comments

　　319approved

　　0pending

　　34spam

　　Theme Twenty Eleven with 3 widgets

　　Quick Press

　　l

　　m

　　Publish

　　posts

　　media

　　pages

　　links

　　comments

　　widgets

　　plugins

　　users

　　tools

　　settings

　　s

　　k

　　CSS 代碼

　　代碼如下:

　　body {

　　background-color: rgb(220,220,220);

　　padding: 0;

　　margin: 0;

　　font-size: 16px;

　　font-family: sans-serif;

　　}

　　.clearfix:after {

　　content: "";

　　display: block;

　　height: 0;

　　width: 0;

　　clear: both;

　　}

　　.admin-panel {

　　width: 990px;

　　margin: 50px auto;

　　}

　　/*slidebar側邊欄*/

　　.slidebar {

　　width: 20%;

　　min-height: 690px;

　　float: left;

　　border-right: 1px solid rgb(235,235,235);

　　background-color: rgb(247,247,247);

　　}

　　.slidebar .logo {

　　height: 145px;

　　border-bottom: 1px solid rgb(235,235,235);

　　}

　　.slidebar ul {

　　padding: 0;

　　margin:0;

　　}

　　.slidebar li {

　　list-style-type: none;

　　margin: 0;

　　position: relative;

　　}

　　.slidebar li:before {

　　content: "";

　　font-family: 'icomoon';

　　speak: none;

　　font-weight: normal;

　　font-variant: normal;

　　text-transform: none;

　　position: absolute;

　　display: block;

　　line-height: 40px;

　　color: rgb(102,102,102);

　　right: 20px;

　　-webkit-font-smoothing: antialiased;

　　}

　　/*插入icon圖標*/

　　.slidebar li:nth-child(1):before {content: "63";}

　　.slidebar li:nth-child(2):before {content: "64";}

　　.slidebar li:nth-child(3):before {content: "62";}

　　.slidebar li:nth-child(4):before {content: "65";}

　　.slidebar li:nth-child(5):before {content: "74";}

　　.slidebar li:nth-child(6):before {content: "66";}

　　.slidebar li:nth-child(7):before {content: "67";}

　　.slidebar li:nth-child(8):before {content: "68";}

　　.slidebar li:nth-child(9):before {content: "69";}

　　.slidebar li:nth-child(10):before {content: "6a";}

　　.slidebar li:nth-child(11):before {content: "75";}

　　.slidebar ul a {

　　color: rgb(140,140,140);

　　text-decoration: none;

　　font:16px/40px helvetica,verdana,sans-serif;

　　box-sizing:border-box;

　　border-bottom: 1px solid rgb(235,235,235);

　　display: block;

　　box-shadow:inset 0 1px 0 rgb(255,255,255);

　　text-indent: 20px;

　　text-transform: capitalize;

　　}

　　.slidebar li:hover a {

　　background-color: rgb(255,255,255);

　　box-shadow: 1px 0 0 rgb(255,255,255),inset 5px 0 0 -1px rgb(234,83,63);

　　}

　　/*main*/

　　.main {

　　float: left;

　　width: 79%;

　　height: 690px;

　　background-color: rgb(255,255,255);

　　position: relative;

　　font-family: helvetica,verdana,sans-serif;

　　}

　　.main .topbar {

　　border-bottom: 1px solid rgb(235,235,235);

　　margin: 0;

　　padding: 0;

　　}

　　/*topbar頂部按鈕欄*/

　　.topbar li {

　　float: right;

　　list-style: none;

　　}

　　.topbar li:first-child {float: left;}

　　.topbar a {

　　font-family: 'icomoon';

　　display: block;

　　line-height: 50px;

　　width: 50px;

　　text-align: center;

　　text-decoration: none;

　　color: rgb(102,102,102);

　　border-left: 1px solid rgb(235,235,235);

　　}

　　.topbar a:hover {

　　background-color: rgb(247,247,247);

　　}

　　.topbar li:first-child a {

　　border: none;

　　border-right: 1px solid rgb(235,235,235);

　　}

　　/*mainContent*/

　　.mainContent h4 {

　　line-height: 1;

　　font-size: 18px;

　　margin: 1.3em 0 1em;

　　margin-left: 17px;

　　}

　　.mainContent>div {

　　position: absolute;

　　opacity: 0;

　　-webkit-transition:opacity 200ms linear;

　　-moz-transition:opacity 200ms linear;

　　-ms-transition:opacity 200ms linear;

　　transition:opacity 200ms linear;

　　}

　　/*通過opacity來切換不同的選項卡*/

　　.mainContent>div:target {

　　opacity: 1;

　　}

　　.mainContent h2 {

　　margin:1em 30px;

　　color: rgb(234,83,63);

　　font-size: 20px;

　　}

　　.mainContent h2:before {

　　font-family: 'icomoon';

　　content: attr(data-icon);

　　font-weight: normal;

　　font-variant: normal;

　　text-transform: none;

　　line-height: 1;

　　margin-right: 10px;

　　-webkit-font-smoothing: antialiased;

　　}

　　.mainContent div:nth-child(1) h2:before {content: "63";}

　　.mainContent div:nth-child(2) h2:before {content: "64";}

　　.mainContent div:nth-child(3) h2:before {content: "62";}

　　.mainContent div:nth-child(4) h2:before {content: "65";}

　　.mainContent div:nth-child(5) h2:before {content: "74";}

　　.mainContent div:nth-child(6) h2:before {content: "66";}

　　.mainContent div:nth-child(7) h2:before {content: "67";}

　　.mainContent div:nth-child(8) h2:before {content: "68";}

　　.mainContent div:nth-child(9) h2:before {content: "69";}

　　.mainContent div:nth-child(10) h2:before {content: "6a";}

　　.mainContent div:nth-child(11) h2:before {content: "75";}

　　#dashboard>div {

　　border: 1px solid rgb(235,235,235);

　　margin-left: 30px;

　　float: left;

　　border-radius: 5px;

　　min-width: 345px;

　　height: 262px;

　　display: inline-block;

　　}

　　.monitor ul {

　　float: left;

　　padding: 0;

　　margin: 0 31px 0 17px;

　　}

　　.monitor li {

　　list-style:none;

　　font: 600 14px/28px helvetica,verdana,sans-serif;

　　color: rgb(102,102,102);

　　text-transform: capitalize;

　　}

　　.monitor li a {

　　color: rgb(102,102,102);

　　text-transform: capitalize;

　　text-decoration: none;

　　}

　　.monitor li:first-child {

　　border-bottom: 1px dotted rgb(153,153,153);

　　}

　　.discussions .comments {color: rgb(27,106,173);}

　　.discussions .approved {color: rgb(105,174,48);}

　　.discussions .pending {color: rgb(24