亚洲精品无码一区二区三区久久久 ,人人澡人人妻人人爽人人蜜桃,大肉大捧一进一出视频出来呀

一、摘要

文章插圖
（OF作品展示）
OF之前介紹了用python實現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項目，但基本都是后端的知識。想要做一個好看的小系統(tǒng)，我們還要學一些前端的知識，今天OF將講解如何用pycharm（全棧開發(fā)不錯的工具）做一張好看的網(wǎng)頁，以后我們就可以自己開發(fā)網(wǎng)頁/網(wǎng)站放到互聯(lián)網(wǎng)上。
主要內容：網(wǎng)頁前端布局
適用人群：Python初學者，前端初學者
準備軟件：pycharm
二、pycharm操作說明1. 創(chuàng)建項目1) 下載完成pycharm, 點擊file-New Project…

文章插圖
2) 按下圖步驟創(chuàng)建一個項目，目前我們選擇Pure python即可，以后我們可以學習用Django/flask等框架來做完整的系統(tǒng)

文章插圖
2. 創(chuàng)建HTML文件1）在創(chuàng)建的項目空白處鼠標右鍵-New-HTML File

文章插圖
2）輸入英文的網(wǎng)頁名字，盡量不要輸入中文/特殊字符

文章插圖
3. HTML格式說明當雙擊打開我們創(chuàng)建后的HTML文件，大家會看到下面的界面

文章插圖
三、網(wǎng)頁設計1. 草圖繪制在開始開發(fā)網(wǎng)頁前，我們需要自己設計下想要把網(wǎng)頁做成什么樣，為了節(jié)省成本OF都是自己設計的頁面樣式，可以手繪，也可以在PPT上畫。

文章插圖

文章插圖
2. css名字定義我們先學習一個比較簡單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框?。?否則Taylor圖片與文字將會是左右的關系，而不是上下

文章插圖
四、網(wǎng)頁開發(fā)1. body部分根據(jù)上述的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="http://www.wokk.cn/pic/Taylor.png"/><p class="word">Taylor</p></div><div class="bord"><img class="img" src="http://www.wokk.cn/pic/yan.png"/><p class="word">東</p></div><div class="bord"><img class="img" src="http://www.wokk.cn/pic/song.png"/><p class="word">喬</p></div></div></body></html>

2. 網(wǎng)頁測試1）鼠標移到代碼處，在右上角我們會看到一排瀏覽器，我們點擊其中一個運行

文章插圖
2）目前看到的網(wǎng)頁內容從上到下顯示

文章插圖
3. head部分首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個顏色內容框在<div id=”main”>中，運行結果是3個顏色的內容橫向展示了，而不是上下

文章插圖
1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準備用border樣式來實現(xiàn)，所以在<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="http://www.wokk.cn/pic/Taylor.png"/><p class="word">Taylor</p></div><div class="bord"><img class="img" src="http://www.wokk.cn/pic/yan.png"/><p class="word">東</p></div><div class="bord"><img class="img" src="http://www.wokk.cn/pic/song.png"/><p class="word">喬</p></div></div></body></html>

運行結果：

文章插圖
【圖片生成網(wǎng)址鏈接好看的網(wǎng)頁模板布局代碼】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布局，今后所有的網(wǎng)頁排版都可以實現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：

<!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="http://www.wokk.cn/pic/Taylor.png"/><p class="word">Taylor</p></div><div class="bord"><img class="img" src="http://www.wokk.cn/pic/yan.png"/><p class="word">東</p></div><div class="bord"><img class="img" src="http://www.wokk.cn/pic/song.png"/><p class="word">喬</p></div></div></body></html>

今天的知識比較基礎但非常實用，每天學會一個小技能，積少成多，以后就能成為大神。如果大家對網(wǎng)頁上的實現(xiàn)有什么不懂的，盡請留言，OF一定會一一解答的。

以上關于本文的內容，僅作參考！溫馨提示：如遇健康、疾病相關的問題，請您及時就醫(yī)或請專業(yè)人士給予相關指導!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內容，希望對您有所幫助：

圖片生成網(wǎng)址鏈接 好看的網(wǎng)頁模板布局代碼

圖片生成網(wǎng)址鏈接好看的網(wǎng)頁模板布局代碼