• 搭建个人博客主页


    搭建个人博客主页

    • 先来看下效果

    • blog_homepage.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MrBigB</title>
        <link rel="stylesheet" href="blog_style.css">
    </head>
    <body>
    
    <div class="blog-left">
        <div class="blog-avatar" >
            <img src="avatar.jpg" alt="">
        </div>
        <div class="blog-title">MrBigB</div>
        <div class="blog-info">Easy Come Easy Go</div>
        <div class="blog-link">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">微信</a></li>
            </ul>
        </div>
        <div class="blog-tag">
            <ul>
                <li><a href="">#Python</a></li>
                <li><a href="">#Golang</a></li>
                <li><a href="">#JavaScript</a></li>
            </ul>
        </div>
    </div>
    
    <div class="blog-right">
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
        <div class="article-list">
            <div class="article-title">
                <span class="title">零基础学Python, 从入门到入土</span>
                <span class="date">2019/1/1</span>
            </div>
            <div class="article-content">
                <p>文章内容包括但不限于: 1.如何拼写单词Python&nbsp;&nbsp;2.如何打印Hello World</p>
            </div>
            <div class="article-tag">
                <span>#Python&nbsp;&nbsp;</span><span>#Hello World</span>
            </div>
        </div>
    
    </div>
    
    </body>
    </html>
    
    • blog_style.css
    /*博客首页样式*/
    
    /*通用样式*/
    body {
        margin: 0;
        background-color: lightgrey;
    }
    
    a {
        text-decoration: none;
    }
    
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    /*左侧样式*/
    .blog-left {
        float: left;
         20%;
        height: 100%;
        background-color: #4e4e4e;
        position: fixed;
        top: 0;
        left: 0;
    }
    
    .blog-avatar {
         150px;
        height: 150px;
        border: 5px grey solid;
        border-radius: 50%;
        margin: 20px auto;
        overflow: hidden;
    }
    
    .blog-avatar img {
         100%;
    }
    
    .blog-title, .blog-info {
        font-size: 16px;
        color: lightgrey;
        text-align: center;
    }
    
    .blog-link a, .blog-tag a {
        font-size: 18px;
        color: lightgrey;
    }
    
    .blog-link a:hover, .blog-tag a:hover {
        color: white;
    }
    
    .blog-link ul, .blog-tag ul {
        margin: 100px auto;
        text-align: center;
    
    }
    
    /*右侧样式*/
    .blog-right {
        float: right;
         80%;
        height: 1000px;
    }
    
    .article-list {
        background-color: white;
        margin: 20px 40px 20px 10px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    }
    
    .article-title {
        border-left: 5px solid red;
    }
    
    .article-title .title {
        font-size: 28px;
        margin-left: 20px;
    }
    
    .article-title .date {
        float: right;
        margin: 20px;
        color: rgba(0, 0, 0, 0.8);
    }
    
    .article-content p {
        text-indent: 25px;
        color: rgba(0, 0, 0, 0.8);
    }
    
    .article-content {
        border-bottom: 2px solid black;
    }
    
    .article-tag {
        margin-left: 25px;
        padding: 10px 20px 10px 2px;
        color: rgba(0, 0, 0, 0.8);
    
    }
    
    
  • 相关阅读:
    [SHOI2008]堵塞的交通
    [SHOI2008]汉诺塔
    [JSOI2008]最小生成树计数
    [JSOI2008]球形空间产生器
    [HNOI2014]画框
    HDU 2255 奔小康赚大钱
    [SDOI2017]新生舞会
    [BZOJ2285][SDOI2011]保密
    [BZOJ3232]圈地游戏
    [HDU5909]Tree Cutting
  • 原文地址:https://www.cnblogs.com/bigb/p/11873052.html
Copyright © 2020-2023  润新知