整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們經(jīng)常會遇到這樣的一個問題。
設(shè)計出了很牛逼的設(shè)計稿，客戶確認(rèn)了，前端靜態(tài)制作也出來，還原設(shè)計稿95%以上，客戶也確認(rèn)了。
那是個完美啊！！做完程序了，交給客戶了。然后客戶自己上傳了圖片了。那個悲催啊！！慘不忍睹啊！！
完全和設(shè)計稿兩碼事？圖片不好看，到處都跑位。
客戶就罵過來了，你們是否也遇到這樣的事情？因?yàn)榭蛻舻墓緵]有設(shè)計師啊，哈哈，這個問題可能遇到的不少。
其實(shí)大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。
那么，前端制作工程師是否有辦法解決這樣的問題，其實(shí)是可以的。如果因圖片問題導(dǎo)致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設(shè)計師幫你處理圖片啊。這樣不就解決問題了嗎？
這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內(nèi)容，其他的將會被隱藏。
舉個栗子：
這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點(diǎn)點(diǎn)的變形，但不影響閱讀。
如果其中有一張圖片的尺寸稍微有一點(diǎn)點(diǎn)不一樣，肯定會出現(xiàn)跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦！！
那么就以這個來說說解決方式。
大家都知道圖片有一種特性，就是當(dāng)圖片的寬度改變時，高度也會隨著等比例在改變。
例如：一張寬高都為100px的圖片，如果把寬度調(diào)至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。
這里就拿上一次說到的 “圖文列表 純css布局” 那次說的布局來說說，因?yàn)槎际亲龊茫蜕厦婺莻€圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請關(guān)注微信公眾號：JS學(xué)吧）
效果是這樣的：
如何切出占位圖呢？如下操作
用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖
裁完成，再點(diǎn)擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點(diǎn)兩次 I 鍵。可以調(diào)出 “圖像大小” 彈窗。
可以看到 “像素大小” 的寬度和高度都為260px，那么只要調(diào)其中一個就可以，就可以達(dá)到等比例調(diào)整。
我們先調(diào)成10px，確定后，再把圖層的 “小眼睛” 關(guān)掉，另存為一個 png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦！！
然后把 img 中的圖片路徑改為如下：
<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發(fā)現(xiàn)原來的圖片不見的，變成空白的，但是原來的布局結(jié)構(gòu)沒有改變。其實(shí)要的就是這樣的效果。
然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。
<a href="">
<div style="background: #000;">
<img src="rect.png" alt="" width="100%">
</div>
</a>
看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達(dá)到了想要的效果。
關(guān)鍵的時候來了。就是處理圖片。我們要把產(chǎn)品圖片做為背景的形式輸出即可以。把圖片的路徑寫在div上面的就解決了。再加上css3新屬性就可以了。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic001.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
用背景樣式 background-image 定入路徑。再添加一個 cover-img 的類名。然后 cover-img 的樣式如下：
.cover-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
注意、注意、注意，中要的事說三遍。重點(diǎn)就在于 css3 的新屬性 background-size: cove；
這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區(qū)域。
是不是不明白，那就對了，挺不好理解。最好還是用實(shí)際效果來看看。
最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。
那么我們就來玩真的。直接上網(wǎng)整一張大圖的路徑放進(jìn)去看看就知道了。
上某某網(wǎng)站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現(xiàn)在弄個不是正方形的圖片來試試效果。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic002.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
更改url里的路徑即可
出來的效果如下：
是不是自動調(diào)整了。
我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264
HTML：如下
<a href="">
<div class="cover-img" style="background-image: url(pic003.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
最終效果：
怎么樣，效果還可以吧！！不知道你們看出了什么了沒有。
第一張是寬形狀的圖片，是以高度填滿 div 的區(qū)域。
第二張是高形狀的圖片，是以寬度填滿 div 的區(qū)域。
全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。
例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務(wù)器要多請求一次.....等等問題！！做圖時的內(nèi)容盡可能在正中間。
然后，不管客戶上傳什么鬼形狀的圖片，都不會產(chǎn)生布局變亂的情況。
獲取《vue3.0大公司后臺管理系統(tǒng)開發(fā) 正規(guī)開發(fā)流程項(xiàng)目實(shí)踐》視頻，
請點(diǎn)擊下面 “了解更多” 或 請關(guān)注微信公眾號《手把手?jǐn)]碼前端》
HTML的世界里，一切都是由容器和內(nèi)容構(gòu)成的。容器，就如同一個個盒子，用來裝載各種元素；而內(nèi)容，則是這些盒子里的珍寶。理解了這一點(diǎn)，我們就邁出了探索HTML布局的第一步。
在HTML中，布局標(biāo)簽主要用于控制頁面的結(jié)構(gòu)和樣式。本文將介紹一些常用的布局標(biāo)簽及其使用方法，并通過代碼示例進(jìn)行演示。
布局在我們前端開發(fā)中擔(dān)任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。
而你的任務(wù)，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標(biāo)簽的作用就像那張圖紙，它指導(dǎo)瀏覽器如何正確、有序地顯示內(nèi)容和元素，確保網(wǎng)頁的結(jié)構(gòu)和外觀既美觀又實(shí)用。
下面我們就來看看在HTML中常用的基礎(chǔ)布局標(biāo)簽有哪些，如何使用這些布局標(biāo)簽完成我們的開發(fā)目標(biāo)。
div標(biāo)簽是一個塊級元素，它獨(dú)占一行，用于對頁面進(jìn)行區(qū)域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設(shè)置div的布局和樣式。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>這是一個div元素
</div>
</body>
</html>
運(yùn)行結(jié)果：
span標(biāo)簽是一個內(nèi)聯(lián)元素，它不獨(dú)占一行，用于對文本進(jìn)行區(qū)域劃分。它主要用于對文本進(jìn)行樣式設(shè)置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>這是一個<span>span元素</span>。</p>
</body>
</html>
運(yùn)行結(jié)果：
table標(biāo)簽用于創(chuàng)建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。
<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標(biāo)簽，我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表，讓信息的展示更加直觀明了。
需要注意的是：
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</body>
</html>
運(yùn)行結(jié)果：
<form>標(biāo)簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復(fù)選框、單選按鈕、提交按鈕等。
<form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
form {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<form>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
運(yùn)行結(jié)果：
示例代碼：
<!DOCTYPE html>
<htmml>
<head>
<meta charst="UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
</ul>
<ul>
<li type="circle">添加circle屬性</li>
<li type="circle">添加circle屬性</li>
<li type="circle">添加circle屬性</li>
</ul>
<ul>
<li type="square">添加square屬性</li>
<li type="square">添加square屬性</li>
<li type="squaare">添加square屬性</li>
</ul>
</body>
</html>
運(yùn)行結(jié)果：
也可以使用CSS list-style-type屬性定義html無序列表樣式。
想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！「鏈接」
示例代碼：
<ol>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
</ol>
<ol type="a" start="2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
<li value="20">第四項(xiàng)</li>
</ol>
<ol type="Ⅰ" start="2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
</ol>
運(yùn)行結(jié)果：
同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>
<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。
示例代碼：
<dl>
<dt>計算機(jī)</dt>
<dd>用來計算的儀器</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>
運(yùn)行結(jié)果：
以上就是HTML中常用的布局標(biāo)簽及其使用方法。在實(shí)際開發(fā)中，還可以結(jié)合CSS和JavaScript來實(shí)現(xiàn)更復(fù)雜的布局和交互效果。
掌握了這些HTML常用布局標(biāo)簽，你已經(jīng)擁有了構(gòu)建網(wǎng)頁的基礎(chǔ)工具。記住，好的布局不僅需要技術(shù)，更需要創(chuàng)意和對細(xì)節(jié)的關(guān)注。現(xiàn)在，打開你的代碼編輯器，開始你的布局設(shè)計之旅吧！
（OF作品展示）
OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識。想要做一個好看的小系統(tǒng)，我們還要學(xué)一些前端的知識，今天OF將講解如何用pycharm（全棧開發(fā)不錯的工具）做一張好看的網(wǎng)頁，以后我們就可以自己開發(fā)網(wǎng)頁/網(wǎng)站放到互聯(lián)網(wǎng)上。
主要內(nèi)容：網(wǎng)頁前端布局
適用人群：Python初學(xué)者，前端初學(xué)者
準(zhǔn)備軟件：pycharm
1) 下載完成pycharm, 點(diǎn)擊file-New Project...
2) 按下圖步驟創(chuàng)建一個項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來做完整的系統(tǒng)
1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File
2）輸入英文的網(wǎng)頁名字，盡量不要輸入中文/特殊字符
當(dāng)雙擊打開我們創(chuàng)建后的HTML文件，大家會看到下面的界面
在開始開發(fā)網(wǎng)頁前，我們需要自己設(shè)計下想要把網(wǎng)頁做成什么樣，為了節(jié)省成本OF都是自己設(shè)計的頁面樣式，可以手繪，也可以在PPT上畫。
我們先學(xué)習(xí)一個比較簡單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會是左右的關(guān)系，而不是上下
根據(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>1）鼠標(biāo)移到代碼處，在右上角我們會看到一排瀏覽器，我們點(diǎn)擊其中一個運(yùn)行
2）目前看到的網(wǎng)頁內(nèi)容從上到下顯示
首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個顏色的內(nèi)容橫向展示了，而不是上下
1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來實(shí)現(xiàn)，所以在<div id=intro>里另加了個<div class=peo>，代碼如下：
(注：style中的#main對應(yīng)body中的id=main, .main對應(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個<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}運(yùn)行結(jié)果：
3）圖片之間靠太近，圖片大小不一致，文字沒居中，我們在<style>里加入以下代碼：
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}運(yùn)行結(jié)果：
今天我們學(xué)會了flex布局，今后所有的網(wǎng)頁排版都可以實(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>今天的知識比較基礎(chǔ)但非常實(shí)用，每天學(xué)會一個小技能，積少成多，以后就能成為大神。如果大家對網(wǎng)頁上的實(shí)現(xiàn)有什么不懂的，盡請留言，OF一定會一一解答的。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
