Garden blog page layout code

Blog css code interpreter garden

(Not comprehensive, I hope a lot of criticism)

h1 of, H2, H3, H4, UL {
margin: 0;
padding: 0
}
UL {/ * Common lower link content (this change the format) * /
List - style: none
}
A {
text - Decoration: none
}
A : Active, A: Link, A: visited {
Color: # 0681ba
}
A: {hover
Color: # F60
}
A IMG {
border - width: 0
}
table, tbody, TD, TH, thead, TR {/ * calendar form * /
border - Collapse: Collapse;
border: 1px Solid Silver
}
Table {
width: 100%
}
body {
position: relative;
margin: 0;
padding: 0;
height: 100%;
Line - height: for 1.5;
background - Color: #FFF
}
Home #, # header, main #, # footer {
position: relative;
the display: Block;
margin: 32px 0;
Box - Sizing: border - Box
}
#home {
margin: 48px 64PX
}
#main {/ * the entire page all information * /
font - size: 0 / * page text mainly refers sizes, provided herein is for the purpose of clearing 0 inline or inline-block spaces produced very useful * /
}
#mainContent {/ * * write the main content Frames /
position: relative;
the display: inline - Block;
Box - Sizing: border - Box;
width: 75%;
Vertical - align = left: Top;
font - size: 14px;
padding - right: 32px
}
#sidebar {/ * sidebar plus a reference id # is to be edited, without # the global variable is set (# can be added to the calendar printed out individually designed) * /
position: relative;
Run the display: inline - Block;
Box - Sizing: border - Box;
width: 25%; / * height did not write, you can choose the calendar and some other unimportant stuff deleted, the sidebar reduced, so that the proportion of essay content area larger * /
Vertical Number of - align = left: Top;
font - size: 14px
}
#footer {/ * the bottom of the message * /
border - Top: Solid # 0681ba 1px;
padding - Top: 10px;
text - align = left: Center
}
#header {/ * my blog name and signature frame of mind where the bottom menu * /
border - bottom: 1px Solid # 0681ba;
text - align = left: right
}
# blogTitle.title {/ * my blog title * /
font - size: 32px
}
# blogTitle.subtitle {/ * blog subtitle * /
Color: # 999 ;
font - size: 12px;
margin: 6px 0
}
#navigator {/ * menu bar * /
position: relative;
text - align = left: right
}
# # navList Navigator {/ * the column containing text * /
position: relative;
the display: inline - Block
}
# # navList Navigator Li {/ * single word "blog Garden" * /
the display: inline - Block
}
# navigator.menu {/ * class blog Park * /
the display: Block;
width: 5em;
font - size: 16px;
padding: 0 6px;
text - align = left: Center
}
# navigator.menu: hover {/ * Representative hover hover over text effects * /
Color: #fff;
background - Color: # 0681ba
}
# navigator.blogStats {/ * sideways small print (reviews, articles, essays number) * /
position: Absolute;
Run the display: inline - Block;
left: 0;
bottom: 6px;
Color: # 999;
font - size: 12px;
font - style: Italic
}
.forFlow {/ * main Frames information * /
position: relative;
padding: 24px;
box - shadow:0 0 2px#ccc
}
#topics {
position:relative
}
.postBody {
margin - top:0
}
#blog_post_info_block {
position:relative;
margin - top:24px
}
#BlogPostCategory {
position:relative
}
#EntryTag {
position:relative;
margin - top:12px
}
#post_next_prev {
margin - top:12px
}
#blog - comments - placeholder {
position:relative;
margin - top:24px
}
#comments_pager_bottom,#comments_pager_top {
position:relative;
text - align:right;
border - bottom:1px solid#0681ba
}
.pager {
display:inline - block;
background - color:#0681ba;
font - size:16px;
margin - top:12px;
padding:6px;
margin - bottom:-1px
}
.pager.current {
padding:6px;
margin - right:6px
}
.pager a {
color:#FFF;
padding:6px;
margin - right:6px
}
.pager a:hover {
background - color:#07628d
}
.feedback_area_title {
color:#fff;
font - size:20px;
font - weight:700;
padding:6px 12px;
display:inline - block;
background - color:#0681ba
}
.feedbackItem {
margin - top:12px;
position:relative;
border - left:1px solid#0681ba;
border - bottom:1px solid#0681ba;
padding - bottom:7px
}
.layer {
padding:6px;
background - color:#0681ba;
color:#FFF;
display:inline - block;
font - size:16px;
margin - right:10px
}
.layer:active,.layer:hover,.layer:link,.layer:visited {
color:#FFF
}
.blog_comment_body {
margin:10px 20px
}
.feedbackManage {
position:absolute;
right:0;
bottom:7px
}
.louzhu {
color:#f60
}
.louzhu + span {
color:#f60
}
.comment_date {
margin - right:10px
}
.comment_actions a,.comment_bury,.comment_digg {
padding:8px 10px
}
.comment_actions a:hover,.comment_bury:hover,.comment_digg:hover {
background - color:#0681ba;
color:#fff
}
#comment_form {
margin - top:24px
}
#comment_nav {
border - bottom:1px solid#0681ba;
font - size:16px;
margin - top:12px;
text - align:right
}
#comment_nav a {
background - color:#0681ba;
color:#fff;
display:inline - block;
margin - left:6px;
padding:6px
}
#comment_nav a:hover {
background - color:#07628d
}
.entrylistPosttitle, .postTitl2, .postTitle {
border - bottom: 1px Dashed # 0681ba;
font - size: 20px;
padding - bottom: 4px
}
.entrylistItemPostDesc, .postDesc, .postDesc2 {/ * refers postDesc below each essay small print * /
Color: # 999;
font - size: 12px;
margin - Top: 12px;
text - align = left: right
}
.entrylistDescription {
Color: # 999;
font - style: Italic;
text - indent: 2em;
margin: 10px 0
}
.PostList, .DAY,, .entrylistItem {/*.day refers Frames same day essays where * /
margin: 20px 0
}
.dayTitle {/ * this essay containing complete time * /
the display: none
}
.entrylistPostSummary , .postCon {/ * postCon essays and refers to a common summary Frames * /
margin: 0 10px;
font - size: 14px
}
.topicListFooter {/ * first lower essays a small framed blank * /
margin: 20px;
text - align = left: Center
}
.post - categoty - {Tags
text - align = left: right;
margin - Top : 10px;
font - style: Italic;
Color: # 999;
font - size: 12px
}
.post - categoty - {Tags A
font - size: 14px;
font - style: Normal
}
#sideBarMain {/ * sidebar, sidebar at least one measure * /
position: relative
}
.sidebar - Block {
margin: 24px 0
}
.catListTitle {/ * write a notice of this type of framed title, the format of the control h3 * /
Color: # 999;
margin - bottom: 8px;
font - weight: Normal
}
.catListTitle span {
margin - left:4px
}
#sidebar_search_box.div_my_zzk {/*搜索栏找找看,google*/
margin - bottom:8px
}
#sidebar_search_box.input_my_zzk {/*输入框*/
font - size:16px
}
#sidebar_search_box.btn_my_zzk {/*按钮*/
margin - left:8px
}
.recent_comment_title {
margin - top:6px
}
.recent_comment_body {
font - size:12px
}
.recent_comment_author {
font - size:12px;
text - align:right;
color:#999
}
#cnblogs_post_body {
position:relative
}
#cnblogs_post_body h1 {
font - size:20px;
font - weight:700;
margin - bottom:12px;
margin - top:12px;
padding:6px 6px 6px 0
}
#cnblogs_post_body h2 {
font - size:18px;
font - weight:700;
margin - bottom:12px;
margin - top:12px;
padding:4px 4px 4px 0
}
#cnblogs_post_body h3 {
font - size:16px;
font - weight:700;
margin - bottom:12px;
margin - top:12px;
padding:4px 4px 4px 0
}
#cnblogs_post_body img {
display:inline - block;
max - width:100 %;
width:auto;
margin:10px 0;
padding:0;
border - width:0;
box - shadow:0 0 3px#ddd
}
#cnblogs_post_body p {
font - size:14px;
margin:10px 0 0 0;
text - indent:0em;
width:100 %
}
#cnblogs_post_body li img,#cnblogs_post_body p img {
margin:0;
display:block;
font - size:0
}
#cnblogs_post_body blockquote {
border - left:6px solid#eee;
color:#333;
font - size:12px;
font - style:italic;
margin:10px 0 10px 2em;
padding:6px 12px;
word -
break:break - all
}
#cnblogs_post_body blockquote p {
margin:2px 0;
text - indent:0;
padding:0
}
#cnblogs_post_body ul,#cnblogs_post_body ol {/*ul指常用链接下边的内容*/
margin:8px 0
}
#cnblogs_post_body strong {
font - weight:bold;
font - size:15px
}
#cnblogs_post_body table,#cnblogs_post_body tr,#cnblogs_post_body th,#cnblogs_post_body td {
border:1px solid silver;
border - collapse:collapse;
padding:2px
}
#blog_post_info {
position:relative
}
#green_channel {
position:relative;
display:inline - block;
padding:8px;
margin - top:12px;
border:1px dashed#999;
width:unset
}
#green_channel_contact,#green_channel_digg,#green_channel_favorite,#green_channel_follow {
display:inline - block;
vertical - align:middle;
color:#fff;
padding:6px 0;
width:5em;
text - align:center;
margin - right:12px
}
#green_channel_digg {
background - color:#2daebf
}
#green_channel_follow {
background - color:#e33100
}
#green_channel_favorite {
background - color:#ffb515
}
#green_channel_contact {
background - color:#555
}
#green_channel_wechat,#green_channel_weibo {
display:inline - block;
vertical - align:middle
}
#green_channel_wechat img,#green_channel_weibo img {
width:24px;
height:24px
}
#div_digg {
position:fixed;
display:block;
bottom:32px;
float:unset;
width:unset;
margin:0;
padding:12px;
background - color:#fff;
box - shadow:0 0 2px#ccc;
text - align:center;
z - index:1000
}
.buryit,.diggit {
position:relative;
float:unset;
margin:0;
padding:0;
display:inline - block;
background:unset;
color:#f60;
width:48px;
height:36px;
vertical - align:text - bottom;
font - size:32px;
overflow:visible
}
.buryit::before,.diggit::before {
position:absolute;
font - family:'FontAwesome';
left:0;
top:0;
width:36px;
height:36px;
line - height:36px
}
.buryit.diggnum,.buryit.burynum,.diggit.diggnum,.diggit.burynum {
position:absolute;
bottom:0;
left:36px;
font - size:16px;
font - style:italic
}
.buryit.diggnum,.diggit.diggnum {
color:#ea4335
}
.buryit.burynum,.diggit.burynum {
color:#999
}
.buryit:hover,.diggit:hover {
font - size:36px;
color:#f66
}
.diggit::before {
content:"\f164"
}
.buryit {
margin - left:12px
}
.buryit::before {
content:"\f165"
}
.diggword {
margin:0;
padding:0
}
#author_profile {
position:relative;
display:block;
float:unset;
width:unset
}
#author_profile_info {
position:relative;
display:block
}
#author_profile_detail {
position:relative;
display:inline - block;
margin - left:12px
}
#commentform_title {
color:#fff;
font - size:20px;
font - weight:700;
padding:6px 12px;
display:inline - block;
background:unset;
background - color:#0681ba
}
.comment_vote {
text - align:left
}
.commentbox_title {
position:relative;
float:unset;
width:unset
}
.commentbox_title_left {
position:relative;
float:unset;
display:inline - block
}
.commentbox_title_right {
position:relative;
float:unset;
display:inline - block
}
.commentbox_title_right.comment_icon {
display:inline - block;
cursor:pointer
}
#tbCommentBody {
width:100 %;
height:160px;
box - sizing:border - box
}
#btn_comment_submit {
background - color:#0681ba;
color:#fff;
cursor:pointer;
font - size:18px;
padding:8px;
width:unset;
height:unset
}
.cnblogs_code {
background - color:#F9F9F9;
border - width:0
}
div.cnblogs_code {
border - left:4px solid#73dc77;
margin:10px 0;
padding:8px
}
span.cnblogs_code {
font - size:12px ! important;
vertical - align:middle;
background - color:#efefef;
padding:2px 4px;
margin:0
}
.cnblogs_code_toolbar {
display:none
}
.cnblogs_code_hide {
display:none
}
#footer {/*页面最底部的包含信息的框子*/
border - top:1px solid#0681ba;
padding - top:10px;
text - align:center
}
{#MySignature
padding: 10px;
background: # f9f9f9 URL (http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) NO-REPEAT Scroll 50% 15px;
padding-left: 80px
}
#MySignature div {
Line-height: 25px
}
.fixed-bar-Warp {/ * returns the uppermost circle icon * /
position: Fixed;
the display: Block;
Z-index: 9999;
width: 40px;
bottom: 24px;
right: 12px;
Color: #fff
}
.fixed-bar-bar-Warp .fixed {/ * return to the uppermost circle icon * /
position: relative;
the display: Block
}
.fixed-bar-bar-Warp .fixed .Item {/ * return the uppermost circle icon * /
the display: Block;
text-align = left: Center;
Cursor: pointer
}
.fixed-bar-warp .fixed-bar .item i {/ * return to the uppermost circle icon * /
the display: Block;
height: 40px;
Line-height: 40px;
font-size: 27px
}
.fixed-bar -warp .fixed-bar .item i: hover {/ * return uppermost circular icon that represents hover effect hover * /
font-size: 32px
}
.lnh_toc_warp {
position: Fixed;
the display: inline-Block;
left: 0;
Top: 0;
bottom: 0;
Z-index: 9999;
background-Color: #fff;
Box-Shadow: 0 0 2px #ccc;
Line-height: 1.6;
overflow-Y: Auto;
min-width: 240px ;
max-width: 320px;
overflow-X: Auto
}
.lnh_toc_warp .title {
margin-Top: 32px;
padding-left: 12px;
font-size:16px
}
.lnh_toc_warp .toc {
position:relative;
margin-top:12px;
display:block
}
.lnh_toc_warp .toc .item {
display:block;
font-size:12px;
padding-right:12px;
white-space:nowrap
}
.lnh_toc_warp .toc .item-h1 {
padding-left:12px;
line-height:2
}
.lnh_toc_warp .toc .item-h2 {
padding-left:24px;
line-height:1.8
}
.lnh_toc_warp .toc .item-h3 {
padding-left:36px
}
.lnh_toc_warp .toc .item.current {
background-color:#0681ba !important;
color:#fff !important
}
#lnh-profile {
margin:12px 0
}
#lnh-profile a {
line-height:1.5
}
#lnh-profile i {
font-size:14px;
margin-right:8px
}

Guess you like

Origin www.cnblogs.com/annonmouse99/p/11368638.html