前端小练习-Michael的博客界面(粗糙版)

Posted 2021-03-26 michealjy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小练习-Michael的博客界面(粗糙版)相关的知识，希望对你有一定的参考价值。

michael-blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>michael's blog</title>
    <link rel="stylesheet" href="michael.css">
</head>
<body>
<div class="left">
    <div class="avatar">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570940021470&di=7f0864107eaf55f197659fd940f5a04e&imgtype=0&src=http%3A%2F%2Fwww.qqju.com%2Fpic%2Ftx%2Ftx22877.jpg" alt="">
    </div>
    <div class="name">Michael_L's Blog</div>
    <div class="title">Welcome to my blog, this's the best present for you</div>
    <div class="tag">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公众号</a></li>
        </ul>
    </div>
    <div class="tag">
        <ul>
            <li><a href="">#Python</a></li>
            <li><a href="">#php</a></li>
            <li><a href="">#go</a></li>
        </ul>
    </div>
</div>
<div class="right">
    <div class="article">
        <div class="head">
            <span class="title">这是michael的第一篇博客</span>
            <span class="data">2019-10-12</span>
        </div>
        <div class="body">Hello World!</div>
        <div class="article-tag">
            <span>#Python</span>
            <span>#java</span>
        </div>
    </div>
</div>
</body>
</html>

michael.css

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
.left{
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: #4E4E4E;
}
.left .avatar{
    width: 130px;
    height: 130px;
    overflow: hidden;
    border-radius: 50%;
    border: white 5px solid;
    margin: 20px auto;

}
.left img{
    max-width: 130px;
}
.name{
    color: #A3A3A3;
    text-align: center;
}
.left .title{
    color: #A3A3A3;
    text-align: center;
    margin: 30px;
}
.tag{
    margin: 70px;
}
.left .tag ul li{
    text-align: center;
}
.tag ul li a{
    color: #A3A3A3;
}
.tag ul li a:hover{
    color: white;
}
.right{
    width: 80%;
    background-color: #EEEEEE;
    float: right;
}

.right .article{
    width: 700px;
    /*text-align: left;*/
    background-color: white;
    margin: 20px 0 20px 15px;
    box-shadow: 3px 3px 3px black;

}
.article .head{
    border-left: red 6px solid;
}
.article .head .title{
    font-size: 36px;
    padding-left: 10px;
    }
.article .head .data{
    margin-left: 480px;
}
.article .body{
    margin-top: 20px;
    border-bottom: black solid 1px;
    padding: 20px;
}
.article .body p{
    text-indent: 30px;
}
.article .article-tag{
    margin-top: 10px;
    padding-bottom: 20px;
    }
.article .article-tag span{
    padding-left: 30px;
}

以上是关于前端小练习-Michael的博客界面(粗糙版)的主要内容，如果未能解决你的问题，请参考以下文章

我的博客笔记汇总版

日程报告19