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

WBOY
Freigeben: 2016-06-24 11:53:12
Original
1112 Leute haben es durchsucht

直接上代码

博客侧边栏公告:

联系我是通过腾讯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---------------------------------*/
Nach dem Login kopieren

定制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 < nodes.length; i++) {                if (nodes[i].getAttribute("class") == "blog_comment_body") {                    var blog_comment_body_em = document.createElement('EM');                    blog_comment_body_em.setAttribute('class',                            'blog_comment_body_em');                    var blog_comment_body_tag = document.createElement('SPAN');                    blog_comment_body_tag.setAttribute('class',                            'blog_comment_body_tag');                    nodes[i].appendChild(blog_comment_body_em);                    nodes[i].appendChild(blog_comment_body_tag);                }            }        }    }    var BlogDirectory = {        /*            获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)        */        getElementPosition:function (ele) {                    var topPosition = 0;            var leftPosition = 0;            while (ele){                              topPosition += ele.offsetTop;                leftPosition += ele.offsetLeft;                        ele = ele.offsetParent;                 }              return {top:topPosition, left:leftPosition};         },        /*        获取滚动条当前位置        */        getScrollBarPosition:function () {            var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;            return  scrollBarPosition;        },                /*        移动滚动条,finalPos 为目的位置,internal 为移动速度        */        moveScrollBar:function(finalpos, interval) {            //若不支持此方法,则退出            if(!window.scrollTo) {                return false;            }            //窗体滚动时,禁用鼠标滚轮            window.onmousewheel = function(){                return false;            };                          //清除计时            if (document.body.movement) {                 clearTimeout(document.body.movement);             }             var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置            var dist = 0;             if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出                window.onmousewheel = function(){                    return true;                }                return true;             }             if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离                dist = Math.ceil((finalpos - currentpos)/10);                 currentpos += dist;             }             if (currentpos > 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<nodes.length; i++)            {                if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)                    {                    //获取标题文本                    var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/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 = '<div class="list">' +                '<table class="out" border="0" cellspacing="0" cellpadding="0"> ' +                    '<tr>' +                        '<td class="icontd" align="right" valign="bottom">' +                            '<img  src="http://pic.cnitblog.com/face/516492/20140827145520.png"    style="max-width:90%" height="57px"/ alt="自定义自己的博客首页_html/css_WEB-ITnose" >' +                        '</td>' +                        '<td align="left" valign="bottom" class="q">' +                            '<table border="0" cellpadding="0" cellspacing="0" > ' +                                '<tr><td class="topleft"></td><td class="top"></td><td class="topright"></td></tr> ' +                                '<tr><td class="left"></td> <td align="left" class="conmts"><p>';                                  var w2 = '</p> </td> <td class="right"></td></tr> ' +                                '<tr><td class="bottomleft"></td><td class="bottom"></td><td class="bottomright"></td></tr> ' +                            '</table>' +                        '</td> ' +                    '</tr> ' +                '</table> ' +            '</div>';         $.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");    });
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage