网页前端开发（基础进阶1）

颜色表示方法3种：

1.关键字：

color：green； gray red yellow

2.rgb表示法：红，绿，蓝三原色。rgb（r，g，b），r表示红色，g表示绿色，b表示蓝色。

color: rgb(87, 107, 149);

3.rgba表示法：是rgb表示法的进阶，rgb（r，g，b，a），r表示红色，g表示绿色，b表示蓝色，a表示透明度。（0表示完全透明，1表示完全不透明）

color: rgba(87, 107, 149,0.5);

4.十六进制表示法：rgb（r，g，b）的r范围在0--256之内。可以使用十六进制表示，范围00--ff。

color: "#ff0000";

文字处理 表示一个段落

<body>



文本加粗

***网消息

***网消息

文本加下划线

***网消息

<ins>***网消息</ins>

文本倾斜

***网消息

***网消息

文本加删除线

<s>***网消息</s>

<del>***网消息</del>



</body>

文本加粗可使用或者标签。

文本加下划线可使用或者<ins>标签。

文本倾斜可使用或者标签。

文本加删除线可使用<s>或者<del>标签。

空格可使用 &nbsp；

< 可使用 &lt；

> 可使用 gt；

设置行高

<style>

p{

line-height:2;

}

</style>

对于段落，设置2倍行高。

首行缩进

<style>

p{

text-index：2em； //首行缩进2个字符

}

</style>

对于段落，首行缩进。

或直接使用&nbsp表示空格



  ***网消息 //缩进两个空格

盒子模型

盒子：页面内所有元素（标签）都可以看作一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角，可以更方便的进行页面布局。

盒子模型的组成：内容区域（content），内边距区域(padding)，边框区域(border)，外边距区域(margin)。

常用的2种标签：

1.div标签

一行只显示一个div标签（独占一行）

宽度默认为父元素的宽度，高度默认撑开

可以设置宽高（width，height）

2.span标签

一行可以显示多个span标签

宽度和高度默认由内容撑开

不可以设置宽高（width，height）

盒子模型通常使用div标签包裹整个内容，统一调节其宽高以及各种边距。

示例代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理</title>
  <style>
    #all{
      width: 80%;
      margin: 0 auto;
    }
    .navbar{
      background-color: rgb(170, 170, 170);
      display: flex;/*弹性布局*/
      justify-content: space-between;/*左右对齐*/
      align-items: center;/*垂直居中*/
      padding: 5px;
    }
    .navbar h1{
      margin: 0;/*去掉h1标签的默认间距*/
      font-weight: bold;/*加粗*/
      color: white;/*白色文字*/
      font-family: "楷体";
    }
    .navbar a{
      color: white;
      font-weight: bold;/*加粗*/
      text-decoration: none;/*取消下划线*/
      align-items: center;/*垂直居中*/
    }
    .search-from{
      display: flex;
      flex-wrap: nowrap;/*换行*/
      align-items: center;/*垂直居中*/
      gap: 10px;/*间距*/
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .search-from input,select{
      padding: 5px;
      width: 220px;
    }

    table{
      width: 100%;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid rgb(0, 0, 0);/*边框*/
      padding: 5px;
      text-align: center;
    }
    .footer{
      background-color: #b5b3b3;
      color: white;
      text-align: center;
      padding: 10px 0;
      margin-top: 30px;
    }
  </style>
</head>
<body>
<div id="all">
  <div class="navbar">
     <h1>tlias 智能学习辅助系统</h1>
      <a href="">退出登录</a>
  </div>

  <form class="search-from" action="/search" method="post">
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" placeholder="请输入姓名">

    <label for="gender">性别：</label>
    <select name="gender" id="genser">
      <option value=""></option>
      <option value="1">男</option>
      <option value="2">女</option>
    </select>

    <label for="position">职位：</label>
    <select name="position" id="position">
      <option value=""></option>
      <option value="1">班主任</option>
      <option value="2">讲师</option>
      <option value="3">学工主管</option>
      <option value="4">教研主管</option>
      <option value="5">咨询师</option>
    </select>

    <button type="submit">查询</button>
    <button type="reset">清空</button>
  </form>

  <table>
    <!--  表头  -->
    <thead>
      <!-- 定义一行 -->
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>头像</th>
        <th>职位</th>
        <th>入职日期</th>
        <th>最后操作时间</th>
        <th>操作</th>
      </tr>
    </thead>
      
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td><img src="img/y2.png"></td>
        <td>班主任</td>
        <td>2020-01-01</td>
        <td>2025-01-01</td>
        <td>
          <button type="button">修改</button>
          <button type="button">删除</button>
        </td>
      </tr>

      <tr>
        <td>李四</td>
        <td>女</td>
        <td><img src="img/y2.png"></td>
        <td>讲师</td>
        <td>2020-01-01</td>
        <td>2025-01-01</td>
        <td>
          <button type="button">修改</button>
          <button type="button">删除</button>
        </td>
      </tr>

      <tr>
        <td>王五</td>
        <td>男</td>
        <td><img src="img/y2.png"></td>
        <td>班主任</td>
        <td>2020-01-01</td>
        <td>2025-01-01</td>
        <td>
          <button type="button">修改</button>
          <button type="button">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  
   <footer class="footer">
        <p>cyy有限公司</p>
        <p>版权，时间2025.5.9</p>
      </footer>
</div>
</body>
</html>

运行结果：