我怎样才能用HTML5& CSS3

时间:2017-08-09 07:27:00

标签: html5 css3

请帮助我,我可以使用我的CSS制作该表格....

like this,

1 个答案:

答案 0 :(得分:2)

<div class="container">
  <table>
    <tr>
      <td><p>Name</p><span>Add your name</span></td>
      <td><input type="text" /></td>
    </tr>
     <tr>
      <td><p>Email</p><span>Enter a valid email</span></td>
      <td><input type="text" /></td>
    </tr>
     <tr>
      <td><p>Phone</p><span>Add a phone number</span></td>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><p>Priority</p><span>Priority level</span></td>
      <td><select><option>Low</option></select></td>
    </tr>
    <tr>
      <td><p>Type</p><span>Type of contact</span></td>
      <td><select><option>Website Update</option></select></td>
    </tr>
    <tr>
      <td><p>Message</p><span>Type your Message</span></td>
      <td><textarea></textarea></td>
    </tr>
  </table>
  <br>
  <button>Submit</button>
</div>
  

CSS

body{
text-align:center;
}
.container{
  display: inline-block;
  width: 800px;
  height: 600px;
  background-color: #ebf4fb;
  border: 2px solid #d3e7f2;
}
table{
  display: inline-block;
}
td{
  text-align: right;
  padding:5px 10px;
}
td > p{
  margin: 0;
  padding: 0;
  font-size:11pt;
  font-weight: bold;
}
td > span{
  font-size: 9pt;
}

td > input[type=text]{
  width: 400px;
  height: 30px;
}

td > textarea{
  width: 100%;
  height: 200px;
}

button{
  width: 140px;
  height: 50px;
  background-color: black;
  color: white;
  border:none;
}

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