Shulou(Shulou.com)06/01 Report--

This article mainly shows you "css3 how to make the website background management panel", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css3 how to make the website background management panel" this article.

HTML structure

The code is as follows:

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 code

Copy the code

The code is as follows:

Body {

Background-color: rgb (220220220)

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 sidebar * /

.slidebar {

Width: 20%

Min-height: 690px

Float: left

Border-right: 1px solid rgb (235235235)

Background-color: rgb (247247247)

}

.slidebar .logo {

Height: 145px

Border-bottom: 1px solid rgb (235235235)

}

.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 (102102102)

Right: 20px

-webkit-font-smoothing: antialiased

}

/ * insert icon 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 (140140140)

Text-decoration: none

Font:16px/40px helvetica,verdana,sans-serif

Box-sizing:border-box

Border-bottom: 1px solid rgb (235235235)

Display: block

Box-shadow:inset 0 1px 0 rgb (255255255)

Text-indent: 20px

Text-transform: capitalize

}

.slidebar li:hover a {

Background-color: rgb (255255255)

Box-shadow: 1px 0 0 rgb (255255255), inset 5px 0 0-1px rgb (234 mine83)

}

/ * main*/

.main {

Float: left

Width: 79%

Height: 690px

Background-color: rgb (255255255)

Position: relative

Font-family: helvetica,verdana,sans-serif

}

.main .topbar {

Border-bottom: 1px solid rgb (235235235)

Margin: 0

Padding: 0

}

/ * topbar top button bar * /

.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 (102102102)

Border-left: 1px solid rgb (235235235)

}

.topbar a:hover {

Background-color: rgb (247247247)

}

.topbar li:first-child a {

Border: none

Border-right: 1px solid rgb (235235235)

}

/ * mainContent*/

.mainContent h5 {

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

}

/ * switch different tabs through opacity * /

.mainContent > div:target {

Opacity: 1

}

.mainContent h3 {

Margin:1em 30px

Color: rgb (234, 83, 63)

Font-size: 20px

}

.mainContent h3: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) h3:before {content: "/ 63";}

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

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

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

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

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

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

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

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

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

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

# dashboard > div {

Border: 1px solid rgb (235235235)

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 (102102102)

Text-transform: capitalize

}

.monitor li a {

Color: rgb (102102102)

Text-transform: capitalize

Text-decoration: none

}

.monitor li:first-child {

Border-bottom: 1px dotted rgb (153153153)

}

Comments. {comments: rgb (27106173);}

Color: rgb (105. 174. 48);}

Color: rgb (246, 129, 15);}

.inclusions .spam {color: rgb (243 record47);}

.monitor .count {

Color: rgb (27106173)

Text-align: right

Font-weight: 600

Margin-right: 15px

Min-width: 25px

Display: inline-block

}

.monitor p {

Color: rgb (128128128)

Margin: 28px 0 18px 17px

Display: block

Font-weight: 600

Font-size: 12px

}

.monitor p a {

Text-decoration: none

Color:rgb (27106173)

}

. 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 (246246246)

Outline: none

Border: none

Text-indent: 10px

}

/ * unify font styles in placeholder under different browsers * /

.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 (246246240), rgb (232232232)

Background:-moz-linear-gradient (top,rgb (246246240), rgb (232232232)

Background:-ms-linear-gradient (top,rgb (246246240), rgb (232232232)

Background: linear-gradient (top,rgb (246246240), rgb (232232232)

Border: 1px solid rgb (229229229)

Color: rgb (102102102)

Float: left

Margin-right: 5px

}

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

Background:-webkit-linear-gradient (top,rgb (232232232), rgb (246246240)

Background:-moz-linear-gradient (top,rgb (232232232), rgb (246246240)

Background:-ms-linear-gradient (top,rgb (232232232), rgb (246246240)

Background: linear-gradient (top,rgb (232232232), rgb (246246240)

}

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

Background:-webkit-linear-gradient (top,rgb (228228228), rgb (210210210)

Background:-moz-linear-gradient (top,rgb (228228228), rgb (210210210)

Background:-ms-linear-gradient (top,rgb (228228228), rgb (210210210)

Background: linear-gradient (top,rgb (228228228), rgb (210210210)

}

. 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 (245Power101), rgb (234pj83))

Background:-moz-linear-gradient (top,rgb (245Power101), rgb (234pj83))

Background:-ms-linear-gradient (top,rgb (245Power101), rgb (234pj83))

Background: linear-gradient (top,rgb (245 ~ 101 ~ 82), rgb (234 ~ 83 ~ 63)

}

. quick-press .submit: hover {

Background:-webkit-linear-gradient (top,rgb (220 ~ 85), rgb (210 ~ 65 ~ 53)

Background:-moz-linear-gradient (top,rgb (220 ~ 85), rgb (210 ~ 65 ~ 53)

Background:-ms-linear-gradient (top,rgb (220 ~ 85), rgb (210 ~ 65 ~ 53)

Background: linear-gradient (top,rgb (220, 85), 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 (200200200)

Border-radius: 50%

Background-color: rgb (214214214)

}

.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 (210210210)

Display: inline-block

Background:-webkit-linear-gradient (top,rgb (255255255), rgb (245245245)

Background:-moz-linear-gradient (top,rgb (255255255), rgb (245245245)

Background:-ms-linear-gradient (top,rgb (255255255), rgb (245245245)

Background: linear-gradient (top,rgb (255255255), rgb (245245245)

}

/ * function button at the bottom of statusbar * /

.statusbar {

Position: absolute

Bottom: 0

Border-top: 1px solid rgb (235235235)

Width: 100%

Padding: 0

Margin: 0

}

.statusbar li {

List-style: none

}

.statusbar a {

Color: rgb (102102102)

Text-decoration: none

Text-align: center

Display: block

}

.statusbar a:hover {

Background-color: rgb (247247247)

}

.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 (235235235)

}

@ 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

}

The above is all the contents of the article "how to make the background management panel of a website by css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.