日常開發網站中,我們常常會用到div容器
但是在使用的過程中我們發現div為塊級元素會鋪滿整個寬度
但是在一些業務需求中 需要多個容器排列在一排
那么我們該如何解決這種問題呢 在這里介紹兩種方法
第一種
給父級div設置屬性display值為flex,
給子級div設置屬性flex值為1,
這樣就可以實現多個div排列在同一行了
第二種
利用浮動的知識可以實現 ,
給想要排列在一行的div設置左浮動屬性float:left;
既可以實現!
(OF作品展示)
OF之前介紹了用python實現數據可視化、數據分析及一些小項目,但基本都是后端的知識。想要做一個好看的小系統,我們還要學一些前端的知識,今天OF將講解如何用pycharm(全棧開發不錯的工具)做一張好看的網頁,以后我們就可以自己開發網頁/網站放到互聯網上。
主要內容:網頁前端布局
適用人群:Python初學者,前端初學者
準備軟件:pycharm
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一定會一一解答的。
于學習Web前端開發的小伙伴來說,掌握HTML是基本功,今天陜西優就業小編就為大家帶來HTML中各類標簽語義化的解釋。
1.p標簽和br標簽
先說個最簡單的。分段要用p標簽而不是用br(甚至連續兩個)。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發帖,如果我想分段,便打回車。而如此傳輸到后臺并顯示出來的,顯然就是用分段的。
2.table 和 th
由于大力宣揚div+css的結果,似乎現在誰用table布局誰就是未開化的土著。但我認為這種觀點是不正確的。table的含義是表格,因此凡是應該以表格形式出現的數據,仍然應該用table布局。簡單的例子是班級同學的花名冊,包括姓名學號性別等等,這明顯是一個表格形式的數據,因此應該用table布局。另一個比較值得探討的例子是,blog里面的日歷導航。我曾經有見過一個blog程序,它的日歷導航里的各個日期,從1號到30號全用div套好,再使用float:left樣式7個一排的排出當月的日歷。當我取消瀏覽器的CSS顯示之后,日歷的那部分則從1號到30號一豎排下來。我認為這是不對的。因為日歷應該是一個表格形式的數據,因此仍然應該用table布局。當取消css之后,應該仍然按照一排7個的樣子歸成一個表格。
th則是另一個會被忽視的標簽。由于CSS的萬能,所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講,一些表格單元應該用th標簽。比如上文說到的日歷表格,里面的“MON TUE WED... SUN”這些標識星期的單元,就應該用th而不是td。
3.h1-h6
對于h1-h6標簽,從語義上講,它們應該適用于所有標題文字。因此,一些如但是值得注意的是,這樣又有可能犯之前h1里面提到的問題。因為有些文字的樣式其實是有現成的標簽的,比如 strong 標簽 sub標簽 等,我們也應該適當的給它們一些機會。
4.a標簽
a是控制超連接的標簽。但有些特殊的情況,我們不一定喜歡用它。比如需要彈出一個小窗口。我沒怎么留心,但我想有些設計師會將onclick直接定義到“播放”小圖標的標簽里還是應該在img外面加一個a,然后將onclick定義到a里面,并記住在js函數最后寫上return false。如果可以,該a標簽的href屬性也應該寫上彈出窗口的URL,保證用戶在禁止JS的情況下仍能夠有效的打開頁面。
暫時介紹這么多最后再總結一下遵循HTML標簽語義的重要性。Web標準的其中一個要求是低配置的兼容性:當用戶禁用圖片、禁用CSS或禁用JS的時候,我們仍能夠讓他有效的瀏覽網頁內容。眾所周知強制alt屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循HTML標簽的語義,則是保證禁用CSS時的兼容性。只有當正確使用了HTML標簽,我們的網頁在“CSS裸奔”的時候,才會仍然讓人看得出哪里是導航菜單,哪里是文章標題,日歷表格也不會分崩離析。
陜西優就業Web前端學習:http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009350
*請認真填寫需求信息,我們會在24小時內與您取得聯系。