欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

自定义自己的博客首页_html/css_WEB-ITnose

程序员文章站 2022-04-14 17:16:15
...
直接上代码

博客侧边栏公告:

联系我是通过腾讯QQ的方式联系我,会根据QQ的在线状态显示不同颜色的图标。


自定义自己的博客首页_html/css_WEB-ITnose

企鹅:
自定义自己的博客首页_html/css_WEB-ITnose alt="Candyメ奶糖" title="Candyメ奶糖">

页脚Html代码:

请关注我的微博:
Candy奶糖
想哥




在博客右侧,浮出一个微博浮动框

页面定制CSS代码

/*---------------------------------共通 Start---------------------------------*/body {	margin: 0;	padding: 0;	font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Arial, Helvetica,		sans-serif;	font-size: 14px;	vertical-align: top;	color: #000;}#main {	margin: 0 auto;	padding: 20px 0;	width: 1024px;}#mainContent {	float: right;	width: 790px;}a,a:hover,a:active,a:visited {	text-decoration: none;	color: #267CB2;}a:hover {	text-decoration: none;	color: #F60;}ul,li {	list-style: none;}ul {	margin: 0;	padding: 0;}/* 返回顶部 */#toTop {	width: 28px;	height: 65px;	position: fixed;	right: 20px;	bottom: 65px;	background:		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_backtop.png)		no-repeat 0px 0px;	opacity: 0.6;}#toTop:hover {	opacity: 1;	filter: alpha(opacity = 100);	background:		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_backtop.png)		no-repeat -28px 0px;}/* 页脚微博 */#share {	width: 35px;	position: fixed;	right: 20px;	bottom: 150px;}#share a {	color: #333;}#share a#sina {	line-height: 3;	background: transparent		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_WB_logo.png)		no-repeat 0px 0px;}#share a#tent {	line-height: 3;	background: transparent		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_tx_wb_logo.png)		no-repeat 0px 0px;}/*#share {	position:fixed;	bottom: 0px;	right: 0px;	width: 450px;	margin: 0 auto;	border: 1px solid #CC0;	background: #F4FAED;	padding: 5px 10px 3px}#share a {	background: transparent		url(http://image.dili360.com/www/img/sharelogo.png) no-repeat scroll 0		0;	line-height: 1.8;	color: #333;	margin: 0 0 0 10px;	padding: 3px 0 3px 18px;}#share a#sina {	background-position: 0 -79px}#share a#tent {	background-position: 0 -129px}*//* 隐藏页脚 */#footer {	background-color: #F1F4F4;	padding-top: 25px;	color: #333;	text-align: center;}#cnzz_stat_icon_1253650355 {	width: 100%;	display: inline-block;	background-color: #F1F4F4;	padding-bootom: 25px;	text-align: center;}/*---------------------------------共通 End---------------------------------*//*---------------------------------导航栏 Start---------------------------------*/#navList {	background:		url(http://images.cnblogs.com/cnblogs_com/libaoheng/435190/o_bg-tabs.png)		no-repeat center bottom;	border: none !important;	height: 52px;	text-align: center;	margin: 0 0 12px;	padding: 15px 0 1px;	font-size: 16px;}#navList li {	margin: 0;	display: inline-block;	vertical-align: bottom;}#navList a {	font-family: 'Microsoft YaHei';	color: #333;	text-decoration: none;	background: #D8E1EC		url(http://i1.asp.net/images/ui/sprite-ui.png?cdn_id=t32) repeat-x 0		-363px;	border: 1px solid #D8E1EC;	border-bottom: 0;	display: block;	padding: 16px 36px 0;	margin: 0;	position: relative;	top: 0;	text-align: center;	-moz-border-radius: 3px 3px 0 0;	-webkit-border-radius: 3px 3px 0 0;	border-radius: 3px 3px 0 0;	min-height: 36px;}#navList a:hover,#MyLinks1_MyHomeLink {	background: white !important;	color: #000 !important;	border: 1px solid #CFD0D3 !important;	border-bottom: 0 !important;	-moz-box-shadow: 0 6px 0 #fff, 0 0 4px #bbb !important;	-webkit-box-shadow: 0 6px 0 white, 0 0 4px #BBB !important;	box-shadow: 0 6px 0 white, 0 0 4px #BBB !important;}/*---------------------------------导航栏 End---------------------------------*//*---------------------------------标题 Start---------------------------------*//* 博客标题 */#blogTitle {	margin: 0 auto;	padding-left: 100px;	background-color: #D2D8DE;	height: 106px;}#blogTitle .title {	width: 1024px;	margin: 0 auto;	padding: 26px 0 0;}#blogTitle h2 {	font-size: 14px;	font-weight: normal;}/* 标题 */h1 {	margin: 0;	padding: 0;}h1.postTitle {	padding: 0;	background: #fff;	font-size: 24px;}h1.postTitle a {	color: #000;	text-decoration: none !important;}h3 {	margin: 10px 0;	padding: 0;	font-size: 14px;}h3.catListTitle {	color: #fff;}/*---------------------------------标题 End---------------------------------*//*---------------------------------侧边栏 Start---------------------------------*/#sideBar {	min-height: 200px;	padding: 0px 0 0px 5px;	float: left;	-o-text-overflow: ellipsis;	text-overflow: ellipsis;	overflow: hidden;	word-break: break-all;}/* 不显示公告 */.newsItem .catListTitle {	display: none;}/* 时钟 */.divBlock,#honehoneclock {	display: block;}.blog-news {	margin-top: 5px;	line-height: 1.5;	text-align: left;}.catList,.catListTag,.mySearch,.catListLink,.catListPostCategory,.catListPostArchive,.catListBlogRank	{	border-radius: 7px;	border-bottom: 1px dotted #ccc;}.catListTitle {	background-color: #267CB2;	font-size: 16px;	border-bottom: 1px solid #006600;	border-top-left-radius: 7px;	border-top-right-radius: 7px;	font-size: 1.2em;	height: 1.8em;	line-height: 1.8em;	padding: 5px;	text-indent: 0.5em;	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);}/* 加大随笔档案、随笔分类等列表间距 */.catList ul li,.catListTag ul li,.catListLink ul li,.catListPostArchive ul li,.catListPostCategory ul li,.catListBlogRank ul li	{	padding: 5px 0px 5px 10px}/*---------------------------------侧边栏 End---------------------------------*//*---------------------------------博文列表 Start---------------------------------*//* 日期块、从随笔分类和随笔档案点开的一览页面 */.day,.entrylistItem {	min-height: 10px;	_height: 10px;	background: #fff;	border-radius: 7px;	box-shadow: 1px 1px 2px #aaa;	margin: 0 5px 20px 0;	padding: 5px 20px 5px 20px;}/* 日期标题 */.dayTitle {	color: #666;	line-height: 2.2em;	font-size: 22px;	clear: both;	border-bottom: 1px solid #ccc;	text-align: center;}/* 博文标题 */.postTitle,.entrylistPosttitle {	font-size: 16px;	font-weight: bold;	padding: 3px 0 4px 24px;	border-bottom: 1px dashed #ccc;	line-height: 2.5em;	clear: both;	background:		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_titile-icons.png)		no-repeat 0px 50%;}.postTitle a:link,.postTitle a:visited,.postTitle a:active,.entrylistPosttitle a:link,.entrylistPosttitle a:visited,.entrylistPosttitle a:active	{	transition: all 0.4s linear 0s;}/* 博文标题 */.postTitle a:hover,.entrylistPosttitle a:hover {	color: #F60;	text-decoration: none;	margin-left: 10px;}/* 博文内容 */.postCon,.entrylistPostSummary {	margin: 10px 0px;}.postDesc a {	display: none;}/* 博文post脚 */.postDesc,.entrylistItemPostDesc {	text-align: right;	color: #999;}/* 不显示随笔档案-XX、随笔分类-XX和描述 */.entrylistTitle,.entrylistDescription {	display: none;}/*---------------------------------博文列表 End---------------------------------*//*---------------------------------博文内容页面 Start---------------------------------*//* 博客签名 */#MySignature {	/*background:url("http://images.cnblogs.com/cnblogs_com/Candies/632934/o_o_light2.png") no-repeat 10px 50%;*/	background:		url("http://images.cnblogs.com/cnblogs_com/Candies/632934/o_may.png")		no-repeat 20px 40%;	margin-top: 20px;	padding: 10px 10px 10px 120px;	box-shadow: 0px 0px 15px #aaa;	border-radius: 25px;	border: 1px dotted #FFD596;}#MySignature a {	color: #FB9400;}/* 屏蔽广告 */#site_nav_under,#ad_under_post_holder,#google_ad_c2 {	display: none;}/*博客目录*/#sideBarView {	font-size: 12px;	font-family: Arial, Helvetica, sans-serif;	text-align: left;	position: fixed;	/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/	top: 299px;	right: 30px;	width: auto;	height: auto;}#sideBarTab {	float: left;	width: 30px;	border: 1px solid #e5e5e5;	border-right: none;	text-align: center;	background: #ffffff;	background-color: #F1F4F4;	border-radius: 5px;}#sideBarContents { /*float:left;    overflow:auto;     overflow-x:hidden;!important;*/	width: 200px;	min-height: 108px;	max-height: 460px;	border: 1px solid #e5e5e5;	background: #ffffff;	border-radius: 5px;}#sideBarContents dl {	margin-top: 15px;	margin-bottom: 15px;	padding: 0;}#sideBarContents dt {	margin-top: 15px;	margin-left: 5px;}#sideBarContents dd,dt {	cursor: pointer;}#sideBarContents dd:hover,dt:hover {	color: #A7995A;}/*---------------------------------博文内容页面 End---------------------------------*//*---------------------------------评论 Start---------------------------------*//*评论*/#tbCommentBody {	width: 500px;}#btn_comment_submit {	width: 80px;	height: 28px;}.feedbackListSubtitle div {	margin: 5px 10px 5px 10px;}.blog_comment_body fieldset.comment_quote {	border-color: #1a8bc8;}/*美化一下评论,增加气泡效果*/.feedbackListSubtitle {	border: 0px none;	border-bottom-style: none;}.list {	width: 90%;}.list .out,.list .inc {	margin: 6px 0;	width: 90%;}.list .out .icon,.list .inc .icon {	width: 48px;	height: 48px;}.list .icontd {	width: 48px;}.list .out .icontd {	display: none;}.list .out .topleft,.list .out .topright,.list .out .bottomleft,.list .out .bottomright,.list .inc .topleft,.list .inc .topright,.list .inc .bottomleft,.list .inc .bottomright	{	background:		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_t_o_bubbles.png)		no-repeat;}.list .out .top,.list .out .bottom,.list .inc .top,.list .inc .bottom {	background: transparent		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_t_o_horizontal.png)		repeat-x;}.list .out .left,.list .out .right,.list .inc .left,.list .inc .right {	background: transparent		url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_t_o_vertical.png)		repeat-y;}.list .out .topleft {	background-position: left top;	height: 9px;	width: 18px;}.list .out .topright {	background-position: -18px top;	height: 9px;	width: 11px;}.list .out .bottomleft {	background-position: left -9px;	width: 18px;	height: 12px;}.list .out .bottomright {	background-position: right -9px;	width: 11px;	height: 12px;}.list .out .top {	background-position: top;	font-size: 1px;	height: 9px;}.list .out .bottom {	background-position: 0 -9px;	height: 12px;}.list .out .left {	background-position: left;	width: 18px;}.list .out .right {	background-position: -18px 0;	width: 11px;}.list .inc .topleft {	background-position: 0 -21px;	height: 9px;	width: 18px;}.list .inc .topright {	background-position: -18px -21px;	height: 9px;	width: 11px;}.list .inc .bottomleft {	background-position: 0 bottom;	width: 18px;	height: 12px;}.list .inc .bottomright {	background-position: right bottom;	width: 11px;	height: 12px;}.list .inc .top {	background-position: 0 -21px;	font-size: 1px;	height: 9px;}.list .inc .bottom {	background-position: bottom;	height: 12px;}.list .inc .left {	background-position: -29px 0;	width: 18px;}.list .inc .right {	background-position: right;	width: 11px;}.list .inc .conmts {	font-size: 12px;	color: #000;}.list .out .conmts {	background: #dcdcdc; /*text-shadow:0 1px 0 #eee;*/}.list .inc .conmts {	background: #c0e668; /*text-shadow:0 1px 0 #dfa;*/}/*.blog_comment_body {	border-radius: 15px;	box-shadow: 0px 0px 15px #aaa;	border: 2px solid #FFD596;	display: inline-block;	margin: 10px 0px;	padding: 15px;	position: relative;}.blog_comment_body_em {	display: block;	border-width: 15px;	position: absolute;	top: -32px;	left: 20px;	border-style: dashed dashed solid;	border-color: transparent transparent #FFD596;	font-size: 0;	line-height: 0;}.blog_comment_body_tag {	display: block;	border-width: 15px;	position: absolute;	top: -28px;	left: 20px;	border-style: dashed dashed solid;	border-color: transparent transparent #FFF;	font-size: 0;	line-height: 0;}*//*---------------------------------评论End---------------------------------*/

定制JS

    var BlogCommentBody = {        createBlogCommentStyle : function(id) {            //获取博文正文div容器            var elem = document.getElementById(id);            if (!elem)                return false;            //获取div中所有元素结点            var nodes = elem.getElementsByTagName("*");            //遍历所有元素结点            for ( var i = 0; i  finalpos) {                 dist = Math.ceil((currentpos - finalpos)/10);                 currentpos -= dist;             }                        var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置            window.scrollTo(0, currentpos);//移动窗口            if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出            {                window.onmousewheel = function(){                    return true;                }                return true;            }                        //进行下一步移动            var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";             document.body.movement = setTimeout(repeat, interval);         },                htmlDecode:function (text){            var temp = document.createElement("div");            temp.innerHTML = text;            var output = temp.innerText || temp.textContent;            temp = null;            return output;        },        /*        创建博客目录,        id表示包含博文正文的 div 容器的 id,        mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!),        interval 表示移动的速度        */        createBlogDirectory:function (id, mt, st, interval){             //获取博文正文div容器            var elem = document.getElementById(id);            if(!elem) return false;            //获取div中所有元素结点            var nodes = elem.getElementsByTagName("*");            //创建博客目录的div容器            var divSideBar = document.createElement('DIV');            divSideBar.className = 'sideBarView';            divSideBar.setAttribute('id', 'sideBarView');            var divSideBarTab = document.createElement('DIV');            divSideBarTab.setAttribute('id', 'sideBarTab');            divSideBar.appendChild(divSideBarTab);            var h2 = document.createElement('H2');            divSideBarTab.appendChild(h2);            var txt = document.createTextNode('目录导航');            h2.appendChild(txt);            var divSideBarContents = document.createElement('DIV');            divSideBarContents.style.display = 'none';            divSideBarContents.setAttribute('id', 'sideBarContents');            divSideBar.appendChild(divSideBarContents);            //创建自定义列表            var dlist = document.createElement("dl");            divSideBarContents.appendChild(dlist);            var num = 0;//统计找到的mt和st            mt = mt.toUpperCase();//转化成大写            st = st.toUpperCase();//转化成大写            //遍历所有元素结点            for(var i=0; i]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签                    nodetext = nodetext.replace(/ /ig, "");//替换掉所有的                     nodetext = BlogDirectory.htmlDecode(nodetext);                    //插入锚                            nodes[i].setAttribute("id", "blogTitle" + num);                    var item;                    switch(nodes[i].nodeName)                    {                        case mt:    //若为主标题                             item = document.createElement("dt");                            break;                        case st:    //若为子标题                            item = document.createElement("dd");                            break;                    }                                        //创建锚链接                    var itemtext = document.createTextNode(nodetext);                    item.appendChild(itemtext);                    item.setAttribute("name", num);                    item.onclick = function(){        //添加鼠标点击触发函数                        var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));                        if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;                    };                                                    //将自定义表项加入自定义列表中                    dlist.appendChild(item);                    num++;                }            }                        if(num == 0) return false;             /*鼠标进入时的事件处理*/            divSideBarTab.onmouseenter = function(){                divSideBarContents.style.display = 'block';            }            /*鼠标离开时的事件处理*/            divSideBar.onmouseleave = function() {                divSideBarContents.style.display = 'none';            }            document.body.appendChild(divSideBar);        }            };    function CommentBubble()    {        var w1 = '
' + ' ' + '' + '' + ' ' + ' ' + '
' + '自定义自己的博客首页_html/css_WEB-ITnose' + '' + ' ' + ' ' + ' ' + ' ' + '

'; var w2 = '

' + '
' + '
'; $.each($(".blog_comment_body"), function(i, t) { $(t).html(w1 + $(t).html() + w2); }); $(".louzhu").closest(".feedbackItem").find(".out").removeClass("out").addClass("inc"); /*.find(".q").attr("align","right");*/ } $(document).ready(function() { var commentTime = setInterval(function(){if($("#comments_pager_bottom").length>0){CommentBubble();clearTimeout(commentTime);}},50); /*页面加载完成之后生成博客目录*/ BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20); //BlogCommentBody.createBlogCommentStyle("blog-comments-placeholder"); });