在外面绘制正方形包含 CSS

【问题标题】：draw square outside contain CSS在外面绘制正方形包含 CSS
【发布时间】：2020-09-02 12:34:00
【问题描述】： 

 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>

图片：

我想画正方形只是作为背景，但我的问题是包含。

当我在我的网页上绘制正方形时。我的旧代码（登录表单）会损坏。

我想包含，但我不知道如何解决它。

感谢您的帮助。

我可以删除这个红色部分吗？我希望我的登录表单居中，但现在它下降了

【问题讨论】：

  • 为什么不在内容周围使用边框；因为这似乎很容易解决问题？
  • Fieldset
  • 好的，这是个好主意。

标签： html css web draw shapes


【解决方案1】：

从.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>

【讨论】：

  • 不错的答案。我会添加位置：相对；到 .grid-container，所以 .container 中的绝对位置将是相同的，无论主体的高度如何。
【解决方案2】：

问题出在你的

.contain { height: 23%;};

我将它更改为 65%，它在 sn-p 中工作，但您应该尝试它以获得所需的显示高度。

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: 65%;
  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="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>

【讨论】：

    【解决方案3】：

    为什么不是字段集：

    https://jsfiddle.net/mplungjan/utpnxfca/

    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;
  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;
}
    <div class="grid-container">
  <div class="square"></div>
  <fieldset class="contain">
    <legend>Login</legend>
    <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>
  </fieldset>
</div>

    【讨论】：

    • 如何将登录表单设置为顶部方形的 Ycenter
    • 请提出一个新问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-03
    • 1970-01-01
    • 1970-01-01
    • 2013-11-29
    • 2012-12-10
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode