html2+css打造风格化网站，轻松开发禁毒主题网站

前端

2023-07-15 17:20:17

轻松构建禁毒主题网站：使用 HTML2 + CSS 快速上手

打造一个专业的禁毒主题网站

打造网站的基础：HTML2 + CSS

HTML2 表格标签：创建表格结构

表格标签是构建网站表格的基石。它们允许我们定义表格的行、列和标题。通过使用 table、tr、td、th、colspan 和 rowspan 标签，我们可以创建复杂的表格布局。

列表标签：呈现有序和无序列表

列表标签用于创建列表。使用 ul 和 ol 标签，我们可以创建无序和有序列表，分别使用点和数字对列表项进行编号。

表单标签：收集用户输入

表单标签使我们能够创建用户输入界面。form 标签定义表单，而 input、button、textarea、select 和 option 标签用于创建输入框、按钮、文本域、下拉列表和选项。

CSS 层叠样式表：控制外观

CSS 用于控制网页的外观，包括字体、颜色、布局等。它通过定义样式表来指定元素的视觉属性。

CSS 的 Box 模型：定义元素布局

CSS 的 Box 模型规定了网页元素的布局方式。它将每个元素视为一个带有边框、内边距和外边距的矩形框。

按钮：创建交互式界面

使用 CSS，我们可以创建各种按钮，用于执行操作或触发事件。我们可以定义按钮的大小、形状、颜色和边框。

并列排版示例：排列元素

CSS 允许我们对元素进行并列排版，即水平排列。我们可以使用 display 属性将元素设置为 inline-block 或 flex，以控制它们在页面上的排列方式。

position：控制元素位置

position 属性允许我们控制网页元素在页面中的位置。我们可以将元素定位为 static（默认）、relative、absolute 或 fixed，以实现各种布局。

项目：禁毒主题网站

使用 HTML2 和 CSS，我们可以构建一个以禁毒为主题的网站，包括登录、注册和人员名单表格。

示例代码：index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>禁毒网站</h1>

  <form action="login.php" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" value="登录">
  </form>

  <form action="register.php" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" value="注册">
  </form>

  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>22</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

示例代码：style.css

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #000000;
  font-size: 24px;
}

form {
  margin: 20px 0;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], input[type="password"] {
  width: 200px;
  height: 25px;
  padding: 5px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  width: 100px;
  height: 30px;
  background-color: #000000;
  color: #ffffff;
  border: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 5px;
}

th {
  text-align: center;
  background-color: #f5f5f5;
}