国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 學(xué)會(huì)用HTML-flex布局制作漂亮的網(wǎng)頁(yè)

學(xué)會(huì)用HTML-flex布局制作漂亮的網(wǎng)頁(yè)

時(shí)間：2023-10-10 03:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-10 03:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

學(xué)會(huì)用HTML-flex布局制作漂亮的網(wǎng)頁(yè)：

一、摘 要

（OF作品展示）
OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開(kāi)發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁(yè)，以后我們就可以自己開(kāi)發(fā)網(wǎng)頁(yè)/網(wǎng)站放到互聯(lián)網(wǎng)上。

主要內(nèi)容：網(wǎng)頁(yè)前端布局

適用人群：Python初學(xué)者，前端初學(xué)者

準(zhǔn)備軟件：pycharm

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

1) 下載完成pycharm, 點(diǎn)擊file-New Project...

2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來(lái)做完整的系統(tǒng)

2. 創(chuàng)建HTML文件

1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File

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

3. HTML格式說(shuō)明

當(dāng)雙擊打開(kāi)我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

在開(kāi)始開(kāi)發(fā)網(wǎng)頁(yè)前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁(yè)做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁(yè)面樣式，可以手繪，也可以在PPT上畫(huà)。

2. css名字定義

我們先學(xué)習(xí)一個(gè)比較簡(jiǎn)單的布局如下圖，大家可以看到下圖已經(jīng)畫(huà)出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下

四、網(wǎng)頁(yè)開(kāi)發(fā)

1. body部分

根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：

<!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>

2. 網(wǎng)頁(yè)測(cè)試

1）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行

2）目前看到網(wǎng)頁(yè)內(nèi)容從上到下顯示

3. head部分

首先我們簡(jiǎn)要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開(kāi)始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來(lái)實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：

(注：style中的#main對(duì)應(yīng)body中的id=main, .main對(duì)應(yīng)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>運(yùn)行結(jié)果：

2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：

#pic1 { display: -webkit-flex; /* Safari */ display: flex; justify-content: center;}運(yùn)行結(jié)果：

3）圖片之間靠太近，圖片大小不一致，文字沒(méi)居中，我們?cè)?lt;style>里加入以下代碼：

.bord{ padding: 1rem 2rem;}.img { border: 0.2rem solid #e3e3e3; max-width: 15rem; height: 22rem;}.word { text-align: center;}運(yùn)行結(jié)果：

五、總 結(jié)

今天我們學(xué)會(huì)了flex布局，今后所有的網(wǎng)頁(yè)排版都可以實(shí)現(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="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>今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對(duì)網(wǎng)頁(yè)上的實(shí)現(xiàn)有什么不懂的，盡請(qǐng)留言，OF一定會(huì)一一解答的。

關(guān)鍵詞：漂亮,布局,學(xué)會(huì)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉