index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>丁蓓博客</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<!--左边板块-->
<div class="left-info">
<div class="head-photo">
<!-- <img src="about-img.jpg" alt="">-->
</div>
<div class="blog-title">
<p>楼下小黑的博客</p>
</div>
<div class="blog-message">
<p>自己搭建博客页面第一天~~</p>
</div>
<div class="blog-link">
<ul>
<li><a href="http://zhdb.dnccn.com/" target="_blank">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="http://localhost:63342/python%20oldboy/day53/%E4%BD%9C%E4%B8%9A/%E4%BA%8C%E7%BB%B4%E7%A0%81.html" target="_blank">微信</a></li>
</ul>
</div>
<div class="blog-hobby">
<ul>
<li><a href="">python</a></li>
<li><a href="">C++</a></li>
<li><a href="">go</a></li>
</ul>
</div>
</div>
<!--右边板块-->
<div class="right-info">
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
<div class="blog-article">
<div class="article-title">
<span class="title">前端基础-博客页面</span>
<span class="date">2020/5/14</span>
</div>
<div class="article-body">
<p>
每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力!
</p>
<hr>
</div>
<div class="article-bottom">
<span>#python </span> <!-- 空格-->
<span>#javascript</span>
</div>
</div>
</div>
</body>
</html>
blog.css
/*这是博客园首页的样式文件*/
/*通用样式*/
body {
margin: 0;
font-family: 微软雅黑;
background-color: #eeeeee;
}
/*处理浮动带来的塌陷问题*/
.clearfix:after {
content: ''; /*内容空*/
display: block; /*空的内容变成块级标签，独占一行*/
clear:both;/*块级标签左右都不能有浮动的元素*/
/*用法：如果有标签出现浮动塌陷问题，就给塌陷的标签加上class="clearfix"*/
}
a{
text-decoration: none; /*此处去掉a标签带的文字底部下划线*/
}
ul{
list-style-type: none; /*此处去掉ul列表里面带的实心圆点*/
padding-left: 0; /*ul自带的一个40px pading-left去掉*/
}
/*左侧样式*/
/*分析： 左侧一直不动，固定定位*/
.left-info {
width: 20%;
height: 120%;
position: fixed; /*固定窗口*/
background-color: rgba(103, 46, 172, 0.67);
float: left;
clear: left;/*该标签的左边（地面和空中）不能有浮动的元素*/
}
.head-photo {
height: 200px;
width: 200px;
border-radius: 50%;/*设置边框为一个圆形*/
border: 5px solid white; /*边框大小为5像素，颜色为白色*/
margin: 20px auto; /*以上一个标签位置居中*/
overflow: hidden; /*头像溢出部分隐藏*/
background-image: url("about-img.jpg");
background-position: 0px -5px;
background-size: 200px;
/*border:none; 没有边框*/
background-repeat:no-repeat; /*图片不要重复平铺*/
}
/*.head-photo img{*/
/* max-width: 100%;*/
/*}*/
.blog-title,.blog-message {
color: #ffffff;
font-size: 18px;
text-align: center; /*字体位置居中*/
}
.blog-link.blog-hobby{
font-size: 36px;
}
.blog-link a,.blog-hobby a {
color: #504f4f;
}
.blog-link a:hover,.blog-hobby a:hover {
color: white;
}
.blog-link ul,.blog-hobby ul {
text-align: center;
margin-top: 40px;
}
/*右侧样式*/
/*分析：*/
.right-info{
width:80%;
height: 100%;
background-color: #fefaf1;
float: right;
clear: right;/*该标签的右边（地面和空中）不能有浮动的元素*/
}
.blog-article{
background-color: white;
margin:25px 45px 15px 15px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);/*盒子阴影*/
}
.title{
font-size: 36px;
}
.date{
float: right;
margin: 20px 20px;
font-weight: bolder; /*时间字体加粗*/
}
.article-title{
border-left: 5px solid red;/*左侧边框 红色 5像素*/
text-indent: 1em; /*让标题像左移动1 em*/
}
.article-body{
font-size: 18px;
text-indent: 30px;
/*border-bottom: 1px solid black; 水平线实现方式：1.加底部边框 2.加hr标签*/
}
.article-bottom{
padding: 10px 10px;
}
