前端小练习-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;
}标签：界面,color,text,Michael,博客,article,20px,margin,left 来源： https://www.cnblogs.com/michealjy/p/11665794.html