1.标题
1.1标题排版
超链接 a 标签：
标签：<a href="....." target=".....">央视网</a>
属性：
- href: 指定资源访问的url
- target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开
1.2标题样式
1.2.1CSS引入方式
| 名称 | 语法描述 | 示例 |
|---|---|---|
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对。 | <h1 style="xxx:xxx;">中国新闻网</h1> |
| 内部样式 | 定义<style>标签，在标签内部定义css样式 |
<style> h1 {...} </style> |
| 外部样式 | 定义<link>标签，通过href属性引入外部css文件 |
<link rel="stylesheet" href="css/news.css"> |
- 行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
- 内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）
- 外部样式：html和css实现了完全的分离，企业开发常用方式。
1.2.2颜色表示方式
| 表示方式 | 属性值 | 说明 | 取值 |
|---|---|---|---|
| 关键字 | 颜色英文单词 | red、green、 | red、green、 |
| rgb表示法 | rgb(r, g, b) | 红绿蓝三原色，每项取值范围：0-255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) |
| rgba表示法 | rgba(r, g, b, a) | 红绿蓝三原色，a表示透明度，取值：0-1 | rgb(0,0,0,0.3)、rgb(255,255,255,0.5) |
| 十六进制表示法 | #rrggbb | #开头，将数字转换成十六进制表示 | #000000、#ff0000、#cccccc，简写：#000、#ccc |
1.2.3设置字体颜色
color:设置文本内容的颜色
1.2.4CSS选择器
1.最为常见的三类选择器的写法?
元素选择器:标签名{...}
类选择器:.class属性值{...}
id选择器:#id属性值{...}
2.优先级:id选择器->类选择器->元素选择器
java
选择器名 {
css样式名：css样式值;
css样式名：css样式值;
}| 选择器 | 写法 | 示例 | 示例说明 |
|---|---|---|---|
| 元素选择器 | 元素名称 {...} | h1 {...} | 选择页面上所有的<h1>标签 |
| 类选择器 | .class属性值 {...} | .cls {...} | 选择页面上所有class属性为cls的标签 |
| id选择器 | #id属性值 {...} | #hid {...} | 选择页面上id属性为hid的标签 |
| 分组选择器 | 选择器1,选择器2{...} | h1,h2 {...} | 选择页面上所有的<h1>和<h2>标签 |
| 属性选择器 | 元素名称[属性] {...} | input[type] {...} | 选择页面上有type属性的<input>标签 |
| 属性选择器 | 元素名称[属性名="值"] {...} | input[type="text"] {...} | 选择页面上type属性为text的<input>标签 |
| 后代选择器 | 元素1元素2{...} | form input {...} | 选择<form>标签内的所有<input>标签 |
设置超链接取消下划线效果
java
a {
text-decoration: none;
}2.正文
2.1正文排版
2.1.1基本实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<!-- 2. 内部样式 -->
<style>
.publish-date {
color: #b2b2b2;
}
/* 设置超链接取消下划线效果 */
a {
text-decoration: none;
}
</style>
</head>
<body>
<!-- 定义网页标题, 标题内容： xxx -->
<h1 id="title">xxx</h1>
<!-- 定义一个超链接, 链接地址：https://x.x.x/, 链接内容：xx网 -->
<a href="https://x.x.x/" target="_blank">xx网</a>
<span class="publish-date">2024年05月15日 20:07</span>
<br>
<br>
<!-- 定义一个视频, video/news.mp4 -->
<video src="video/news.mp4" controls width="80%"></video>
<p>
内容
</p>
<p>
内容
</p>
<!-- 定义一张图片, img/1.gif -->
<img src="img/1.gif" alt="" width="100%">
<p>
内容
</p>
<p>
内容
</p>
<p>
内容
</p>
<img src="img/2.jpg" width="100%">
<p>
内容
</p>
<p>
内容
</p>
<img src="img/3.jpg" width="100%">
<p>
内容
</p>
<p>
内容
</p>
<img src="img/4.jpg" width="100%">
<p>
内容
</p>
<p>
内容
</p>
<p>
内容
</p>
<img src="img/5.jpg" width="100%">
<p>
内容
</p>
<img src="img/6.jpg">
</body>
</html>2.1.2常见标签
-
<video>视频标签- src：指定视频的url
- url（绝对路径/相对路径）
- controls：是否显示播放控件
- width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
- height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
-
<img>图片标签- src, width，height
-
<p>段落标签 -
<br>换行标签 -
<b>/ <strong>加粗<strong>具有强调语义 -
<u>/ <ins>下划线<ins>具有强调语义 -
<i> / <em>倾斜<em>具有强调语义 -
<s> / <del>删除线<del>具有强调语义 -
空格 -
<< -
>>
2.1.3路径表示
- 绝对路径
- 绝对磁盘路径(D:/xxx.jpg)
- 绝对网络路径(https://xxx.jpg)
- 相对路径
- 当前目录:./(可以省略)
- 上一级目录: . . /
2.2正文样式
html
/* 设置段落首行缩进 */
p {
text-indent: 2em; /* 首行缩进2em */
line-height: 2; /* 行高2倍 */
}3.布局
完成了标签及正文部分的排版制作，以及样式处理之后，那最后一步，我们就要来完成页面整体布局的设置了。页面是出于整个版面的正中心的，那这种呢，在布局中也称为 版心居中。
3.1功能实现
html
/* 新增样式 */
.news-content {
width: 70%; /* 宽度占70% */
margin: 0 auto; /* 横向居中 */
<!-- 包裹新闻内容的容器 -->
<div class="news-content">
}
</div>3.2盒子模型
组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)
注意事项:如果只需要设置某一个方位的边框、内边距、外边距,可以在在属性名后加上一位置,如:padding-top、padding-left, padding-right ...
3.2.1布局标签
- 标签：
<div><span> - 特点：
<div>标签：- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签：- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
3.2.2代码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div {
width: 200px; /* 宽度 */
height: 200px; /* 高度 */
box-sizing: border-box; /* 指定width height为盒子的高宽 */
background-color: aquamarine; /* 背景色 */
padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/
border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
}
</style>
</head>
<body>
<div>
A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
</div>
</body>
</html>我们可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：
备注：
- 上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：
- padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；
- padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；
- padding: 20px; -----------------------------> 表示上、右、下、左都是20px；
4.案例
4.1需求
参照Tlias智能学习辅助系统，完成员工管理页面的制作。
4.2代码实现
4.2.1顶部导航栏
4.2.1.1基本实现
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hmhvictory员工管理系统</title>
<style>
body {
margin: 0;
}
/* 顶栏样式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f1f1f1;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 加大加粗标题 */
.header h1 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
/* 文本链接样式 */
.header a {
text-decoration: none;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 顶栏 -->
<div class="header">
<h1>hmhvictory员工管理系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 其他部分可以在这里添加 -->
</body>
</html>4.2.1.2flex布局
- flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
- 通过给父容器添加flex属性,来控制子元素的位置和排列方式。
- flex布局相关的CSS样式：
4.2.2搜索表单
4.2.2.1表单标签
上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项 或 表单元素。
- 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
- 表单标签:
<form> - 表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
- GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
- POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
- 表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域
演示：
1). GET方式提交的表单
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="get">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
2). POST方式提交表单
将上述的表单提交方式由get，改为post
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="post">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
注意事项：
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。
html
用户名: <input type="text" name="username">4.2.2.2表单项标签
在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：
-
<input>: 表单项 , 通过type属性控制输入形式。
-
<select>: 定义下拉列表, 定义列表项 -
<textarea>: 文本域
演示：
创建一个新的表单项的html文件，具体内容如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="/save" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
图像: <input type="file" name="image"> <br><br>
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>
学历: <select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下：
而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。 接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：
4.2.2.3搜索表单实现
代码实现如下:
html
/* 搜索表单区域 */
.search-form {
display: flex;
align-items: center;
padding: 20px;
background-color: #f9f9f9;
}
/* 表单控件样式 */
.search-form input[type="text"], .search-form select {
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
/* 按钮样式 */
.search-form button {
padding: 5px 15px;
margin-left: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 清空按钮样式 */
.search-form button.clear {
background-color: #6c757d;
}
<!-- 搜索表单区域 -->
<form class="search-form">
<input type="text" name="name" placeholder="姓名" />
<select name="gender">
<option value="">性别</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select name="job">
<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" class="clear">清空</button>
</form>4.2.3表格数据展示
4.2.3.1基本实现
html
.table {
min-width: 100%;
border-collapse: collapse;
margin: 0 20px;
}
/* 设置表格单元格边框 */
.table td, .table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.avatar {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
<table class="table table-striped table-bordered">
<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="https://via.placeholder.com/50" alt="令狐冲" class="avatar"></td>
<td>讲师</td>
<td>2021-03-15</td>
<td>2023-07-30T12:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td><img src="https://via.placeholder.com/50" alt="任盈盈" class="avatar"></td>
<td>学工主管</td>
<td>2020-04-10</td>
<td>2023-07-29T15:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td><img src="https://via.placeholder.com/50" alt="岳不群" class="avatar"></td>
<td>教研主管</td>
<td>2019-01-01</td>
<td>2023-07-30T10:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>宁中则</td>
<td>女</td>
<td><img src="https://via.placeholder.com/50" alt="宁中则" class="avatar"></td>
<td>班主任</td>
<td>2018-06-01</td>
<td>2023-07-29T09:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>4.2.3.2表格标签
4.2.4底部版权区域
html
/* 页脚版权区域 */
.footer {
background-color: #8f8c8c;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 30px;
}
.footer .company-name {
font-size: 1.1em;
font-weight: bold;
}
.footer .copyright {
font-size: 0.9em;
}
<!-- 页脚版权区域 -->
<footer class="footer">
<p class="company-name">豪大大有限公司</p>
<p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>4.2.5版心居中
代码实现:
html
#container {
width: 80%;
margin: 0 auto;
}
<div id="container">
内容...
</div>总体代码:
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hmhvictory员工管理系统</title>
<style>
body {
margin: 0;
}
/* 顶栏样式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: hwb(195 54% 4%);
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(142, 204, 9, 0.1);
}
/* 加大加粗标题 */
.header h1 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
/* 文本链接样式 */
.header a {
text-decoration: none;
color: #333;
font-size: 16px;
}
/* 搜索表单区域 */
.search-form {
display: flex;
align-items: center;
padding: 20px;
background-color: white;
}
/* 表单控件样式 */
.search-form input[type="text"], .search-form select {
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
/* 按钮样式 */
.search-form button {
padding: 5px 15px;
margin-left: 10px;
background-color: hwb(195 54% 4%);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 清空按钮样式 */
.search-form button.clear {
background-color: #6c757d;
}
.table {
min-width: 100%;
border-collapse: collapse;
}
/* 设置表格单元格边框 */
.table td, .table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.avatar {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
}
/* 页脚版权区域 */
.footer {
background-color: #64bcd7;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 150px
}
.footer .company-name {
font-size: 1.1em;
font-weight: bold;
}
.footer .copyright {
font-size: 0.9em;
}
#container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<!-- 顶栏 -->
<div class="header">
<h1>hmhvictory员工管理系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 搜索表单区域 -->
<form class="search-form" action="#" method="post">
<input type="text" name="name" placeholder="姓名" />
<select name="gender">
<option value="">性别</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
<select name="position">
<option value="">职位</option>
<option value="班主任">班主任</option>
<option value="讲师">讲师</option>
<option value="学工主管">学工主管</option>
<option value="教研主管">教研主管</option>
<option value="咨询师">咨询师</option>
</select>
<button type="submit">查询</button>
<button type="reset" class="clear">清空</button>
</form>
<table class="table table-striped table-bordered">
<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="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
<td>讲师</td>
<td>2021-03-15</td>
<td>2023-07-30T12:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
<td>学工主管</td>
<td>2020-04-10</td>
<td>2023-07-29T15:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
<td>教研主管</td>
<td>2019-01-01</td>
<td>2023-07-30T10:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>宁中则</td>
<td>女</td>
<td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
<td>班主任</td>
<td>2018-06-01</td>
<td>2023-07-29T09:00:00Z</td>
<td class="btn-group">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 页脚版权区域 -->
<footer class="footer">
<p class="company-name">豪大大有限公司</p>
<p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
</div>
</body>
</html>最终效果展示:
