Jinsi ya kumwiza: Habari ya barua pepe

Mafunzo ya kumwiza habari ya barua pepe kwa CSS.

Kumwambia habari yetu ya jahili

Mwongozo wa Lorem ipsum kuhusu sababu inayoweza kumtumia habari yetu ya jahili blabla. Mwongozo wa Lorem ipsum kuhusu sababu inayoweza kumtumia habari yetu ya jahili blabla. Mwongozo wa Lorem ipsum kuhusu sababu inayoweza kumtumia habari yetu ya jahili blabla.

亲自试一试

Jinsi ya kumwiza habari ya jahili

Kipimo cha kwanza - Ongeza HTML:

Tumia elementi ya <form> kuandaa mawingu. Unaweza kueleza zaidi kwenye mafunzo yetu ya PHP.

Kisha ya kila kiini kwa kila mawingu na kichwa cha kufikia:

<form action="action_page.php">
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="Email address" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

第二步 - 添加 CSS：

/* 为表单元素设置样式，使其周围带有边框 */
form {
  边框: 4px 实线 #f1f1f1;
}
/* 为容器添加一些内边距和灰色背景色 */
.container {
  填充: 20px;
  背景颜色: #f1f1f1;
}
/* 设置输入元素和提交按钮的样式 */
input[type=text], input[type=submit] {
  宽度: 100%;
  填充: 12px;
  margin: 8px 0;
  显示: 行内块;
  边框: 1px 实线 #ccc;
  box-sizing: border-box;
}
/* 为复选框添加外边距 */
input[type=checkbox] {
  margin-top: 16px;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  背景颜色: #04AA6D;
  颜色: white;
  边框: none;
}
input[type=submit]:hover {
  透明度: 0.8;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单