我的博客园CSS样式分享
过完年又开始上班了,已经从2月25连续加班到现在,晚上11点多才回去,也没时间写文章了。
先分享一下我的博客园的CSS吧。
我的博客皮肤最开始的时候是参考共享一下我的自定义CSS博客皮肤(2012.3) 修改的。
使用的是LessIsMore皮肤 下面是自定义的CSS样式
@charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体", Arial; background: url(‘http://images.cnblogs.com/cnblogs_com/codediary/643913/o_43.jpg‘) no-repeat top center fixed; min-width: 1200px; } #home { opacity: 0.95; filter: alpha(opacity=95); box-shadow: 0 0 10px #000; margin: auto; width: 1200px; background: #fff; overflow: auto; border: solid 1px #fff; }/*段落*/ .postBody p, .postCon p { margin: 7px 0; line-height: 24px; } h1 { margin: 0; } h3 { font-size: 15px; font-weight: bold; }/*超链接*/ a { color: #3498DB; text-decoration: none; } a:hover { text-decoration: underline; } a:visited, a:hover { color: #3498DB; } ul { list-style: none; margin: 0; padding: 0; } image { border: none; } #header { padding: 20px; }/*博客标题*/ #blogTitle, #blogTitle a { font-weight: bold; color: #666; } #blogTitle .title { margin-top: 7px; height: 100px; line-height: 100px; font-size: 36px; padding-left: 120px; background: #fff url(‘http://images.cnblogs.com/cnblogs_com/codediary/643913/o_windowslogo.png‘) no-repeat; background-size:100px; } .headermaintitle { } #blogTitle, #blogTitle a:hover { text-decoration: none; }/*子标题*/ .subtitle { padding-left: 30px; font-size: 14px; color: #999; font-weight: normal; margin: 10px 0; }/*导航栏*/ #navigator { font-size: 16px; height: 48px; background: #f65f57; text-align: center; margin-top: 20px; margin-bottom: 20px; border-radius:20px; box-shadow:0px 10px 5px #999999; -webkit-transition: all 3s ease-in-out; } #navList li { margin: 0; line-height: 48px; display: inline-block; float: left; -webkit-transition: all 3s ease-in-out; } #navList li:hover { display: inline-block; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); } #navList li a { padding: 0 30px; text-decoration: none; line-height: 48px; border: 0; color: #fff; display: -moz-inline-box; display: inline-block; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .blogStats { height: 48px; color: #fff; line-height: 48px; } #main { padding: 20px; }/*左边*/ #sideBarMain { padding: 0 10px 0 0; background: #fff; margin: 0 0 20px 0; width: 190px; font-size: 12px; line-height: 22px; } #sideBarMain a { color: #666; } #leftcontentcontainer { color: #666; } .newsItem { color: #666; }/*公告*/ #profile_block { margin-top: 0px; line-height: 24px; text-align: left; }/*主面板*/ #mainContent { margin-top: 0px; padding-top: 0px; padding-right: 0px; background: #fff; padding-bottom: 0px; float: right; width: 960px; padding-left: 0px; }/*每日文章列表*/ .day { background: #fff; padding: 0; margin: 0 0 20px 0; }/*博客标题*/ .postTitle a { color:#E74C3C; } .postTitle { padding-bottom: 10px; font-size: 20px; font-weight: bold; color: #464646; background: url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif‘) no-repeat 0 3px; padding-left: 30px; } .dayTitle { display: none; }/*摘要*/ .c_b_p_desc { padding: 10px; line-height: 24px; color: #888; } .c_b_p_desc a { color: #888; } .c_b_p_desc a:hover { text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; }/*右侧图片*/ .desc_img { margin-left: 10px; border: solid 1px #fff; box-shadow: 0 0 10px #aaa; }/*博文页*/ #topics .post { background: #fff; } .postCon { padding: 10px 20px 0 20px; } .postDesc { margin: 0 30px; margin-bottom: 2px; padding: 8px 0px; font-size: 12px; color: #aaa; background: #fff; text-align: right; } .postDesc a { color: #AAA; } .postBody { padding: 0; }/*google搜索框*/ #google_q, #q { height: 22px; width: 120px; border: solid 1px #ccc; box-shadow: inset 0 0 3px #ddd; border-radius: 4px; }/*搜索按钮*/ .btn_my_zzk { font-family: ‘Microsoft Yahei‘; border: none; height: 26px; width: 60px; padding: 1px; font-size: 14px; cursor: pointer; position: relative; vertical-align: middle; display: inline-block; background: #159B76; border-radius: 4px; color: #fff; } .btn_my_zzk:hover { background: #159B76; }/*评论按钮*/ #btn_comment_submit { border: none; height: 48px; width: 120px; }/*评论按钮*/ .comment_btn { font-family: ‘Microsoft Yahei‘; border: none; height: 48px; width: 120px; font-size: 18px; cursor: pointer; position: relative; vertical-align: middle; display: inline-block; background: #159B76; color: #fff; } #btn_comment_submit:hover { background: #159B76; }/*评论标题*/ .feedback_area_title { padding: 10px; font-size: 24px; font-weight: bold; color: #159B76; border-bottom: solid 6px #159B76; } .feedbackListSubtitle { font-size: 12px; color: #888; } .feedbackListSubtitle a { color: #888; } .comment_quote { background: #FCFAAC; padding: 15px; border: 1px solid #CCC; } #commentform_title { color: #159B76; background-image: none; background-repeat: no-repeat; margin-bottom: 10px; padding: 10px 20px 10px 10px; font-size: 24px; font-weight: bold; border-bottom: solid 6px #159B76; }/*评论框*/ #comment_form { margin: 10px 0; padding: 0; } .commentform { margin: 10px 0; padding: 10px 20px; background: #fff; }/*评论输入域*/ #tbCommentBody { font-family: ‘MIcrosoft Yahei‘; margin-top: 10px; width: 940px; max-width: 940px; min-width: 940px; background: white; color: #333; border: 2px solid #fff; box-shadow: inset 0 0 8px #aaa; padding: 10px; height: 120px; font-size: 14px; min-height: 120px; }/*评论条目*/ .feedbackItem { font-size: 14px; line-height: 24px; margin: 10px 0; padding: 20px; background: #F2F2F2; box-shadow: 0 0 5px #aaa; } .feedbackListSubtitle { font-weight: normal; }/*分类页*/ .entrylist { padding: 10px 20px; background: #fff; } .entrylistItem { margin: 10px 0; padding: 10px; } .entrylistPosttitle { font-size: 18px; font-weight: bold; background: url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif‘) no-repeat 0 3px; padding-left: 30px; } .entrylistPostSummary { padding: 10px; } .entrylistItemPostDesc { font-size: 12px; color: #999; padding-left: 40px; }/*尾部*/ #footer { font-size: 12px; margin: 20px; padding: 12px; text-align: center; background: #159B76; color: #DDD; font-size: 14px; }/*文章内图片*/ #cnblogs_post_body p img { margin: 10px; }/*顶一下*/ .diggnum { font-size: 18px; color: #159B76; font-family: ‘Microsoft Yahei‘; } #div_digg { position: fixed; border-radius: 5px; background-color: #fff; width: 50px; padding: 20px; right: 0; bottom: 0; border: solid 1px #ddd; z-index: 200; box-shadow: 0 0 16px 2px #ddd; } /*踩一下(园友反映,这个有点“邪恶”,呵呵,其实是我没来得及设计这个背景图片,就暂时把它隐藏了……可以去掉这句话)*/ .buryit { display: none; } .diggword { display: none; }/*green_channel*/ #green_channel { text:align:center; background:#4ECDC4; padding-left: 20px; font-weight: normal; font-size: 15px; width: 420px; border: none; color: #fff; padding: 20px; margin:20px auto; position: fixed; border-radius: 5px; right: 150px; bottom: 0; border: solid 1px #ddd; z-index: 200; box-shadow: 0 0 16px 2px #ddd; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }/*最新评论*/ #myposts .PostList { font-size: 14px; line-height: 24px; margin: 10px 0; padding: 20px; background: #F2F2F2; box-shadow: 0 0 5px #aaa; }/* CSS Document */
页首HTML
主要是返回顶部的小火箭
<link rel="stylesheet" href="http://7vzmoi.com1.z0.glb.clouddn.com/csslrtk.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function() { if($(window).scrollTop() >= 600){ //向下滚动像素大于这个值时,即出现小火箭~ $(‘.actGotop‘).fadeIn(200); //火箭淡入的时间,越小出现的越快~ }else{ $(‘.actGotop‘).fadeOut(300); //火箭淡出的时间,越小消失的越快~ } }); $(‘.actGotop‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);}); //火箭动画停留时间,越小消失的越快~ }); </script> <div class="actGotop"><a href="javascript:;" title="Top"></a></div>
页脚HTML
主要是各级标题
<style type="text/css"> .Abstract { padding: 15px; border: dotted 2px #999; color: #999; font-family: ‘Microsoft Yahei‘; border-radius: 4px; } .First { margin: 10px 0; font-family: ‘Microsoft Yahei‘; text-align: left; padding: 6px 20px; color: #fff; background: #55895B; font-size: 20px; border-radius: 4px; clear: both; } .Second { margin: 10px 0; font-family: ‘Microsoft Yahei‘; padding: 6px 20px; background: #93C8A2; color: white; font-size: 18px; border-radius: 4px; clear: both; } .Third { margin: 10px 0; padding: 6px 20px; font-family: ‘Microsoft Yahei‘; margin: 15px 0; font-size: 16px; color: black; background: #C6EFD2; border-radius: 4px; clear: both; } .note { margin: 10px 0; padding: 15px 20px 15px 60px; background: #FCFAA9 url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png‘) no-repeat 20px 0; font-size: 15px; font-family: ‘Microsoft Yahei‘; box-shadow: 0 0 8px #aaa; clear: both; } .demo { text-align: left; padding: 6px 20px; overflow: auto; border-radius: 4px; background: orange; color: #fff; font-size: 16px; clear: both; } .cnblogs_Highlighter { border: solid 1px #ccc; clear: both; } .cnblogs_code { background: #EFFFF4; border: solid 0px #939393; font-size: 14px; clear: both; padding: 10px 20px; } .cnblogs_code pre { font-size: 14px; } .cnblogs_code span { font-family: Courier New; font-size: 14px; } </style>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。