写一个博客首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黄钊的博客园首页</title>
<style>
body{
margin: 0;
background-color: #eeeeee;
}
#auth{
height: 100%;
width: 20%;
background-color: #4e4d4d;
position: fixed;
color: #a9a9a9;
float: left;
}
#photo{
border: #ffffee 5px solid;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin-left: 20%;
margin-top: 20px;
}
#photo img{
width: 100%;
}
#auth_motto{
text-align: center;
}
#msg{
text-align: center;
padding-top: 50px;
font-size: 24px;
}
a:link{color: #a9a9a9}
a:hover{color: #ffffff;font-weight: bolder}
a:visited{color: #a9a9a9}
a{text-decoration: none}
#tag{
text-align: center;
padding-top: 20px;
}
#main{
float: right;
height: 100%;
width: 80%;
/*padding-left: 20%;*/
}
.essay{
background-color: white;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
width: 97%;
height: 180px;
margin-top: 25px;
margin-left: 15px;
}
.clearfix:after{
content: '';
clear: both;
display: block;
}
.head{
font-weight: bolder;
font-size: 38px;
padding-top: 20px;
padding-left: 20px;
border-left: red 10px solid;
/*width: 50%;*/
float: left;
}
.data{
font-weight: bolder;
float: right;
padding-right: 20px;
padding-top: 20px;
}
.content{
font-weight: lighter;
padding-left: 20px;
padding-top: 25px;
}
.essay_tag{
padding-left: 20px;
/*padding-top: 20px;*/
}
</style>
</head>
<body>
<div id="auth">
<div id="photo">
<img src="2.jpg" alt="">
</div>
<div id="auth_motto">
<p>黄钊的博客</p>
<p>他有一个大美女女朋友：李肖彤</p>
</div>
<div id="msg">
<p><a href="作业-博客园首页.html" target="_blank">关于我</a></p>
<p><a href="">微博</a></p>
<p><a href="">微信</a></p>
</div>
<div id="tag">
<p><a href="作业-博客园首页.html" target="_blank">#python</a></p>
<p><a href="">#java</a></p>
<p><a href="">#go</a></p>
</div>
</div>
<div id="main">
<div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div>
<div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div> <div class="essay">
<div class="title clearfix">
<div class="head">活到老学到老</div>
<div class="data">2020/5/14</div>
</div>
<div class="content">python全栈开发第53天</div>
<hr style="">
<div class="essay_tag">#python</div>
</div>
</div>
</body>
</html>