1つ：静的ページと動的ページの違い
1.静的ページ：
（1）クライアントはブラウザーを使用して要求を送信し、アクセスする必要のあるページをサーバーに通知してから、サーバーがファイルからコンテンツを取得します。ユーザーのニーズに応じて、クライアントに返します。端末
（2）はデータベースに接続できず、内容を変更するたびにファイルを操作する必要があります。
2.動的ページ
（1）は引き続き直接要求されますが、Webサーバーによって判断されます。静的リソースの場合は直接要求されます。動的の場合は動的にスプライスされてから戻ってきた。
2：静的Webサイト
購入サービスを構築する方法-> jdkとtomcatをインストールし、環境変数を構成する-> Webファイルを指定されたフォルダーに配置
し、ドメイン名とtomcatのポート番号に直接アクセスします。
3：動的なWebサイトを構築する方法。
ルートが異なり、方法も異なる場合があります。Springフレームワークの場合は、パックして実行するだけで
構成できます。技術的実現
フロントエンド：html + css + js + jquery + bootstrap（icon）+ less（cssの書き込みを最適化））+ ajax（データインタラクション）
バックエンド：SpringBoot（フレームワーク）+ myBatis（またはJDBC操作データベース）+ Thymeleafテンプレートエンジン
4：フロントエンドページの基本知識
（1）ページのコンテンツはハードコーディングされていませんが、ajaxを介して動的リクエストの場合、例としてTaobaoホームページを取り上げます。Taobaoホームページのソースコードは1,000行を超えるコードのみを削除しますが、Taobaoページのデータはすべて動的です。このように、将来データを変更する必要がある場合は、管理システムを経由するだけで済みます。データベースを変更するだけで、フロントエンドページでの操作はほとんどありません。（動的ページ）
補足：ポジショニングの関連説明
：CSSは、3つの基本的な位置決め機構がある通常のフロー、浮動小数点、および絶対位置を。
特に指定がない限り、すべてのボックスは通常のストリームに配置されます。つまり、通常のストリーム内の要素の位置は、（X）HTML内の要素の位置によって決定されます。
1.CSS位置属性
静的
要素ボックスが正常に生成されます。ブロックレベルの要素は長方形のボックスを生成します。ドキュメントフローの一部として、インライン要素は1つ以上のラインボックスを作成し、それらを親要素に配置します。
相対
要素フレームは、特定の距離だけオフセットされています。要素は未配置の形状を保持し、元々占有していたスペースが残ります。（配置されていない前の要素に対して）
ブロックレベルのボックスは、通常のフローで最初に生成されたボックスのタイプに関係なく、絶対要素が配置された後に生成されます。
（テキストフロー外）重複している場合は、z-indexを使用して、z軸方向の表示優先度を設定します。
絶対位置の要素の位置は、最も近い位置の祖先要素を基準にしています。要素に位置のある祖先要素がない場合、次に、元の包含ブロックに対する相対的な位置。
固定
要素ボックスの動作は、位置を絶対に設定するのと似ていますが、それを含むブロックはウィンドウ自体です。（これもテキストフローから外れていますが、彼はウィンドウを配置しています。ウィンドウは常に特定の位置に固定されています）
フローティング
フローティングフレームは、その外縁が収容フレームまたは別のフローティングフレームの境界に接触するまで、左または右に移動できます。
フローティングボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフローにあるブロックボックスは、フローティングボックスが存在しないかのように動作します。
ボックス1が右に浮くと、ドキュメントフローを離れ、右端が収容ボックスの右端に触れるまで右に移動します。
ボックス1が左に浮くと、ドキュメントフローを離れ、左に移動します。タッチの左端が収容ボックスの左端に接触します。ドキュメントフローに含まれなくなったため、スペースを占有せず、実際にはボックス2を覆い、ボックス2が表示されなくなります。
3つのボックスすべてを左に移動すると、ボックス1は収容ボックスに触れるまで左に浮き、他の2つのボックスは前の浮きボックスに触れるまで左に浮きます。
収容フレームが狭すぎて水平に配置された3つのフローティング要素を収容できない場合、他のフローティングブロックは十分なスペースができるまで下に移動します。フローティング要素の高さが異なる場合、下に移動すると、他のフローティング要素によって「スタック」する可能性があります。
子要素がフロートし、親要素がフロートをクリアします
.clearfix:after{
content: "";
display: block;
clear: both;
}
（2）クラスを追加して特定の効果を実現するには、
これは、クリックイベントを通じてクリックされた現在のノードにtb-selectedクラスを追加することによって実現される、淘宝網の商品タイプ選択の実現です。
たとえば、淘宝網の製品詳細モジュールは
、選択したクラスを追加することによって実装され、以下はdisplay：noneによって実装されます。
5：体重の問題
（1）デモのデモンストレーション
（2）体重の表
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
权重
!important 正无穷
行间样式 1000
id 100
calss | 属性 | 伪类 10
标签|伪元素 1
通配符 0
255进制
6：単純なカルーセル図の実現
<!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>