纯css3制作网站后台管理面板

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’;