One: The difference between a static page and a dynamic page
1. Static page:
(1) The client uses a browser to send a request, tell the server which page I need to visit, and then the server retrieves the content from the file according to the user's needs, and then returns it to the client The end
(2) cannot connect to the database, and the file must be operated every time the content is changed.
2. The dynamic page
(1) is still directly requested, but it will be judged by the web server. If it is a static resource, it will be directly requested. If it is dynamic, it will be dynamically spliced and then returned.
Two: How to build a static website
Purchase service -> install jdk and tomcat and configure environment variables -> put the web file in the specified folder
and then directly access the domain name plus the port number of tomcat.
Three: How to build a dynamic website. The
route is different, and the method may be different. If it is a spring framework, just pack it and run it to
make up: Technical realization
front-end: html + css + js + jquery + bootstrap (icon) + less (optimize writing css) ) + ajax (data interaction)
backend: SpringBoot (framework) + myBatis (or JDBC operation database) + Thymeleaf template engine
4: Basic knowledge of front-end pages
(1) The content of a page is not hard-coded , but through ajax For the dynamic request, take Taobao homepage as an example. The source code of Taobao homepage removes only more than 1,000 lines of code, while the data of Taobao page is all dynamically requested. In this way, when you need to modify the data in the future, you only need to go through the management system. Just modify the database, almost no operation on the front-end page. (Dynamic page)
Supplement: Relevant explanation of positioning
CSS has three basic positioning mechanisms: ordinary flow , float, and absolute positioning .
Unless specifically specified, all boxes are positioned in the normal stream . In other words, the position of the element in the ordinary stream is determined by the position of the element in the (X)HTML.
1. The CSS position attribute
static
element box is generated normally. Block-level elements generate a rectangular box, as part of the document flow, in-line elements create one or more line boxes and place them in their parent elements.
The relative
element frame is offset by a certain distance. The element still retains its unpositioned shape, and the space it originally occupies remains. (Relative to the previous element that is not positioned)
A block-level box is generated after the absolute element is positioned, regardless of what type of box it originally generated in the normal flow.
(Out of the text flow) If overlapped, use z-index to set the display priority in the z-axis direction. The
position of the absolutely positioned element is relative to the nearest positioned ancestor element . If the element has no positioned ancestor element, then its position Relative to the original containing block. The behavior of the
fixed
element box is similar to setting the position to absolute, but its containing block is the window itself. (It is also out of the text flow, but he is positioning the window, which is always fixed at a certain position)
Floating A
floating frame can be moved to the left or right until its outer edge touches the border of the containing frame or another floating frame.
Since the floating box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the floating box does not exist.
When box 1 floats to the right, it leaves the document flow and moves to the right until its right edge touches the right edge of the containing box:
When box 1 floats to the left, it leaves the document flow and moves to the left until it The left edge of the touches the left edge of the containing box. Because it is no longer in the document flow, it does not take up space, and actually covers Box 2, making Box 2 disappear from view.
If you move all three boxes to the left, then box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until it touches the previous floating box.
If the containing frame is too narrow to accommodate the three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the floating elements have different heights, they may be "stuck" by other floating elements when they move down:
Child element floats, parent element clears float
.clearfix:after{
content: "";
display: block;
clear: both;
}
(2) To achieve a specific effect by adding a class,
This is the realization of Taobao's commodity type selection, which is realized by adding a tb-selected class to the current node that is clicked through a click event.
For example, the product details module of Taobao
is implemented by adding the selected class, and the following is implemented by display:none.
Five: weight problem
(1) demo demonstration
(2) weight table
!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
权重
!important 正无穷
行间样式 1000
id 100
calss | 属性 | 伪类 10
标签|伪元素 1
通配符 0
255进制
Six: Simple carousel diagram realization
<!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>