html - 如何使用 CSS 使文本始终位于页面底部
问题描述
我有一个用纯 HTML 和 CSS 构建的简单表单,我想要实现的是它version text
位于页面底部。请参阅下面的图片我想要实现的目标。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Login form</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: 'Roboto', sans-serif;
box-sizing: border-box
}
body {
background-color: #f9fbff
}
.source-image {
width: 100%;
background-repeat: no-repeat;
background-size: auto;
position: fixed;
max-width: 100%;
display: block
}
#login-form {
width: 460px;
background: 0 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 20px 0
}
.input_img {
position: absolute;
bottom: 20px;
left: 13px;
height: 30px
}
#login-form h1 {
text-align: center;
margin-bottom: 60px;
color: #191c3c;
font-size: 30px
}
.logoHolder>img {
width: 60%;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
display: block
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form p a {
color: #191c3c;
text-decoration: underline;
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form .entryText {
font-size: 18px
}
#login-form p a:focus {
border: 1px solid #515772
}
#login-form label {
color: #4a4d67;
font-weight: 700;
margin-bottom: 10px !important
}
.input-box {
position: relative;
margin: 30px 0
}
.input-box input {
font-size: 15px;
color: #333;
border: 1px solid #51577245;
width: 100%;
line-height: 1.2;
font-size: 18px;
outline: 0;
background: #fff;
padding: 0 5px;
height: 72px;
border-radius: 5px;
padding-left: 57px;
box-shadow: 0 3px 11px 0 rgba(81, 87, 114, .2);
margin-top: 15px
}
.input-box input:focus {
border: 1px solid #515772
}
.input-box span::before {
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #515772;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
padding-left: 20px
}
.validation {
border-color: #c00000 !important;
margin-bottom: 7px;
}
.feedback {
color: #c00000;
}
::placeholder {
margin-left: 60px;
color: #8b8d9d;
font-size: 14px;
font-weight: 700;
}
.cursor {
width: 17px
}
.input-box span::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: linear-gradient(120deg, #2196F3, #FF5722);
transition: .5s
}
.focus+span::before {
top: -5px
}
.focus+span::after {
width: 100%
}
.login-btn {
display: block;
width: 100%;
height: 62px;
border: none;
background: #515772;
background-size: 200%;
color: #fff;
outline: 0;
cursor: pointer;
margin: 20px 0 0;
border-radius: 8px;
transition: .5s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 700
}
.login-btn:focus {
border: 2px solid #000
}
.login-btn:hover {
background-color: #2d3142
}
.bottom-links {
margin-top: 30px;
text-align: center;
font-size: 13px
}
.bottom-links>p>a {
text-decoration: underline;
}
.bottom-links>p {
margin-bottom: 10px;
}
@media (max-width:768px) {
#login-form {
top: 40%;
padding: 0;
}
.source-image {
display: none
}
}
@media (max-width:1440px) {
.source-image {
display: none
}
}
.version {
font-size: 14px;
margin-top: 10px;
}
.conta {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<main>
<div class="conta">
<form action="" id="login-form">
<div class="logoHolder">
</div>
<div class="input-box"><label for="username">Username</label><input id="username" name="username">
</div>
<div class="input-box"><label for="password">Password</label><input id="password" name="password"
type="password" placeholder=""></div><button type="submit" class="login-btn"
aria-label="Prijava gumb">Enter</button>
<div class="bottom-links">
<small class="version">v3.0.</small>
</div>
</form>
</div>
</main>
</body>
</html>
我想要实现的是:
任何人都可以帮我解决这个问题,实现这一目标的最佳方法是什么?有没有好心人能帮我解决这个问题?
解决方案
试试附加的代码,它肯定会工作,如果你遇到任何问题,请在评论中告诉我,我会尽力帮助你。
我对 CSS 进行了一些更改.bottom-links
并减少了一些 CSS。
我有一个建议给你,下次你编码时使用视口单位,比如vw和vh而不是px和%,因为它可以帮助你使你的网页/网站响应。
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: 'Roboto', sans-serif;
box-sizing: border-box
}
body {
background-color: #f9fbff
}
.source-image {
width: 100%;
background-repeat: no-repeat;
background-size: auto;
position: fixed;
max-width: 100%;
display: block
}
#login-form {
width: 460px;
background: 0 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 20px 0
}
.input_img {
position: absolute;
bottom: 20px;
left: 13px;
height: 30px
}
#login-form h1 {
text-align: center;
margin-bottom: 60px;
color: #191c3c;
font-size: 30px
}
.logoHolder>img {
width: 60%;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
display: block
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form p a {
color: #191c3c;
text-decoration: underline;
}
#login-form p {
font-size: 16px;
color: #333
}
#login-form .entryText {
font-size: 18px
}
#login-form p a:focus {
border: 1px solid #515772
}
#login-form label {
color: #4a4d67;
font-weight: 700;
margin-bottom: 10px !important
}
.input-box {
position: relative;
margin: 30px 0
}
.input-box input {
font-size: 15px;
color: #333;
border: 1px solid #51577245;
width: 100%;
line-height: 1.2;
font-size: 18px;
outline: 0;
background: #fff;
padding: 0 5px;
height: 72px;
border-radius: 5px;
padding-left: 57px;
box-shadow: 0 3px 11px 0 rgba(81, 87, 114, .2);
margin-top: 15px
}
.input-box input:focus {
border: 1px solid #515772
}
.input-box span::before {
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #515772;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
padding-left: 20px
}
.validation {
border-color: #c00000 !important;
margin-bottom: 7px;
}
.feedback {
color: #c00000;
}
::placeholder {
margin-left: 60px;
color: #8b8d9d;
font-size: 14px;
font-weight: 700;
}
.cursor {
width: 17px
}
.input-box span::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: linear-gradient(120deg, #2196F3, #FF5722);
transition: .5s
}
.focus+span::before {
top: -5px
}
.focus+span::after {
width: 100%
}
.login-btn {
display: block;
width: 100%;
height: 62px;
border: none;
background: #515772;
background-size: 200%;
color: #fff;
outline: 0;
cursor: pointer;
margin: 20px 0 0;
border-radius: 8px;
transition: .5s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 700
}
.login-btn:focus {
border: 2px solid #000
}
.login-btn:hover {
background-color: #2d3142
}
.bottom-links {
text-align: center;
font-size: 13px;
margin-top: 46.5vw;
}
@media (max-width:768px) {
#login-form {
top: 40%;
padding: 0;
}
.source-image {
display: none
}
}
@media (max-width:1440px) {
.source-image {
display: none
}
}
.version {
font-size: 14px;
margin-top: 10px;
}
.conta {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Login form</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<main>
<div class="conta">
<form action="" id="login-form">
<div class="logoHolder">
</div>
<div class="input-box"><label for="username">Username</label><input id="username" name="username">
</div>
<div class="input-box"><label for="password">Password</label><input id="password" name="password"
type="password" placeholder=""></div><button type="submit" class="login-btn"
aria-label="Prijava gumb">Enter</button>
</form>
</div>
<div class="bottom-links">
<small class="version">v3.0.</small>
</div>
</main>
</body>
</html>
推荐阅读
- autosys - 季度开始后第 40 天的作业触发
- reactjs - 带有按钮的antd表格分页
- python-3.x - 如何重命名日期时间类型的列名?
- javascript - 将ckeditor数据转换为html
- amazon-sumerian - AWS Sumerian 场景中的参数化
- c - 如何进行`if`检查输入的单词是否等于C中字符串列表中的某个单词?
- javascript - Playwright JS:如何计算动态表列的 SUM 和带有总值的断言?
- python - 循环并分配给熊猫数据框的更快方法?
- azure - 如何在存储帐户 blob 容器中引用 VHD - Imagereference Id
- database - 创建具有多个数据库的应用程序