下面是小凰凰的簡介，看下吧！
💗人生態度：珍惜時間，渴望學習，熱愛音樂，把握命運，享受生活
💗學習技能：網絡 -> 雲計算運維 -> python全棧( 當前正在學習中)
💗您的點贊、收藏、關注是對博主創作的最大鼓勵，在此謝過！
有相關技能問題可以寫在下方評論區，我們一起學習，一起進步。
後期會不斷更新python全棧學習筆記，秉着質量博文爲原則，寫好每一篇博文。
一、思路
html
1、新建html 文件，用註釋標註代碼塊
2、先用 div 劃定區域——左欄 右欄，再細劃分左右欄的小的div
3、使用html 佔位，再調節樣式
爲標籤添加 id / class 屬性
CSS
1、新建CSS文件，使用註釋標註區域
2、先寫body的樣式
3、按照html的劃分，逐一添加樣式（選擇器的使用，從基礎選擇器到複雜選擇器）
4、調試運行，修改樣式
二、效果展示及div劃分說明
三、html源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吳晉丞的博客</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--左側主要內容欄-->
<div id="d1">
<!--頭像div-->
<div id="d3">
<img class="blog_head" src="123.png" alt="頭像">
</div>
<!--博客名及簡介div-->
<div>
<div class="blog_name">
<p>🔥時間定義青春🔥</p>
</div>
<div class="blog_img">
<p>這是一個奮鬥者的辛酸人生故事👊</p>
</div>
</div>
<!--鏈接區div-->
<div class="blog_link">
<ul>
<li>
<a class="conn" href="">👉   關於我</a>
</li>
<li>
<a class="conn" href="https://wujincheng.blog.csdn.net/" title="歡迎光臨CSDN博客!">👉 CSDN博客</a>
</li>
<li>
<a class="conn" href="http://106.54.72.122:8080/" title="歡迎進入網站部署專區!">👉 Jenkins+Git持續部署平臺入口</a>
</li>
<li>
<a class="conn" href="http://www.wujincheng.xyz:8081" title="歡迎進入報警專區!">👉 zabbix分佈式監控報警平臺入口</a><br>
</li>
<li>
<a class="conn" href="http://www.wujincheng.xyz:8080" title="歡迎進入日誌專區!">👉 ELK分佈式日誌集中管理平臺入口</a>
</li>
</ul>
</div>
<!--人生格言區div-->
<div class="blog_tag">
<ul>
<li>
<p class="tag">💫 沉迷於自動化的快樂,代碼如詩般的美麗,帶給我心靈上的慰藉</p>
</li>
<li>
<p class="tag">💫 你想要交什麼樣的朋友,那麼首先你要成爲那樣的人</p>
</li>
<li>
<p class="tag">💫 每一個不曾起舞的日子，都是對生命的辜負</p>
</li>
<li>
<p class="tag">💫 把所有有意義的事情變成有意思，所有有意思的事情變得有意義,這就是生活的藝術</p>
</li>
</ul>
</div>
</div>
<!--右側主要內容欄-->
<div id="d2">
<!--第一篇文章的div，第一篇文章的樣式做好，後面複製即可-->
<div class="article">
<!--文章標題div-->
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">舊的童年</a>
</span>
<span class="date">2020-6-22</span>
</div>
<!--文章體的div-->
<div class="article_body">
<p>
曾經熱鬧一時的果園小屋，如今成爲了野草擋風的屏障...
</p>
</div>
<hr> <!--下劃線分割-->
<!--作者版權所有div-->
<div class="article_author">
<p>
[大誠的解憂雜貨鋪·原創 @作者 鏟屎官]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/2sJQIHEMhLaLWf41IBOh1A">星空</a>
</span>
<span class="date">2020-6-21</span>
</div>
<div class="article_body">
<p>
星空之下，仰望繁星的我們，仍是孤獨的...
</p>
</div>
<hr>
<div class="article_author">
<p>
[大誠的解憂雜貨鋪·原創 @作者 錦蝶生]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">春天裏的人間煙火</a>
</span>
<span class="date">2020-6-20</span>
</div>
<div class="article_body">
<p>
這是春暖花開的人間煙火...
</p>
</div>
<hr>
<div class="article_author">
<p>
[大誠的解憂雜貨鋪·原創 @作者 錦蝶生]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">立春一日</a>
</span>
<span class="date">2020-6-19</span>
</div>
<div class="article_body">
<p>
舊物煥新芽，百花待爭豔...
</p>
</div>
<hr>
<div class="article_author">
<p>
[大誠的解憂雜貨鋪·原創 @作者 錦蝶生]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="http://www.xaixs.org/xs/17/17628/39701.html">遙遠的救世主</a>
</span>
<span class="date">2020-6-18</span>
</div>
<div class="article_body">
<p>
這是一部可以傲然獨尊的長篇小說,也是一部可遇不可求的完美佳作...
</p>
</div>
<hr>
<div class="article_author">
<p>
[星空小說網·原創 @作者 豆豆]
</p>
</div>
</div>
</div>
</body>
</html>
四、css源碼
body {
margin: 0;
}
/* 左側樣式 */
#d1 { /* 左側大div的佈局 */
background: olivedrab;
height: 690px;
width: 25%;
float: left;
}
#d3 { /* 頭像div的樣式 */
height: 100px;
width: 100px;
margin: 20px auto;
border-radius: 50%;
border: 3px solid white;
overflow: hidden; /* 溢出的隱藏 */
}
#d3>.blog_head {
width: 100%; /* 將頭像整個寬都顯示出來，注意頭像需要裁剪成正方形*/
}
.blog_name { /* 博客名時間定義青春的樣式 */
font-family: "Xingkai SC";
font-weight: bolder;
font-size: 20px;
text-align: center;
}
.blog_img { /* 博客信息簡介樣式 */
font-family: "Songti SC";
font-size: 10px;
text-align: center;
}
.conn { /* 鏈接區div樣式 */
font-family: "Songti TC";
font-size: 15px;
text-align: center;
text-decoration: none;
}
li { /* 去掉無序列表的黑點及向左移動 */
margin-left: -16px;
list-style-type: none;
}
.blog_link { /* 將鏈接區和上面的博客簡介div拉開距離 */
margin-top: 80px;
}
.blog_tag { /* 博客左側最下面的人生格言區div和鏈接區div的距離拉開 */
margin-top: 80px;
}
.blog_tag li { /* 去掉無序列表的黑點及向左移動 */
margin-left: -25px;
margin-right: 10px;
list-style-type: none;
}
.tag { /* 指定人生格言區的字體樣式及佈局*/
font-family: "Songti TC";
font-size: 5px;
text-align: left;
color: wheat;
}
/* 右側樣式 */
#d2 {
height: 690px;
width: 75%;
float: left;
}
.article { /* 右側區一個文章爲一個div，對所有文章的div的佈局和樣式進行設計*/
background-color:gainsboro;
margin: 20px 40px 10px 10px;
/* 邊框陰影 */
box-shadow: 5px 5px 5px cadetblue;
}
.article a { /* 文章鏈接的字體樣式佈局設計 */
text-decoration: none;
font-size: larger;
left: 40px;
color: skyblue;
}
.article a:link { /* 文章鏈接的顯示顏色 */
color: skyblue;
}
.article a:hover { /* 鼠標懸浮在文章鏈接上的顏色*/
color: red;
}
.date { /* 文章div中的時間的佈局及樣式設計 */
font-weight: bolder;
font-size: smaller;
margin: 15px 3px;
float: right;
}
.article_head { /* 文章標題區爲一個div，設計其樣式與首行縮進*/
border-left: 8px solid olivedrab;
text-indent: 18px;
}
.article_body { /* 文章體的縮進，及字體樣式*/
text-indent: 18px;
font-family: "Songti TC";
}
.article_author { /* 文章作者的字體樣式與縮進*/
text-indent: 18px;
font-family: "Songti TC";
font-size: smaller;
}