项目预览
代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="myblog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img alt="avatar-img" class="avatar-img" src="mlq.png">
</div>
<div class="blog-title">passion</div>
<div class="blog-info">这个人很帅什么都没有留下</div>
<div class="blog-link">
<ul class="blog-link-title">
<li>关于我</li>
<li>微博号</li>
<li>公众号</li>
</ul>
</div>
<div class="blog-tag">
<ul class="blog-tag-title">
<li>#python</li>
<li>#golang</li>
<li>#javascript</li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="blog-list ">
<div class="blog-box clearfix"> <!-- 防止塌陷 用伪类选择器（:after） 创造的空文本填充盒子-->
<span class="blog-box-title">论发财之道</span>
<span class="blog-box-time">2022-12-1</span>
</div>
<div class="blog-info">
<span class="blog-info-text">身体好、吃苦耐劳、坚韧不拔、软饭硬吃、你还在等什么 赶紧找xxx报名</span>
</div>
<div class="blog-tag-list">
<span class="blog-tag-content">#重金求子</span>
<span class="blog-tag-content">#全国可飞</span>
</div>
</div>
<!-- blog-list 可以多复制几个 -->
</div>
</body>
</html>
css:
/* background style */
body{
background-color: gray;
margin: 0;
height : 1200px;
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;
/* font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。*/
}
/* left div box style */
.blog-left{
float: left;
width: 25%;
height: 100%;
background-color:darksalmon;
position: fixed;
}
/* right div box style */
.blog-right{
float: right;
width: 75%;
height: 100%;
}
/* general style */
a{
text-decoration: none; /* remove the a tag underline */
}
ul{
list-style-type: none; /* remove the ul tag default style */
padding: 0; /* ul tag default padding-left=40, remove it */
}
/*avatar style */
.blog-left .blog-avatar{
width: 100px;
height: 100px;
border: 8px outset white; /* border style is outset, don't forget set */
border-radius: 50% ; /* this property will Controls the border of the image to be rounded */
margin: 20px auto; /* set the circle in div box middle */
overflow: hidden; /* Resolving image overflows problem, set the img in the circle */
}
/* solved overflow problem !!!! */
.clearfix:after {
content: ''; /* 填充空字符串 不会触发浏览器优先选择文本的机制*/
display: block; /* 设置成块级标签 使其可以填充一整行 */
clear: both; /* 当其左右两端有浮空元素时 就继续往下找到一个没有浮空元素的位置 作为一个块进行填充*/
}
.avatar-img{
max-height: 100%; /* img is in the div box, set the max height=100% will cramming the div box */
}
.blog-left .blog-title{
margin-top:20px;
margin-bottom:20px;
text-align: center; /* set the position of the text in the div tag */
font-weight: 900; /* set the font of the text */
font-size: 2em;
color: #ff154c;
}
.blog-left .blog-link-title{
margin: 60px auto;
}
.blog-left .blog-link-title li{
margin: 10px auto;
text-align: center;
}
.blog-left .blog-tag-title li{
margin: 10px auto;
text-align: center;
}
.blog-left div.blog-info{
margin: 10px auto;
text-align: center;
}
.blog-right .blog-list{
background-color: gray;
width : auto;
height : 100px;
margin : 40px 40px;
border:5px solid coral;
border-radius: 10px 10px 10px 10px;
box-shadow: 10px 10px 10px rgba(255,127,80,0.8) /* box-shadow style */;
}
.blog-right :hover{
background-color: lightcoral;
}
.blog-right .blog-box span.blog-box-title {
float: left;
}
.blog-right .blog-box span.blog-box-time {
float: right;
}
.blog-right .blog-info {
margin: 10px 10px;
}
.blog-right .blog-tag-list {
margin: 10px 10px;
}