HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="ss.css">
</head>
<body class="clearfix">
<div class="left_div">
<div class="left_top">
<div class="portrait">
<img src="https://img1.baidu.com/it/u=4139746764,2918951882&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
</div>
<div class="username">
<span class="blog-username">博客</span>
</div>
<div class="signature">
<span>简介</span>
</div>
</div>
<div class="left_auto">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="felt_lower">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#java</a></li>
<li><a href="">#golang</a></li>
</ul>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
</body>
</html>
CSS代码
/*博客园首页css文件*/
body {
margin: 0;
background-color: #eeeeee;
}
a {
text-decoration: none;
color: darkgoldenrod;
}
a:hover {
color: aliceblue;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*防塌陷*/
/*.clearfix:after{*/
/* content: '';*/
/* clear: both;*/
/* display: inline-block;*/
/*}*/
/*左侧*/
.left_div {
left: 0;
top: 0;
float: left;
width: 20%;
height: 100%;
background-color: darkgray;
position: fixed;
}
/*左上*/
.left_top {
text-align: center;
}
/*左侧头像*/
.portrait {
width: 300px;
height: 300px;
border: 3px solid white;
overflow: hidden;
border-radius: 50%;
margin: 10px auto;
}
.portrait img {
max-width: 100%;
}
/*博客div*/
/*博客span*/
.blog-username {
font-size: 28px;
margin-top: 10px;
}
/*简介*/
.signature {
font-size: 28px;
margin-top: 10px;
}
/*左中*/
.left_auto {
text-align: center;
margin-top: 150px;
font-size: 36px;
}
/*左下*/
.felt_lower {
text-align: center;
margin-top: 200px;
font-size: 36px;
}
/*右侧*/
.right_div {
float: right;
width: 80%;
}
.v1 {
margin: 20px 50px 20px 20px;
background-color:beige;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6);
}
.v1-title {
font-weight: bolder;
border-left:8px solid red;
}
.title-b {
font-size: 48px;
}
.title-time {
float: right;
font-size: 24px;
margin-right: 20px;
margin-top: 10px;
}
.title-b {
margin-left: 20px;
}
.v1-desc {
margin-top: 10px;
font-size: 38px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.desc-jj {
margin-left: 30px;
}
.v1-info {
font-size: 30px;
margin-left: 30px;
margin-top: 10px;
}