HTML 小技巧分享之 —— 快速将一行 div 元素 设置到底部
一、导语二、分析结构框架三、代码实现
-
- 3.1 不引用外部样式
- 3.2 引用外部 css 样式
一、导语
很久都没有更新了，今天再更新一些使用的小技巧，今天给大家带来的内容是如何快速的将一行 div 元素设置到屏幕底部，今天的主要内容有
-
- css 文件的引入，使用 link 标签，以及各个参数的解释
- 把元素置于文件底部的 css 样式编写
- div 标签的使用
二、分析结构框架
先给大家看一看效果图
这个样式我们需要做如下处理
HTML 部分
-
- 编写 HTML 代码
- 使用 div 标签编写好元素
- 然后就是 在 head 标签里直接设置样式，或者通过外部文件，引用 css 样式
CSS样式设置部分
4. 通过外部文件，通过 link 标签引用 css 样式文件。
5. 设置 width = 100%， height = 50px;
6. z-index: 设置 100
7. flex 布局，居中处理
三、代码实现
3.1 不引用外部样式
但是这样会显得代码冗余，因此不建议这么做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将一行元素置于底部</title>
<style>
div {
left: 0;
position: fixed;
bottom: 0;
/* top 0 就是顶部 */
width: 100%;
z-index: 100;
background: #343537;
display: flex;
justify-content: center;
color: #ffff;
}
</style>
</head>
<body>
<div class="bottom-item">
<p>Copyright @ 2019 XXXX </p>
</div>
</body>
</html> 3.2 引用外部 css 样式
推荐这种方式，这样可以使样式和内容分离的效果，优化效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将一行元素置于底部</title>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="bottom-item">
<p>Copyright @ 2019 XXXX </p>
</div>
</body>
</html> 这里通过link 引用外部样式，这是一个标准的写法
-
- type 表示样式的文件类型是 css 样式
- rel 表示调用的是一种样式
- href 你的 css 样式文件的路径
index.css
.bottom-item {
left: 0;
position: fixed;
bottom: 0;
/* top 0 就是顶部 */
width: 100%;
z-index: 100;
background: #343537;
display: flex;
justify-content: center;
color: #ffff;
} ![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)