本人博客html + css + js 模板

简介

送给想设计主页的朋友一些思路

 

HTML

<!DOCTYPE html>
<html>
<body>

<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
.day {
    border-radius: 10px;
    padding: 20px;
}
</style>
<script>
function GetRandomNum(Min,Max){
    var Range=Max-Min;
    var Rand=Math.random();
    return(Min+Math.round(Rand * Range));
}
function ShowTab(){
    x=document.getElementById("MagicArray");
    if (x.style.width=="200px"){
        x.style.width="0px";
        x.style.height="0px";
        x.style.bottom="100px";
        x.style.right="100px";
        x.style.transform="rotate(0deg)";
    }else{
        x.style.width="200px";
        x.style.height="200px";
        x.style.bottom="0px";
        x.style.right="0px";
        x.style.transform="rotate(180deg)";
    }
    
    y=document.getElementsByName("Tab");
    for (var i=0;i<y.length;i++){
        x=y[i];
        if (x.style.fontSize=="15px"){
            x.style.fontSize="0px";
            x.style.transitionDelay="0s";
        }else{
            x.style.fontSize="15px";
            x.style.transitionDelay="0.8s";
        }
    }
}
function ShowPicture(){
    x=document.getElementById("main");
    x.style.opacity=0.9-x.style.opacity;
}
function ChangePicture(){
    x=document.body;
    y=GetRandomNum(0,14);
    if (y==0){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==1){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==2){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==3){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==4){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==5){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==6){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==7){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==8){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==9){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==10){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==11){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==12){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==13){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==14){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }
}
</script>
</body>
</html>

 

CSS

/*公用*/
body {
    font-size:15px;
    padding:0;
    margin:0;
    font-family:"微软雅黑","宋体",Arial;
    min-width:1200px;
    background: black;
    opacity: 0.94;
    background-position: initial; 
    background-size: cover; 
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-origin: initial;
     background-clip: initial;
}

/* 隐藏top分页器 */
#homepage_top_pager {
    display: none;
}

h1.entrylistTitle + div.pager {
    display: none;
}

#home {
    opacity: 0.95;
    filter: alpha(opacity=95);
    box-shadow: 0 0 10px #a29d9d;
    margin: 40px auto;
    width: 90%;
    overflow: auto;
    border: solid 1px #fff;
    /* 加载背景图 */
    background-image: url('https://images.cnblogs.com/cnblogs_com/TF511/1440276/o_48cf1dc1721dc2aeb67476f4d02928b0.jpg');
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
}

/*段落*/
.postBody p,.postCon p {
    margin:7px 0;
    line-height:24px;
}

h3 {
    background:#50d694;
    color: #FFFFFF;
    height: 20px;
    line-height: 20px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #4e4b4b;
    text-align: center;
    border-radius: 10px;
    opacity: 0.8;
}


#cnblogs_post_body h3 {
    background:#25d196;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    height: 20px;
    line-height: 20px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align: center;
}

/*超链接*/
a {
    color:#464646;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited,a:hover {
    color:#464646;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
image {
    border:none;
}
#header {
    padding: 20px;
}
/*博客标题*/
#blogTitle h1 {
    margin: 0px 0 80px 0;
    font-size: 38px;
}
#blogTitle,#blogTitle a {
    font-weight:bold;
    color:#666;
}
#blogTitle .title {
    margin-top:10px;
    height:100px;
    line-height:100px;
    font-size:36px;
    padding-left:120px;
    background:#fff url('https://i.loli.net/2017/08/02/598187babf39e.gif') no-repeat;
}
.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: #25d196;
    text-align:center;
    margin-top:200px;
    margin-bottom:20px;
    opacity: 0.85;
}
#navList li {
    margin:0;
    line-height:48px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    background:#80b990;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    height:48px;
    color:#fff;
    line-height:48px;
}
#main {
    padding: 20px;
}
/*左边*/
#sideBarMain {
    padding: 0 10px 0 0;
    margin: 0 0 20px 0;
    width: 190px;
    font-size: 12px;
    line-height: 22px;
}

#sideBarMain a {
    color: #ffff;
    font-size: 14px;
}

#sideBarMain a:hover {
    color: #ffffff;
    background: black;
    font-size: 16px;
}

.newsItem {
    color: #ffffff;
    font-size: 14px;
}

/*公告*/
#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:82%;
    padding-left:0px;
    opacity: 0.8;
    border-radius: 10px;
}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
    color: #ff3434;
    text-decoration: none;
}

.postTitle a:hover {
    cursor: pointer;
    color: rgb(143, 0, 0);
}

.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#464646;
    border-bottom: 1px solid #999;
}

.dayTitle {
    display:none;
}

/*摘要*/
.c_b_p_desc {
    padding:10px;
    line-height:24px;
    color:#888;
}

.cnblogs_code pre {
    font-family: Courier New,serif;
    font-size: 14px;
    word-wrap: break-word;
}

.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;
    border-radius: 10px;
    padding: 20px;
}
.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:#999999;
    border-radius:4px;
    color:#fff;
}
.btn_my_zzk:hover {
    background:#6DA47D;
}
/*评论按钮*/

#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;
    color:#fff;
}
#btn_comment_submit:hover {
    background:#6DA47D;
}
/*评论标题*/
.feedback_area_title {
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#55895B;
    border-bottom:solid 6px #FFAAD5;
}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
.comment_quote {
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;
}
/*评论框*/
#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:#4caadb;
    color:#DDD;
    font-size:14px;
}
/*文章内图片*/
#cnblogs_post_body p img {
    margin:10px;
}
/*顶一下*/
.diggnum {
    font-size:28px;
    color:#FFFFFF;
    font-family:'Microsoft Yahei';
}

/*最新评论*/
#myposts .PostList {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
    color:#6DA47D;
}
#ZjmainstayCnblogsSWFTags{
　　overflow: visible;
　　position: absolute;
　　right: 10px;
　　top: 735px;
　　width: 160px;
　　z-index: 10000;
}
body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}

#MagicArray{
/* Firefox 4 */
-moz-transition-property:width height bottom right;
-moz-transition-duration:1s;

/* Safari and Chrome */
-webkit-transition-property:width height bottom right;
-webkit-transition-duration:1s;

/* Opera */
-o-transition-property:width height bottom right;
-o-transition-duration:1s;

position: fixed;
bottom:107px;
right: 108px;
width: 0px;
height: 0px;
text-align: center;
z-index:2;
}
/* 
#Header1_HeaderTitle:hover{
color: #ff5400;
} */
#blog_stats{
    display:none
}

#navCategory li{
margin-bottom: 10px;
}

#footer {
    display: none;
}

#top_nav {
    display: none;
}


/* 底部 */
div#nav_next_page {
    padding: 0 10px 10px 0;
    font-size: 16px;
}

#comment_nav {
    display: none;
}
#cnblogs_ch {
    display: none;
}

#opt_under_post {
    display: none;
}

#cnblogs_c1 {
    display: none;
}

#under_post_card1 {
    display: none;
}

#under_post_card2 {
    display: none;
}
.commentbox_footer {
    display: none;
}
#BlogPostCategory {
    display: none;
}

/* 屏幕点击飘字 */
.floatingfont {
    position: absolute;
    z-index: 999;
    animation: float 1.5s;

    color: rgb(223, 66, 66);
    font-size: 18xp;
    font-weight: 600;
    cursor: default;
    user-select: none;
    /* border-color: aqua; */
}

@keyframes float {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(-70px);
    }
}

 

JS

<script>
//生成目录索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';     
        content    += '<p style="font-size:24px; text-align:left; line-height:40px"><b style="color: #268735;">目录</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            // var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到目录</a><a name="_label' + i + '"></a></div>';
            // $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li style="font-size:20px; text-align: left; list-style-type: decimal;"><a  href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到目录</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).after(go_to_top);
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
}
GenerateContentList();


// 彩虹标题
var header_title = document.querySelector("#Header1_HeaderTitle");
var header_title_obj = document.getElementById("Header1_HeaderTitle")

var rainbowStyle = function () {
    var str = header_title_obj.textContent;
    // var newStr = '';
    // 彩虹七色
    var arrColor = ['#FF0000', "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"];
    // for (var i = 0; i < str.length; i++) {
    //     var num = Math.round(Math.random() * 6);
    //     newStr += '<span style="color:' + arrColor[num % arrColor.length] + '">' + str.charAt(i) + "</span>";
    // }
    var num = Math.round(Math.random() * 6);
    header_title_obj.style = "color: " + arrColor[num % arrColor.length]
    // header_title.innerHTML = newStr;
    return
}
!function () {
    // setInterval 循环事件
    setInterval(rainbowStyle, 5000);
}()

// 屏幕点击飘字
var arr = [
    "富强",
    "民主",
    "文明",
    "和谐",
    "自由",
    "平等",
    "公正",
    "法制",
    "爱国",
    "敬业",
    "诚信",
    "友善",
];
var index = 0;
var text = document.createElement("div");
document.documentElement.addEventListener("click", function (e) {
    var x = e.pageX;
    var y = e.pageY;
    text.setAttribute("class", "floatingfont");
    this.appendChild(text);
    text.style.left = x - text.clientWidth / 2 + "px";
    text.style.top = y - text.clientHeight / 2 + "px";

    text.innerHTML = arr[index];
    index == arr.length - 1 ? (index = 0) : index++;
    console.log(1);
});
document.documentElement.addEventListener("animationend", function (e) {
    text.parentNode.removeChild(text);
});

<!-- 背景轮播图 -->
var index = 1;
var image_list = [
    'o_48cf1dc1721dc2aeb67476f4d02928b0.jpg',
    'o_230106025441_1-210GQK246214.jpg',
    'o_230106025559_1-210GQK643605.jpg',
    'o_230106025608_1-210GQK43GN.jpg',
    'o_230106025623_1-210GQKRSc.jpg',
    'o_230106025632_1-210GQP146148.jpg',
    'o_230106025640_1-210GQP240221.jpg',
    'o_230106025650_5a011a5d5b56d.jpg',
    'o_230106025658_5a011a5ddb092.jpg',
    'o_230106025706_5a011a54af0ec.jpg',
    'o_230106025714_5a011a5631c3c.jpg',
    'o_230106025725_5a014ad7a65a0.jpg',
    'o_230106025737_5a014adce5584.jpg',
    'o_230106025751_5a014adfb6e02.jpg',
    'o_230106025805_5a014ae7e2e6e.jpg',
    'o_230106025842_5a014aea7b2f1.jpg',
    'o_230106025900_5a015b8944e4c.jpg',
    'o_230106025907_5a01457bb67cf.jpg',
    'o_230106025917_5a014568a3f5b.jpg',
    'o_230106025928_5a01639381a1c.jpg',
    'o_230106025940_v2-6b10011cfa662b4758f93d6b0faa8526_r.jpg',
    'o_230106025948_cijkx50ry23cijkx50ry23.jpg',
    'o_230106025958_dnnzoedrnhwdnnzoedrnhw.jpg',
    'o_230106030008_h3ie0hhh4dnh3ie0hhh4dn.jpg',
    'o_230106030027_jfx20f5yvuhjfx20f5yvuh.jpg',
    'o_230106030039_l02lpfiksxjl02lpfiksxj.jpg',
]
function lunbo() {
    //获取img对象
    var img = document.getElementById("home");
    var style = "background-image: url(" + "https://images.cnblogs.com/cnblogs_com/TF511/1440276/" + image_list[index] + ");"
    img.style = style
    //判断index是否大于3
    if (index >= 26) {
        index = 0;
    }
    index++;
}
//2.定义定时器
setInterval(lunbo, 10000);
</script>

 

posted @ 2023-01-06 17:29  萤huo虫  阅读(28)  评论(0)  编辑  收藏  举报