网页前端开发（基础进阶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标签包裹整个内容，统一调节其宽高以及各种边距。

示例代码

<!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>

运行结果：