整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
日常開發網站中，我們常常會用到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小時內與您取得聯系。
