整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
格对齐
使用Bootstrap的栅格对齐样式,轻松实现垂直方向和水平方向的各种对齐效果，只需要引入Bootstrap的样式，并在页面中指定相应的Class名称即可。
2.各列中可指定如下样式
示例
下面示例的栅格布局,只有一行,在该行中指定列居中方式为垂直居中。该行总共有三列，各列也可以分别指定垂直对齐方式。第一列指定向上对齐，第二列遵循行指定的对齐方式，第三列指定向下对齐。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </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小时内与您取得联系。
