骨架-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="cnblog.css">
</head>
<body>
<div class="left_style">
<div class="photo">
<!-- <img src="2.jpg" alt="">-->
</div>
<div class="name">涛哥的博客</div>
<div class="name">这个人很帅什么都没有留下</div>
<div>
<ul class="list_style">
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li></ul>
</div>
<div>
<ul class="list_style">
<li>python</li>
<li>java</li>
<li>go</li></ul>
</div>
</div>
<div class="right_style">
<div class="texe_info">
<div class="texe_title">
<span class="txt1">重金八万</span><span class="txt2">2021年5月8日</span></div>
<div class="texe_party1"><p>拒绝还价</p></div>
<hr>
<div class="texe_party2"><span>#python    #javascript</span></div></div>
</div>
</body>
</html>
css-----------------------------------------------------------
.left_style{
height: 100%;
width: 20%;
float: left;
background-color: rgb(78,78,78);
position:fixed;
/*top: 0;*/
}
a{
text-decoration: none;/*文字装饰*/
color: aqua;
}
a:hover{color: white;
}
.list_style{
list-style-type: none;
color:rgb(145,145,145);
padding: 0;
margin:100px;
font-size: 20px;
}
body{margin: 0}
.photo{
width: 200px;
height: 200px;
background-color: blue;
border-radius: 50%;
border: 3px white solid;
background-image: url("2.jpg") ; /*不会溢出*/
/*overflow: hidden;*/
margin: auto auto;
}
.name{
font-size: 20px;
color: honeydew;
text-align: center;
margin: 15px;
}
.right_style{
height: 1000px;
width: 80%;
float: right;
background-color: #eeeeee;
}
.texe_info{background-color: aliceblue;
height: 150px;
margin: 20px 40px 10px 10px;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
text-indent: 1em;
}
.txt2{float: right;
padding: 10px 10px;
font-weight: bolder;
}
.txt1{font-size: 30px;
font-weight: bolder;
}
.text_party1{
font-weight: bolder;
}
.texe_party2{padding: 10px 1px;
font-weight: bolder;
}
.texe_title{
border-left: red solid 5px;}
