代码审查简易框和表格代码html5 css3



我已经编码了一个小表格,它是一个较大网页的一部分,根据规范,我正在采取小步骤。

我很好奇我能以某种方式做得更好。如果我可以简化代码或使用其他更好的命令或语法?

也许有一些冗余?

也有一种很好的方法来移动发送按钮,以便它以中间为中心,并且有没有办法将其封闭到底部而没有太多麻烦?或将占位符文本移至左侧?

我将附上指向笔的链接,您可以在那里查看代码。

https://codepen.io/anon/pen/pynprw

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>
<body>
  <form action="#">
    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>
    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>
    <button type="submit">Senden</button>
  </form>
</body>
</html>

我通过添加保证金属性来调整按钮的位置并评论变换属性来更改您的代码。但是,如果您可以使用诸如Bootstrap或材料设计之类的样式库,则可以更快地整理表格

h2 {
    margin: 0;
    padding: 0;
	margin-bottom: 2.3rem;
}
form {
  float: left;
  display: inline-block;
  padding: .5rem;
  height: 205px;
  width: 168px;
  border: 2px solid black;
  font-family: Sans-Serif;
  font-size: 12px;
}
.input-wrapper {
  margin-bottom: .5rem;
}
label {
  width: 50px;
  display: inline-block;
  text-align: left;
 font-family: Sans-Serif;
font-size: 14px;
}
input {
  width: 90px;
  padding: .5rem;
  height: 3px;
  border: 2px solid black;
  text-align: left;
}
button {						
  padding: .5rem;
  display: block;
  width: 55%;	
  background: lightgrey;
  color: black;
  border: 2px solid black;
  text-align: center;
  border-radius: 5px;
  font-size: inherit;
  /* transform: translate(50%, 50%); */
  margin: 60px auto;
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>
<body>
  <form action="#">
    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>
    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>
    <button type="submit">Senden</button>
  </form>
</body>
</html>

最新更新