当前位置 : 主页 > 网页制作 > css >

博客园页面布局代码

来源:互联网 收集:自由互联 发布时间:2021-06-13
博客园css代码解释 (还不全面,希望多多批评指正) h1,h2,h3,h4,ul { margin:0; padding:0}ul {/*常用链接下边的内容(在这更改格式)*/ list - style:none}a { text - decoration:none}a:active,a:link,a:visited { col

博客园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}

网友评论