html - 在外面绘制正方形包含 CSS
问题描述
html, body {
height: 100%;
font: 30px "2005_iannnnnCPU";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
.contain {
display: grid;
padding: 15px;
width: 60%;
height: 23%;
border: 3px solid #fff;
color: #fff;
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnnCPU";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus, input:focus{
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnnCPU";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
}
.login:focus {
background-color:white;
color: black;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neglected Moment</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="square"></div>
<div class="contain">
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user"></input>
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass"></input>
<button class="button login">login</button>
</div>
</div>
</body>
</html>
图片:
我想画正方形只是背景,但我的问题是包含。
当我在我的网页上绘制正方形时。我的旧代码(登录表单)会损坏。
我认为它与包含有关,但我不知道如何解决它。
谢谢你的帮助。
我可以删除这个红色部分吗?我希望我的登录表单居中,但现在它下降了
解决方案
从.contain
类中删除高度并使用绝对位置添加按钮
html,
body {
height: 100%;
font: 30px "2005_iannnnnCPU";
}
body {
margin: 0;
padding: 0;
background: #000;
}
.grid-container {
display: grid;
height: 100%;
color: #fff;
justify-items: center;
align-items: center;
}
/*
.square {
height: 50px;
width: 50px;
background-color: #fff;
}
*/
.contain {
display: grid;
padding: 15px 15px 50px;/*New css*/
width: 60%;
/*height: 23%;*/
border: 3px solid #fff;
color: #fff;
position: relative;/*New css*/
margin-bottom: 60px; /*New css*/
}
.grid-items {
margin: 1% 1%;
}
.ans {
margin: 1% 1%;
font: 20px "2005_iannnnnCPU";
letter-spacing: 2px;
}
input[type=text] {
background-color: none;
background: transparent;
border: 2px solid #555;
color: #fff;
}
input[type=text]:focus {
border: 2px solid #fff;
}
textarea:focus,
input:focus {
outline: none;
}
.button {
border: none;
color: white;
padding: 2% 2%;
margin: 6% 6%;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.login {
background-color: #000;
font: 30px "2005_iannnnnCPU";
color: #fff;
border: 2px solid #fff;
width: 50%;
-ms-transform: translateX(40%);
transform: translateX(40%);
position: absolute;
bottom: -50px;
}
.login:focus {
background-color: white;
color: black;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neglected Moment</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<div class="contain">
<label class="grid-items">Username</label>
<input type="text" class="ans" id="ans-user" name="ans-user"/>
<label class="grid-items">Password</label>
<input type="text" class="ans" id="ans-pass" name="ans-pass"/>
<button class="button login">login</button>
</div>
</div>
</body>
</html>
推荐阅读
- python - 如何查找加载 .txt 文件时发生的 IndexError 的原因并解决?Python
- javascript - 如何根据 React 中的用户角色显示表格行
- java - 在即时应用程序中使用复古合身和截击时出现错误响应
- time - 延时图,单系列,有时间延迟
- linked-list - 链表练习标记方案错误
- objdump - 了解 RiscV objdump
- php - jQuery bootgrid:将 PHP 变量传递给 AJAX
- python - 如何打印嵌套在字典中的字典中的所有内容
- python - 尝试附加 JSON 文件的 Python 错误
- python - 从 object_detection.protos 导入 string_int_label_map_pb2 ModuleNotFoundError: