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;
}
