（OF作品展示）
OF之前介紹了用python實現數據可視化、數據分析及一些小項目，但基本都是後端的知識。想要做一個好看的小系統，我們還要學一些前端的知識，今天OF将講解如何用pycharm（全棧開發不錯的工具）做一張好看的網頁，以後我們就可以自己開發網頁/網站放到互聯網上。
主要内容：網頁前端布局
适用人群：Python初學者，前端初學者
準備軟件：pycharm
二、pycharm操作說明1. 創建項目1) 下載完成pycharm, 點擊file-New Project...
2) 按下圖步驟創建一個項目，目前我們選擇Pure python即可，以後我們可以學習用Django/flask等框架來做完整的系統
1）在創建的項目空白處鼠标右鍵-New-HTML File
2）輸入英文的網頁名字，盡量不要輸入中文/特殊字符
當雙擊打開我們創建後的HTML文件，大家會看到下面的界面
在開始開發網頁前，我們需要自己設計下想要把網頁做成什麼樣，為了節省成本OF都是自己設計的頁面樣式，可以手繪，也可以在PPT上畫。
我們先學習一個比較簡單的布局如下圖，大家可以看到下圖已經畫出了我們需要添加的内容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字将會是左右的關系，而不是上下
根據上述的css名字定義，先填充<body>内的代碼，那麼我們就完成一半的工作了，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
<p class="peo">人物介紹</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">東</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">喬</p>
</div>
</div>
</body>
</html>
1）鼠标移到代碼處，在右上角我們會看到一排浏覽器，我們點擊其中一個運行
2）目前看到的網頁内容從上到下顯示
首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分将3個顔色内容框在<div id="main">中，運行結果是3個顔色的内容橫向展示了，而不是上下
1）那麼我們先從“人物介紹”的布局開始，“人物介紹”居中展現（用flex中justify-content:center），而且下面有一條黑線，OF準備用border樣式來實現，所以在<div id=intro>裡另加了個<div class=peo>，代碼如下：
(注：style中的#main對應body中的id=main, .main對應class=main)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#intro {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.peo {
max-width: 10rem;
border-bottom: 0.2rem solid #000000;
font-family: sans-serif;
font-size: 1.5rem;
color: #0070C0;
line-height: 3rem;
}
</style>
</head>
<body>
<div id="intro">
<p class="peo">人物介紹</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">東</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">喬</p>
</div>
</div>
</body>
</html>
運行結果：
2）圖片部分是3個<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設置flex布局，在<style>裡加入以下代碼：
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
運行結果：
3）圖片之間靠太近，圖片大小不一緻，文字沒居中，我們在<style>裡加入以下代碼：
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}
運行結果：
今天我們學會了flex布局，今後所有的網頁排版都可以實現了，祝願大家都有所收獲，完整的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#intro {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.peo {
max-width: 10rem;
border-bottom: 0.2rem solid #000000;
font-family: sans-serif;
font-size: 1.5rem;
color: #0070C0;
line-height: 3rem;
}
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}
</style>
</head>
<body>
<div id="intro">
<p class="peo">人物介紹</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">東</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">喬</p>
</div>
</div>
</body>
</html>
今天的知識比較基礎但非常實用，每天學會一個小技能，積少成多，以後就能成為大神。如果大家對網頁上的實現有什麼不懂的，盡請留言，OF一定會一一解答的。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
