2015/08/11博客园页面(自身)

--------------------

页面定制CSS代码

/*------CSS Code-----------------------------------*/
.subtitle{
font-size:200%;
margin-left:750px;
margin-top:-30px;
margin-bottom:-12px;
font-weight:bold;
font-family:楷体,"Times New Roman",Georgia,Serif;
}
#navigator { background: #222; }
#navList { font-size: 22px; font-weight:bold;}
.blogStats { font-size: 12px; }
#sideBar { width: 20%; border: none; padding: 0; }
#sideBar h3 { padding-left: 8px; background-color: #444; }
#sideBarMain { padding-left: 8px; }
body { background-color: #002222; color: #ccc; font-size: 14px; }
h1, h2, h3, h4, h5, h6, th, .feedbackCon, .blogStats { color: #ccc; }
#main { border: 1px solid #e5e5e5; }
.day { margin: 20px 0px; }
.postTitle { padding-left: 20px; font-size: 16px;
border-bottom-color: #444; }
.postBody, .postCon { padding: 0px 20px 10px;
border-bottom: 1px solid #444; }
.postDesc { padding-right: 20px; }
a, .postCon a, .postBody a, .feedbackCon a { color: #0dd; }
a:hover, a:active, a:focus { color: #ff8; text-decoration: none; }
#navigator, #MySignature, .day, .post { border: 1px solid #e5e5e5;
border-radius: 8px; box-shadow: 2px 2px 10px #aaa; }
#navigator { border-radius: 8px 8px 0px 0px; }
.post { border-right: none; border-top: none;
border-radius: 0px 0px 8px 8px; padding-top: 1px; }
.cnblogs_code, .cnblogs_code div {
color: #000; font-family: consolas, monospace, sans-serif; }

body
{
/*其它主要浏览器不需要这个样式,
但在IE6/7居中是必须的*/
text-align:center;
}
#home
{
/*margin: 0px auto;可以使内容在除IE6/7外的其它
主要浏览器内居中*/
margin: 0px auto;
/*因为body的text-align:center;样式具有继承性,
所以要重置文本向左对齐*/
text-align:left;
max-width:960px;
}

#navigator { height:auto; overflow:hidden; *zoom:1;}
/*名为.blogStats的div在选择的模板中已经进行了右浮动
不必再进行设置*/
#navList { float:left; }
#navList li { display: inline; float: none; }

#mainContent { width: 100%; margin-left: -250px; float: right; }
#sideBar { width: 220px; float: left; }
.forFlow { margin-left:266px; }

#sideBar { width: 20%; }
#mainContent { margin-left: auto; width:78%; }
.forFlow { margin:auto; }

<!--HTML Code-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@-ms-viewport {
width: device-width;
}
@media (max-width:990px) {
#home{ margin:0 15px; }
}
@media (max-width:640px) {
#sideBar, #mainContent{ width:100%;}
.post{ border-left:none; }
}

博客侧边栏公告(支持HTML代码)

<a id="asideAnchor" name="asideAnchor"></a>

页首Html代码

<script type="text/javascript">
$(document).ready(function ()
{
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1.0";
$(‘head‘).prepend(meta);
});
</script>

页脚Html代码

<a id="jumpToAside" href="#asideAnchor">跳至侧栏</a>

-----

时间: 2024-11-09 19:13:15

2015/08/11博客园页面(自身)的相关文章

博客园页面定制CSS代码

博客园页面定制CSS代码 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

前端练习 模拟博客园页面搭建

完成效果 blog.css /*这是一个博客园首页的样式表*/ /*通用样式*/ body{ margin: 0; background-color: #eeeeee; } a{ text-decoration: none; /*取消下划线*/ } ul{ list-style-type:none; padding-left: 0; } .clearfix:after{ /*防止父标签塌陷*/ content:''; display: block; clear:both; } .blog-lef

博客园页面定制

页面定制CSS代码 @font-face { font-family: 'FontAwesome'; 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/f

博客园页面美化

对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有.但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的.就开始决定把自己的博客弄的好看一点. 关于博客应该如何去美化,我就不讲了,自己去设置里面看的到,之后开启过JS权限之后就可以开始自己的美化了. 关于我为啥要写这篇博客,主要原因是,网上关于博客美化的博客太散了,没有那种比较全面的讲解,于是我就想弄一个,以便后面的人做个参考. 首先是选择博客的皮肤: 毕竟自己不能从零开始

「奇技淫巧」博客园页面美化(差不多是划水

何为页面美化?永远没有止境的乱搞也.    ——hzz 教材: 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) - 洪卫 - 博客园 原文地址:https://www.cnblogs.com/qwerta/p/9748410.html

博客园页面自定义美化分享。---------随时更新;

1.页面定制CSS代码: 1 /* 公共样式区域开始 */ 2 3 body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select { 4 margin: 0; 5 padding: 0; 6 } 7 8 body { 9 font: 12px "幼圆"; 10 word-wrap: break-word; 11 } 12 13 /* 去掉线 */ 14 a,u,s,del { 15 color: #

博客园页面添加返回顶部TOP按钮

1. 进入网页管理->设置 2. 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 #back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; } 3. 在"页脚Html代码&q

博客园页面样式尝试01

随着各种设备的兴起,WebApi作为服务也越来越流行.而在无任何保护措施的情况下接口完全暴露在外面,将导致被恶意请求.最近项目的项目中由于提供给APP的接口未对接口进行时间防范导致短信接口被怒对造成一定的损失,临时的措施导致PC和app的防止措施不一样导致后来前端调用相当痛苦,选型过oauth,https,当然都被上级未通过,那就只能自己写了,就很,,???,,.下面就此次的方式做一次记录.

博客园自动循环创建索引目录JS

对于比较长的文章,有一个好的目录索引是很有必要的,可以让读者比较清楚地了解文章内容和层次.然而,目前(2015.7)博客园不像csdn博客那样,会对发布的文章自动生成目录索引.不过,一些网友通过博客园后台提供的一些自定义功能,自己写脚本实现了这一功能.我用的脚本主要就是参考赵子清的,文章地址是:http://www.cnblogs.com/zzqcn/p/4657124.html. 原作者的脚本只支持1级目录,我改了两级:第1级是h2,第2级是h3.还添加了一些小玩意,比如讨论qq群号.效果如下