HTML5 使用技巧分享 4 —— 将一行元素快速置于屏幕底部
HTML5 使用技巧分享 4 —— 将一行元素快速置于屏幕底部
Gorit
发布于 2021-12-09 14:39:46
发布于 2021-12-09 14:39:46
HTML 小技巧分享之 —— 快速将一行 div 元素 设置到底部
一、导语
很久都没有更新了，今天再更新一些使用的小技巧，今天给大家带来的内容是如何快速的将一行 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 不引用外部样式
但是这样会显得代码冗余，因此不建议这么做
<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
<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;
}今天的内容就到这里了，你学会了嘛！！！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/09/02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号