纯css3制作网站后台管理面板_ Div+Css教程-查字典教程网
纯css3制作网站后台管理面板
纯css3制作网站后台管理面板
发布时间:2015-06-06 来源:查字典编辑
摘要:代码如下:dashboardpostsmediapageslinkscommentswidgetspluginsuserstoolssett...

代码如下:

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(246,129,15);}

.discussions .spam {color: rgb(243,47,47);}

.monitor .count {

color: rgb(27,106,173);

text-align: right;

font-weight: 600;

margin-right: 15px;

min-width: 25px;

display: inline-block;

}

.monitor p {

color: rgb(128,128,128);

margin: 28px 0 18px 17px;

display: block;

font-weight: 600;

font-size: 12px;

}

.monitor p a {

text-decoration: none;

color:rgb(27,106,173);

}

.quick-press form {

margin:0 20px 0 13px;

}

.quick-press input[type="text"] {

display: block;

width: 100%;

-moz-box-sizing:border-box;

box-sizing:border-box;

height: 35px;

line-height: 15px;

padding: 10px 0;

margin:0 0 7px 0;

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

outline: none;

border: none;

text-indent: 10px;

}

/*统一各浏览器下placeholder内的字体样式*/

.quick-press input[type="text"]::-webkit-input-placeholder {font-size: 14px;}

.quick-press input[type="text"]:-moz-input-placeholder {font-size: 14px;}

.quick-press input[type="text"]::-moz-input-placeholder {font-size: 14px;}

.quick-press input[type="text"]:-ms-input-placeholder {font-size: 14px;}

.quick-press button {

margin-top: 13px;

border-radius: 5px;

text-align: center;

line-height: 30px;

padding: 0;

}

.quick-press .save, .quick-press .delet {

font-family: 'icomoon';

width: 37px;

background: -webkit-linear-gradient(top,rgb(246,246,240),rgb(232,232,232));

background: -moz-linear-gradient(top,rgb(246,246,240),rgb(232,232,232));

background: -ms-linear-gradient(top,rgb(246,246,240),rgb(232,232,232));

background: linear-gradient(top,rgb(246,246,240),rgb(232,232,232));

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

color: rgb(102,102,102);

float: left;

margin-right: 5px;

}

.quick-press .save:hover, .quick-press .delet:hover {

background: -webkit-linear-gradient(top,rgb(232,232,232),rgb(246,246,240));

background: -moz-linear-gradient(top,rgb(232,232,232),rgb(246,246,240));

background: -ms-linear-gradient(top,rgb(232,232,232),rgb(246,246,240));

background: linear-gradient(top,rgb(232,232,232),rgb(246,246,240));

}

.quick-press .save:active, .quick-press .delet:active {

background: -webkit-linear-gradient(top,rgb(228,228,228),rgb(210,210,210));

background: -moz-linear-gradient(top,rgb(228,228,228),rgb(210,210,210));

background: -ms-linear-gradient(top,rgb(228,228,228),rgb(210,210,210));

background: linear-gradient(top,rgb(228,228,228),rgb(210,210,210));

}

.quick-press .submit {

float: right;

width: 70px;

border: 1px solid rgb(238,85,64);

color: #fff;

font-size: 16px;

background: -webkit-linear-gradient(top,rgb(245,101,82),rgb(234,83,63));

background: -moz-linear-gradient(top,rgb(245,101,82),rgb(234,83,63));

background: -ms-linear-gradient(top,rgb(245,101,82),rgb(234,83,63));

background: linear-gradient(top,rgb(245,101,82),rgb(234,83,63));

}

.quick-press .submit:hover {

background: -webkit-linear-gradient(top,rgb(220,85,70),rgb(210,65,53));

background: -moz-linear-gradient(top,rgb(220,85,70),rgb(210,65,53));

background: -ms-linear-gradient(top,rgb(220,85,70),rgb(210,65,53));

background: linear-gradient(top,rgb(220,85,70),rgb(210,65,53));

}

/*logo*/

.logo a {

width: 88px;

height: 88px;

display: inline-block;

position: relative;

left: 50%;

top: 50%;

margin: -45px 0 0 -45px;

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

border-radius: 50%;

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

}

.logo a:before {

content: "A";

width: 70px;

height: 70px;

font: 50px/70px helvetica,verdana,sans-serif;

text-align: center;

position: absolute;

top: 8px;

left: 8px;

border-radius: 35px;

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

display: inline-block;

background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));

background: -moz-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));

background: -ms-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));

background: linear-gradient(top,rgb(255,255,255),rgb(245,245,245));

}

/*statusbar底部功能按钮*/

.statusbar {

position: absolute;

bottom: 0;

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

width: 100%;

padding: 0;

margin: 0;

}

.statusbar li {

list-style: none;

}

.statusbar a {

color: rgb(102,102,102);

text-decoration: none;

text-align: center;

display: block;

}

.statusbar a:hover {

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

}

.statusbar .profiles-setting, .statusbar .logout {

float: right;

}

.statusbar .profiles-setting a, .statusbar .logout a {

font-family: 'icomoon';

width: 49px;

height: 49px;

line-height: 50px;

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

}

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.ttf') format('truetype'),

url('fonts/icomoon.svg#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类