整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們經常會遇到這樣的一個問題。
設計出了很牛逼的設計稿，客戶確認了，前端靜態制作也出來，還原設計稿95%以上，客戶也確認了。
那是個完美啊！！做完程序了，交給客戶了。然后客戶自己上傳了圖片了。那個悲催啊！！慘不忍睹啊！！
完全和設計稿兩碼事？圖片不好看，到處都跑位。
客戶就罵過來了，你們是否也遇到這樣的事情？因為客戶的公司沒有設計師啊，哈哈，這個問題可能遇到的不少。
其實大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。
那么，前端制作工程師是否有辦法解決這樣的問題，其實是可以的。如果因圖片問題導致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設計師幫你處理圖片啊。這樣不就解決問題了嗎？
這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內容，其他的將會被隱藏。
舉個栗子：
這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點點的變形，但不影響閱讀。
如果其中有一張圖片的尺寸稍微有一點點不一樣，肯定會出現跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦！！
那么就以這個來說說解決方式。
大家都知道圖片有一種特性，就是當圖片的寬度改變時，高度也會隨著等比例在改變。
例如：一張寬高都為100px的圖片，如果把寬度調至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。
這里就拿上一次說到的 “圖文列表 純css布局” 那次說的布局來說說，因為都是做好，和上面那個圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請關注微信公眾號：JS學吧）
效果是這樣的：
如何切出占位圖呢？如下操作
用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖
裁完成，再點擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點兩次 I 鍵。可以調出 “圖像大小” 彈窗。
可以看到 “像素大小” 的寬度和高度都為260px，那么只要調其中一個就可以，就可以達到等比例調整。
我們先調成10px，確定后，再把圖層的 “小眼睛” 關掉，另存為一個 png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦！！
然后把 img 中的圖片路徑改為如下：
<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發現原來的圖片不見的，變成空白的，但是原來的布局結構沒有改變。其實要的就是這樣的效果。
然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。
<a href="">
<div style="background: #000;">
<img src="rect.png" alt="" width="100%">
</div>
</a>
看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達到了想要的效果。
關鍵的時候來了。就是處理圖片。我們要把產品圖片做為背景的形式輸出即可以。把圖片的路徑寫在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;
}
注意、注意、注意，中要的事說三遍。重點就在于 css3 的新屬性 background-size: cove；
這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域。
是不是不明白，那就對了，挺不好理解。最好還是用實際效果來看看。
最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。
那么我們就來玩真的。直接上網整一張大圖的路徑放進去看看就知道了。
上某某網站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現在弄個不是正方形的圖片來試試效果。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic002.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
更改url里的路徑即可
出來的效果如下：
是不是自動調整了。
我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264
HTML：如下
<a href="">
<div class="cover-img" style="background-image: url(pic003.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
最終效果：
怎么樣，效果還可以吧！！不知道你們看出了什么了沒有。
第一張是寬形狀的圖片，是以高度填滿 div 的區域。
第二張是高形狀的圖片，是以寬度填滿 div 的區域。
全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。
例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務器要多請求一次.....等等問題！！做圖時的內容盡可能在正中間。
然后，不管客戶上傳什么鬼形狀的圖片，都不會產生布局變亂的情況。
獲取《vue3.0大公司后臺管理系統開發 正規開發流程項目實踐》視頻，
請點擊下面 “了解更多” 或 請關注微信公眾號《手把手擼碼前端》
HTML的世界里，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。
在HTML中，布局標簽主要用于控制頁面的結構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。
布局在我們前端開發中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。
而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。
下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發目標。
div標簽是一個塊級元素，它獨占一行，用于對頁面進行區域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>這是一個div元素
</div>
</body>
</html>
運行結果：
span標簽是一個內聯元素，它不獨占一行，用于對文本進行區域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>這是一個<span>span元素</span>。</p>
</body>
</html>
運行結果：
table標簽用于創建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。
<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創建出整齊劃一的數據表，讓信息的展示更加直觀明了。
需要注意的是：
示例代碼：
<!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>
運行結果：
<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。
<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>
運行結果：
示例代碼：
<!DOCTYPE html>
<htmml>
<head>
<meta charst="UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</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>
運行結果：
也可以使用CSS list-style-type屬性定義html無序列表樣式。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」
示例代碼：
<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type="a" start="2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value="20">第四項</li>
</ol>
<ol type="Ⅰ" start="2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>
運行結果：
同樣也可以使用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>計算機</dt>
<dd>用來計算的儀器</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>
運行結果：
以上就是HTML中常用的布局標簽及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的布局和交互效果。
掌握了這些HTML常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！
（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一定會一一解答的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
