* {margin: 0;padding: 0;} ul { list-style-type: none; } ul::after{ content:‘‘; display:block; clear: both; } a, a:link,a:visited,a:hover,a:active { color: black; text-decoration: none; } #blogTitle, #blog-calendar, #blogCalendar, .entrylistDescription, #widget_my_google, .dayTitle, #footer, #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb, #navigator .blogStats, #author_profile, #post_next_prev { display: none; } .clear { clear:both; } #navList { margin: 0; padding: 0; overflow: hidden; background-color: #333; font-size:18px; } #navList li { float: left; } #navList li a { display: block; color: white; text-align: center; padding: 0.5em 0.5em; text-decoration: none; } #navList li a:hover { background-color: #fff; color:black; } /*总体布局*/ #mainContent { width: calc( 100% - 260px ); float:left; } #sideBar { width:260px; float: right; } /*文章*/ .forFlow { font-size:14px; margin:1em 1em 0 0.3em; line-height: 1.5em; } .postTitle { font-size:16px; background: #ccc; border-radius: 5px 5px 0 0; padding:0.4em 1em; } .postDesc { font-size:12px; text-align: right; color:gray; } /*文章列表*/ .postCon { border-left:1px solid #ccc; border-right:1px solid #ccc; padding: 0.3em 0.3em 0 0.3em; } .c_b_p_desc a { color:blue; } .c_b_p_desc a:before { content: ‘~‘; } .c_b_p_desc a:after { content: ‘~‘; } .c_b_p_desc::before { content: ‘‘; margin-left:2em; } .day .postDesc{ border:1px solid #ccc; border-top:none; margin-bottom: 1em; padding-bottom: 0.3em; padding-right: 0.5em; } /*文章内容*/ /*#post_detail { line-height: 1.5em; }*/ #green_channel { float: left;} #div_digg { float: left; margin: 10px 0 0 20px; width: auto; } #div_digg div { margin-top: 0; } #cnblogs_post_body { border:1px solid #ccc; border-top:none; padding: 0.3em 0.3em 0 0.3em; } /*评论*/ #blog-comments-placeholder .feedback_area_title { font-size:16px; background: #ccc; border-radius: 5px 5px 0 0; padding:0.4em 1em; } #blog-comments-placeholder .feedbackItem { border:1px solid #ccc; border-top:none; padding: 0.3em 0.3em 0 0.3em; } #comment_nav { margin: 1em 0; } #comment_nav a { background-color: #555; border: none; border-radius: 5px; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; height:auto; margin-left: 0.5em; } #comment_form_container { border:1px solid #ccc; border-radius: 5px 5px 0 0; } #commentform_title { font-size:16px; background: #ccc; padding:0.4em 1em; } #comment_form_container p, #comment_form_container .commentbox_main { padding: 0 0.3em; width:auto; } .commentbox_title { width:auto; } #tbCommentBody { width:100%; } #btn_comment_submit, #commentbox_opt a{ background-color: #4CAF50; border: none; border-radius: 5px; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; width: auto; height:auto; } #commentbox_opt a { background-color: #f44336; line-height: 22px; } /*侧边栏*/ #sideBarMain { font-size:14px; margin:1em 0.3em 0 0; } #sideBarMain .newsItem, #sidebar_search.sidebar-block, #sidebar_postcategory, #sidebar_postarchive, #sidebar_shortcut, #sidebar_topviewedposts, #sidebar_toptags, #sidebar_recentcomments, #sidebar_topcommentedposts, #sidebar_topdiggedposts, #sidebar_各类框架库标准的文档或api等, #sidebar_nDosLink { margin-top:1em; border-radius: 5px 5px 0 0; border:1px solid #ccc; } .catListTitle { font-size:16px; padding:0.4em 1em; background: #ccc; } .catListTitle+div, .catListTitle+ul { padding: 0.5em; } #sideBarMain li { float: left; padding: 0 0.5em; line-height: 1.8em; } /*搜索框*/ #q { margin:0; height: 27px; border: 1px solid #008CBA; width: 150px; } #btnZzk { background-color: #008CBA; border: none; border-radius: 5px; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; height:auto; } #myposts { border-radius: 5px 5px 0 0; border:1px solid #ccc; margin-left: 0; } .myposts_title { font-size:16px; padding:0.4em 1em; background: #ccc; } .pager, .postText2 { margin: 0; padding: 0; clear: both; } #myposts .PostList { margin: 0 1em; height: auto; vertical-align: center; } .PostList:hover{ background: #eee; } #myposts a { font-size: 14px; } #myposts span { float: right; } @media screen and (max-width:760px) { #mainContent { width: 100%; } #sideBar { width: 100%; } .forFlow { margin-right:0.3em; } #sideBarMain { margin-left:0.3em; } #green_channel { margin:10px auto; float: none; } #author_profile { display: block; width: auto; margin: 0 0 0 2em; } #div_digg { margin: 0 2em 0 0; float:right;} .postDesc { text-align: center; } #comment_form { margin-left: 0; } #myposts span { float: none; display: block; } }
关键词:
博客园自定义页面风格设计
转:http://www.cnblogs.com/ECJTUACM-873284962/p/7628894.html#_nav_0Angel_Kitty的原创博文①拥有自己的CSS代码②修改鼠标图案③公告栏的设置关于背景音乐④关于CSS动画特效⑤用Canvas和requestAnimFrame做动画特效 查看详情
博客园自定义主题样式(代码片段)
...个人blog页面效果时遇到的技巧及方法等。基本流程设定博客皮肤为BluSky定制首页代码:引入外部CSS页顶博主名字及副标题在首页html内输入以下代码可添加博主名到页面顶端,也可添加副标题:<headerclass="main-header"id=&quo... 查看详情
博客园自定义样式(代码片段)
我现在的博客园首页暂时应该是一个女生背景,一些星星的悬浮飘扬那么我们怎么来设置博客园的自定义的样式,而不是不个性的默认界面呢?第一步:进入你的首页,打开管理=>设置第二步:我在博客皮肤中选择了SimpleMemory... 查看详情
博客园自定义公告显示代码
1.博客公告栏中显示时间如图所示。2.在我的博客页面点击管理按钮。3.在管理界面中点击设置按钮。4.在设置界面中找到下图红色区域,把相应的代码加入其中即可。5.各种时间显示代码小人时间a.背景透明版本<scriptcharset="Shift... 查看详情
博客园自定义鼠标点击特效(代码片段)
需要申请JS权限,JS权限申请通过之后,将如下代码放入侧边栏,页首,页末,都可以复制如下代码<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?Linux?","?Shell?","? 查看详情
博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)(代码片段)
前言在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动画特效,在本文中我们将教大家制作当... 查看详情
博客园自定义地址栏logo
自定义博客园地址栏logo一、首先自己需要下载一个logo图片,png、jpg格式的都可以。挑选自己喜欢的图片就可以。二、然后制作成icon图标 在线制作icon图标网站:http://www.bitbug.net/ 三、上传至博客园文件中四、将以下代码... 查看详情
博客园自定义样式编辑(代码片段)
...gt;</a></span> 侧边栏公共html代码<p>本博客仅用作学习交流使用, 查看详情
博客园自定义样式修改标签页的icon图标(代码片段)
有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢?按照以下四步你也可以实现自定义标签图标。FromTo第一步:挑挑拣拣选一张icon图标(尺寸不要太大... 查看详情
cnblog博客园自定义样式修改标签页的icon图标
有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢?按照以下四步你也可以实现自定义标签图标。From To 第一步:挑挑拣拣 选一张icon图... 查看详情
如何设置博客园好看的标题样式(代码片段)
1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷... 查看详情
如何设置博客园好看的标题样式(代码片段)
1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一... 查看详情
记录帖如何自定义博客园界面
关于如何自定义博客园界面的文章记录博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了)博客园cnblogs:自定义页面风格博客园自定义样式 查看详情
如何设置博客园好看的标题样式
1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷... 查看详情
制作博客园目录导航(代码片段)
在博客园文章的上方制作一个导航窗口,方便浏览文章内容。点击按钮可以跳转到指定标题,还具备返回顶部功能。 1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限... 查看详情
自定义博客样式
1.将css文件上传到博客园http://files.cnblogs.com/files/chucklu/SimpleMemory.css 2.设置里面调整2.1博客皮肤设置为Custom2.2页面定制css代码@importurl("http://files.cnblogs.com/files/chucklu/SimpleMemory.css");<styletype 查看详情
自定义博客园样式(代码片段)
页面定制CSS代码需要禁用博客园自带的页面定制CSS代码 @font-facefont-family:‘RainFate‘;font-style:normal;font-weight:normal;src:url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix")format(‘embedded-opentype‘),url("http://blog.zhaishidan.cn/css/font/... 查看详情
自定义博客样式(代码片段)
自定义博客样式一、添加自定义CSS1.收藏按钮悬浮#div_diggposition:fixed;bottom:10px;right:15px;border:2pxsolid#ECD7B1;padding:10px;width:140px;background-color:#fff;border-radius:5px5px5px5px!important;box-shadow:0001px#5F 查看详情