一：静态页面和动态页面的区别
1.静态页面：
（1）客户端使用浏览器发送请求，告诉服务器我需要访问哪一个页面，然后服务器根据用户的需要从文件中取出内容， 然后返回给客户端
（2）无法连接数据库， 每次改变内容都要去操作文件。
2.动态页面
（1）还是直接请求， 但是会经过web server判断， 如果是静态资源就直接请求， 如果是动态， 就动态拼接， 然后再返回。
二：如何搭建静态网站
购买服务->安装jdk和tomcat以及配置好环境变量->把web文件放到指定的文件夹下即可
然后直接访问域名加上tomcat的端口号即可。
三：如何搭建动态网站
路线不一样，方法可能也不一样， 如果是spring框架， 就打包运行即可
补：技术实现
前端： html + css + js + jquery + bootstrap(图标) + less(优化写css) + ajax(数据交互)
后端：SpringBoot(框架) + myBatis(或者JDBC操作数据库) + Thymeleaf模板引擎
四：前端页面的基础知识
（1）一个页面的内容都不是写死的， 而是通过ajax动态请求过来的，以淘宝首页为例，淘宝首页的源代码去掉只有1000多行的代码，而淘宝页面的数据全是动态请求得到的，这样做在以后需要修改数据时， 只需要通过管理系统去修改数据库就行， 对前端的页面几乎不用操作。（动态页面）
补: 定位的相关解释
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
1.CSS position 属性
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。（相对于上一个没有定位的元素进行定位）
absolute
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
（脱离文本流） 用如果重叠用z-index来设置z轴方向上的显示优先级
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。(也是脱离文本流， 但是他是对于窗口定位， 就是一直固定在某个位置)
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
子元素浮动， 父元素清除浮动
.clearfix:after{
content: "";
display: block;
clear: both;
}
（2）通过添加一个class来实现特定的效果，
这是淘宝的商品类型选着实现，就是通过点击事件，给点击的当前这个节点添加一个tb-selected类实现的。
在比如淘宝的商品详情模块
上面是通过添加selected类实现， 下面是通过display:none实现。
五：权值问题
（1）demo演示
（2）权值表
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
权重
!important 正无穷
行间样式 1000
id 100
calss | 属性 | 伪类 10
标签|伪元素 1
通配符 0
255进制
六：简单轮播图实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
.box{
width: 600px;
height: 400px;
margin-top: 300px;
margin-left: 500px;
position: relative;
}
.box img{
width: 600px;
height: 400px;
}
ul li{
transition: 2s;
position: absolute;
opacity: 0;
}
.box ul{
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
<li><img src="./img/5.jpg" alt=""></li>
</ul>
</div>
<script src="./jquery-3.5.1.js"></script>
<script>
$(function(){
var cnt = 0;
var timer = setInterval(function(){
$("ul li").css("opacity", 0);
$("ul li").eq(cnt).css("opacity", 1);
cnt = (cnt + 1) % 5;
}, 2000);
});
</script>
</body>
</html>
转载：https://blog.csdn.net/qq_45432665/article/details/109955396