博客园页面布局代码

其他 2019-08-17 15:21:26 阅读次数: 0

博客园css代码解释

(还不全面，希望多多批评指正)

h1,h2,h3,h4,ul {
margin:0;
padding:0
}
ul {/*常用链接下边的内容（在这更改格式）*/
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 {/*日历表格*/
border - collapse:collapse;
border:1px solid silver
}
table {
width:100 %
}
body {
position:relative;
margin:0;
padding:0;
height:100 %;
line - height:1.5;
background - color:#FFF
}
#home,#header,#main,#footer {
position:relative;
display:block;
margin:32px 0;
box - sizing:border - box
}
#home {
margin:48px 64px
}
#main {/*整个页面所有信息*/
font - size:0/*主要是指页面文字大小尺寸，这里设置为0的目的是清除inline或者inline-block产生的空格，非常有用*/
}
#mainContent {/*写主要内容的框子*/
position:relative;
display:inline - block;
box - sizing:border - box;
width:75 %;
vertical - align:top;
font - size:14px;
padding - right:32px
}
#sideBar {/*侧边栏加上#是为了引用id来进行编辑，不加#则是设置全局变量（可加#把日历印出来单独设计）*/
position:relative;
display:inline - block;
box - sizing:border - box;
width:25 %;/*没有写高度，可以选择把日历等一些不重要的东西删掉，使侧边栏缩小，让随笔内容占比面积大一点*/
vertical - align:top;
font - size:14px
}
#footer {/*最底部的信息*/
border - top:1px solid#0681ba;
padding - top:10px;
text - align:center
}
#header {/*我的博客名字签名以及下边菜单所在框子*/
border - bottom:1px solid#0681ba;
text - align:right
}
#blogTitle.title {/*我的博客标题*/
font - size:32px
}
#blogTitle.subtitle {/*博客副标题*/
color:#999;
font - size:12px;
margin:6px 0
}
#navigator {/*菜单栏*/
position:relative;
text - align:right
}
#navigator#navList {/*含有文字的那一栏*/
position:relative;
display:inline - block
}
#navigator#navList li {/*单个的文字“博客园”*/
display:inline - block
}
#navigator.menu {/*博客园的类*/
display:block;
width:5em;
font - size:16px;
padding:6px 0;
text - align:center
}
#navigator.menu:hover {/*hover代表鼠标悬停在文字上的效果*/
color:#fff;
background - color:#0681ba
}
#navigator.blogStats {/*傍边的小字（评论，文章，随笔数目）*/
position:absolute;
display:inline - block;
left:0;
bottom:6px;
color:#999;
font - size:12px;
font - style:italic
}
.forFlow {/*主要信息的框子*/
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 {/*postDesc指的是每一篇随笔下面的小字*/
color:#999;
font - size:12px;
margin - top:12px;
text - align:right
}
.entrylistDescription {
color:#999;
font - style:italic;
text - indent:2em;
margin:10px 0
}
.PostList,.day,.entrylistItem {/*.day指同一天的随笔所在的框子*/
margin:20px 0
}
.dayTitle {/*包含完成这篇随笔的时间*/
display:none
}
.entrylistPostSummary,.postCon {/*postCon指随笔和摘要共同的一个框子*/
margin:10px 0;
font - size:14px
}
.topicListFooter {/*第一篇随笔下边空白的一小块框子*/
margin:20px;
text - align:center
}
.post - categoty - tags {
text - align:right;
margin - top:10px;
font - style:italic;
color:#999;
font - size:12px
}
.post - categoty - tags a {
font - size:14px;
font - style:normal
}
#sideBarMain {/*侧边栏，sidebar少一小节*/
position:relative
}
.sidebar - block {
margin:24px 0
}
.catListTitle {/*写有公告这个类型标题的框子，格式由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 15px 50%;
padding-left:80px
}
#MySignature div {
line-height:25px
}
.fixed-bar-warp {/*返回最上部的那个圆形图标*/
position:fixed;
display:block;
z-index:9999;
width:40px;
bottom:24px;
right:12px;
color:#fff
}
.fixed-bar-warp .fixed-bar {/*返回最上部的那个圆形图标*/
position:relative;
display:block
}
.fixed-bar-warp .fixed-bar .item {/*返回最上部的那个圆形图标*/
display:block;
text-align:center;
cursor:pointer
}
.fixed-bar-warp .fixed-bar .item i {/*返回最上部的那个圆形图标*/
display:block;
height:40px;
line-height:40px;
font-size:27px
}
.fixed-bar-warp .fixed-bar .item i:hover {/*返回最上部的那个圆形图标 hover表示悬停效果*/
font-size:32px
}
.lnh_toc_warp {
position:fixed;
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
}

猜你喜欢

转载自www.cnblogs.com/annonmouse99/p/11368638.html
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022