zoukankan      html  css  js  c++  java
  • 作业33

    作业33

    做博客首页

    ·

    效果图

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>博客首页</title>
        <link rel="stylesheet" href="作业.css">
    </head>
    <body>
    
    <!--    左侧区域-->
        <div class="blog_left">
            <!--        个人信息区域-->
            <div>
                <!--        头像区域-->
                <div class="avatar">
                    <img src="timg.jpg" alt="">
                </div>
                <!--        昵称区域-->
                <div class="nickname">
                    阿柴的博客
                </div>
                <!--        个人简介区域-->
                <div class="info">
                    阿柴很忙,什么都没留下
                </div>
            </div>
    
            <!--        个人链接区域-->
            <div class="self_link">
                <ul>
                    <li><a href="https://www.baidu.com">关于我</a></li>
                    <li><a href="https://www.baidu.com">微博</a></li>
                    <li><a href="https://www.baidu.com">微信公众号</a></li>
                </ul>
            </div>
    
            <!--        博客筛选区域-->
            <div class="blog_filter">
                <ul>
                    <li><a href="https://www.baidu.com">#Python</a></li>
                    <li><a href="https://www.baidu.com">#Java</a></li>
                    <li><a href="https://www.baidu.com">#Golang</a></li>
                </ul>
            </div>
    
    
        </div>
    
    <!--    右侧区域-->
        <div class="bolg_right">
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
            <!--        blog区域-->
            <div class="article">
                <!--            标题日期区域-->
                <div class="top">
                    <span class="title">论阿柴有多帅</span>
                    <span class="time">2020/5/14</span>
                </div>
    
                <!--            blog简介-->
                <div>
                    <p class="blog_descript">人见人爱,花见花开</p>
                </div>
    
                <hr>
    
                <!--            关联区域-->
                <div class="blog_filter">
                    <span>#Python</span>
                    <span>#JavaScript</span>
                </div>
    
            </div>
    
        </div>
    </body>
    </html>
    

    CSS

    /*通用样式*/
    body {
        margin: 0;
        background-color: #eeeeee;
    }
    a:hover{
        color: white;
    }
    a {
        text-decoration: none;
    }
    a:visited{color: darkgray}
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    /*左侧区域*/
    .blog_left {
        background-color: antiquewhite;
         20%;
        height: 100%;
        float: left;
        position: fixed;
    }
    /*头像区域*/
    .avatar {
        height: 200px;
         200px;
        border-radius: 50%;
        border: white 5px solid;
        overflow: hidden;
        margin: 10px auto;
    }
    .avatar img{
        height: 130%;
    }
    /*昵称区域*/
    .nickname {
        font-size: 36px;
        text-align: center;
    }
    /*个人简介区域*/
    .info {
        margin-top: 10px;
        font-size: 18px;
        text-align: center;
        padding: 5px;
    }
    /*个人链接区域*/
    .self_link {
        font-size: 24px;
        text-align: center;
        padding: 20px;
    }
    /*博客筛选区域*/
    .blog_filter {
        font-size: 20px;
        text-align: center;
        padding: 20px;
    }
    
    
    /*右侧区域*/
    .bolg_right {
         80%;
        float: right;
    }
    
    /*blog区域*/
    .article {
        height: 200px;
        margin: 15px 20px 5px 10px;
        background-color: white;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    
    }
    
    /*标题日期区域*/
    .top {
        height: 60px;
        border-left: red 5px solid;
        padding: 5px;
    }
    .title {
        font-size: 40px;
        float: left;
        margin-left: 10px;
    }
    .time {
        font-size: 20px;
        margin: 8px 8px;
        float: right;
    }
    
    /*blog简介区域*/
    .blog_descript {
        font-size: 25px;
        text-indent: 40px;
        margin-bottom: 10px;
    }
    hr {margin: 10px}
    /*关联区域*/
    .blog_filter {
        text-indent: 1em;
        font-size: 30px;
        text-align: left;
        padding: 0;
    }
    .blog_filter span {
        margin: 10px;
    }
    
  • 相关阅读:
    python time 转换&运算tips
    Web.py session用户认证
    简单的内存池实现gko_alloc
    cpp(第十章)
    cpp(第九章)
    cpp(第八章)
    cpp(第七章)
    cpp(第六章)
    cpp(第五章)
    结构中的位字段
  • 原文地址:https://www.cnblogs.com/achai222/p/12892321.html
Copyright © 2011-2022 走看看