Uno: La diferencia entre una página estática y una página dinámica
1. Página estática:
(1) El cliente usa un navegador para enviar una solicitud, le dice al servidor qué página necesito visitar, y luego el servidor recupera el contenido del archivo. según las necesidades del usuario, y luego lo devuelve al cliente. El terminal
(2) no puede conectarse a la base de datos, y el archivo debe ser manipulado cada vez que se cambia el contenido.
2. La página dinámica
(1) todavía se solicita directamente, pero será juzgada por el servidor web. Si es un recurso estático, se solicitará directamente. Si es dinámica, se empalmará dinámicamente y luego regresó.
Dos: Cómo construir un sitio web estático
Servicio de compra -> instalar jdk y tomcat y configurar variables de entorno -> poner el archivo web en la carpeta especificada
y luego acceder directamente al nombre de dominio más el número de puerto de tomcat.
Tres: Cómo construir un sitio web dinámico. La
ruta es diferente, y el método puede ser diferente. Si se trata de un marco de primavera, simplemente empaquételo y ejecútelo para
hacer lo siguiente: Realización técnica
front-end: html + css + js + jquery + bootstrap (icono) + less (optimizar la escritura de CSS)) + ajax (interacción de datos)
backend: SpringBoot (framework) + myBatis (o base de datos de operaciones JDBC) + motor de plantillas Thymeleaf
4: Conocimiento básico de las páginas de front-end
(1) El contenido de una página no está codificado , sino a través de ajax Para la solicitud dinámica, tome la página de inicio de Taobao como ejemplo. El código fuente de la página de inicio de Taobao elimina solo más de 1000 líneas de código, mientras que los datos de la página de Taobao son todos dinámicamente De esta manera, cuando necesite modificar los datos en el futuro, solo tendrá que pasar por el sistema de gestión, solo modificar la base de datos, casi sin operación en la página de inicio. (Página dinámica)
Suplemento: Explicación relevante del posicionamiento
CSS tiene tres mecanismos de posicionamiento básicos: flujo ordinario , flotación y posicionamiento absoluto .
A menos que se especifique específicamente, todas las cajas se colocan en el flujo normal . En otras palabras, la posición del elemento en el flujo ordinario está determinada por la posición del elemento en el (X) HTML.
1. El cuadro de elemento
estático del atributo de posición CSS
se genera normalmente. Los elementos a nivel de bloque generan un cuadro rectangular, como parte del flujo del documento, los elementos en línea crean uno o más cuadros de línea y los colocan en sus elementos principales.
El
marco del elemento relativo está compensado por una cierta distancia. El elemento aún conserva su forma no colocada, y el espacio que ocupaba originalmente permanece. (Relativo al elemento anterior que no está posicionado)
Una caja a nivel de bloque se genera después de que se coloca el elemento absoluto , independientemente del tipo de caja que generó originalmente en el flujo normal.
(Fuera del flujo de texto) Si se superpone, utilice el índice z para establecer la prioridad de visualización en la dirección del eje Z. La
posición del elemento absolutamente posicionado es relativa al elemento ancestro posicionado más cercano . Si el elemento no tiene un elemento ancestro posicionado , luego su posición relativa al bloque contenedor original. El comportamiento de la caja de elementos
fijos
es similar a establecer la posición en absoluta, pero su bloque contenedor es la propia ventana. (También está fuera del flujo de texto, pero está colocando la ventana, que siempre está fija en una posición determinada)
Flotante Un
marco flotante se puede mover hacia la izquierda o hacia la derecha hasta que su borde exterior toque el borde del marco contenedor u otro marco flotante.
Dado que el cuadro flotante no está en el flujo normal del documento, el cuadro de bloque en el flujo normal del documento se comporta como si el cuadro flotante no existiera.
Cuando el cuadro 1 flota hacia la derecha, deja el flujo de documentos y se mueve hacia la derecha hasta que su borde derecho toca el borde derecho del cuadro contenedor:
Cuando el cuadro 1 flota hacia la izquierda, deja el flujo de documentos y se mueve hacia la izquierda hasta que it El borde izquierdo del toca el borde izquierdo del cuadro contenedor. Debido a que ya no está en el flujo de documentos, no ocupa espacio y, de hecho, cubre el Cuadro 2, lo que hace que el Cuadro 2 desaparezca de la vista.
Si mueve los tres cuadros hacia la izquierda, el cuadro 1 flota hacia la izquierda hasta que toca el cuadro que lo contiene, y los otros dos cuadros flotan hacia la izquierda hasta que toca el cuadro flotante anterior.
Si el marco contenedor es demasiado estrecho para acomodar los tres elementos flotantes dispuestos horizontalmente, los otros bloques flotantes se mueven hacia abajo hasta que haya suficiente espacio. Si los elementos flotantes tienen diferentes alturas, es posible que otros elementos flotantes los "peguen" cuando bajan:
El elemento hijo flota, el elemento padre borra el flotador
.clearfix:after{
content: "";
display: block;
clear: both;
}
(2) Para lograr un efecto específico agregando una clase,
Esta es la realización de la selección del tipo de producto de Taobao, que se realiza agregando una clase seleccionada por tb al nodo actual en el que se hace clic a través de un evento de clic.
Por ejemplo, el módulo de detalles del producto de Taobao
se implementa agregando la clase seleccionada, y lo siguiente se implementa mediante la pantalla: ninguno.
Cinco: problema de peso
(1) demostración de demostración
(2) tabla de peso
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
权重
!important 正无穷
行间样式 1000
id 100
calss | 属性 | 伪类 10
标签|伪元素 1
通配符 0
255进制
Seis: Realización de diagrama de carrusel simple
<!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>