整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
格對齊
使用Bootstrap的柵格對齊樣式,輕松實現垂直方向和水平方向的各種對齊效果，只需要引入Bootstrap的樣式，并在頁面中指定相應的Class名稱即可。
2.各列中可指定如下樣式
示例
下面示例的柵格布局,只有一行,在該行中指定列居中方式為垂直居中。該行總共有三列，各列也可以分別指定垂直對齊方式。第一列指定向上對齊，第二列遵循行指定的對齊方式，第三列指定向下對齊。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" > </head> <body> <div class="container"> <div class="row bg-info align-items-center" style="height: 100vh;"> <div class="col bg-primary align-self-start" style="height: 20vh;"> 向上對齊 </div> <div class="col bg-secondary" style="height: 20vh;"> 遵循行指定的對齊方式 </div> <div class="col bg-success align-self-end" style="height: 20vh;"> 向下對齊 </div> </div> </div> </body> </html>
柵格對齊之垂直對齊示例
示例
示例的柵格為一行，三列，每列占六分之一的行寬
<!DOCTYPE html> <html> <head> <link rel="stylesheet" > </head> <body> <div class="container"> <div class="row bg-info justify-content-start" style="height: 100vh;"> <div class="col-2 bg-success" style="height: 20vh;"> </div> <div class="col-2 bg-danger" style="height: 20vh;"> </div> <div class="col-2 bg-dark" style="height: 20vh;"> </div> </div> </div> </body> </html>
水平對齊之靠左對齊
水平對齊之居中對齊
水平對齊之靠右對齊
水平對齊之均勻排列
水平對齊之分散排列
望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
【技術等級】初級
【承接文章】《圖片在容器中產生的底部間隔，CSS可以巧妙解決，前端原理很重要》
本文重點講解利用CSS技術設置HTML元素的背景，包括背景顏色和背景圖片，這樣可以讓你的頁面更加美觀。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
背景屬性是指可以為HTML中的頁面、塊級元素、內聯元素等設置背景外觀的效果。這里一定要注意，背景屬性并不是只能為頁面背景設置的，也可以為HTML文檔中任意元素設置背景的。這一組CSS屬性包括以下幾個：
background-color
background-image
background-repeat
background-position
background-attachment
一、設置背景顏色：
CSS利用 background-color 屬性設置元素的背景顏色
該屬性有多種取值：
十六進制顏色代碼，例如：background-color:#ff0000。
十進制顏色代碼，例如：background-color:rgb(255,0,0)。
帶有透明度通道的十進制顏色代碼，例如：background-color:rgba(255,0,0,0.3)。
顏色英文單詞，例如：background-color:red。
顏色三要素模式代碼，例如：background-color:hsl(0,100,100)。
帶有透明度通道的顏色三要素模式代碼，background-color:hsla(0,100,100,0.3)。
上述取值較為常用的是“十六進制顏色代碼”、“帶有透明度通道的十進制顏色代碼”和“顏色英文單詞”。下面列舉幾個代碼實例。
p{background-color:#ff0000;} //設置段落的背景為紅色
body{background-color:#cccccc;} //設置整個文檔的背景為灰色
二、設置背景圖片：
CSS利用 background-image 屬性設置元素的背景圖片
該屬性的取值格式如下所示：
background-image:url(Image_URL);
該屬性需要在 url() 中指定一個圖片的路徑和文件名，代碼示例如下所示。
body{background-image:url(images/back.jpg);
上述代碼設置整個頁面的背景圖片為images文件夾下的名為back.jpg的圖片文件
三、設置背景圖片的重復平鋪方式：
CSS利用 background-repeat 屬性設置背景圖片的平鋪方式
該屬性有多種取值：
repeat，默認值，背景圖片平鋪。
no-repeat，背景圖片不平鋪。
repeat-x，背景圖片水平平鋪。
repeat-y，背景圖片垂直平鋪。
注意：該屬性必須結合 background-image 屬性共同使用。
四、設置背景圖片出現的位置：
CSS利用 background-position 屬性設置背景圖片出現的位置
1、可以取值為特定的單詞組合。
該種取值可以選取以下幾種對齊方式：
水平方向：left（左對齊）、right（右對齊）。
垂直方向：top（頂對齊）、bottom（底對齊）。
居中對齊：center。
上述對齊方式拼湊起來，可以下列形成9種取值方式：
top left, 背景圖片頂部居左，位于頁面的左上角。
top center, 背景圖片頂部居中，位于頁面的上方。
top right, 背景圖片頂部居右，位于頁面的右上角。
center left, 背景圖片中部居左，位于頁面的中部左側。
center center, 背景圖片中部居中，位于頁面的正中心。
center right, 背景圖片中部居右，位于頁面的中部右側。
bottom left, 背景圖片底部居左，位于頁面的右下角。
bottom center, 背景圖片底部居中，位于頁面的下方。
bottom right, 背景圖片底部居右，位于頁面的右下角。
注意：若只選取一個對齊方式，則第二個默認為center。
2、可以取值為帶有單位的固定坐標值：
格式：background-position:x y;
例如：background-position:100px 300px;
3、以百分比為單位的坐標值：
格式：background-position:x% y%;
例如：background-position:20% 15%;
注意：該屬性的使用必須同時具備下列兩個條件。
具備background-image屬性，也就是必須帶有背景圖片。
background-repeat屬性不能取值為repeat，也就是背景圖片不平鋪。
五、設置背景圖片是否固定或隨著頁面的其余部分滾動：
該屬性有多種取值：
scroll，默認值，背景圖片隨頁面的其余部分滾動。
fixed，背景圖片固定。
下一篇文章中，小海老師會以本篇文章講述的幾個屬性來帶領大家實踐一些實例。對于渴望在前端開發道路上前進的你一定不能錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
格是組織和顯示數據的一種有效方式，無論是在文檔中還是網頁上。良好的表格設計可以提高信息的可讀性和易理解性。本文將詳細介紹如何創建和格式化表格，并提供一些實例。
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
格式化表格包括調整表格的樣式、布局和顏色等，以提高其可讀性和美觀性。
在HTML中，格式化通常通過CSS完成。
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
假設我們需要創建一個3x3的表格，顯示一個小型團隊的成員信息。
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 25px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Position</th>
<th>Email</th>
</tr>
<tr>
<td>Alice</td>
<td>Manager</td>
<td>alice@example.com</td>
</tr>
<tr>
<td>Bob</td>
<td>Developer</td>
<td>bob@example.com</td>
</tr>
<tr>
<td>Charlie</td>
<td>Designer</td>
<td>charlie@example.com</td>
</tr>
</table>
</body>
</html>
在這個HTML實例中，我們創建了一個帶有條紋效果的表格，表頭有綠色背景和白色文字，每個單元格都有適當的填充和邊框。
創建和格式化表格是一項基本技能，無論是在文檔編輯器還是HTML中。一個良好格式化的表格不僅能有效傳達信息，還能提升整體文檔或網頁的美觀性和專業性。通過實踐這些技巧和使用示例作為參考，你可以創建出既實用又吸引人的表格。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
