Yesterday's national day, a day off, no update, continue today.
First, let's talk about the page mentioned last time. It's done. Wuhu:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="title1">Commodity classification</div><div class="title2">Tmall double eleven</div>
<ul class="list">
<li><a href="##"> famous women's wear</a></li>
<li><a href="##"> outdoor sports</a></li>
<li><a href="##"> trendy Menswear</a></li>
<li><a href="##"> beauty care</a></li>
<li><a href="##"> good for mother and baby</a></li>
<li><a href="##"> digital appliances</a></li>
<li><a href="##"> furniture and building materials</a></li>
<li><a href="##"> Global Top goods</a></li>
<li><a href="##"> Suning Tesco</a></li>
<li><a href="##"> automotive supplies</a></li>
</ul>
</body>
</html>CSS code:
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
/*Eliminate some basic browser formats*/
div {
display: inline-block;
/*Make two headings line by line*/
width: 100px;
height: 36px;
color: #ffffff;
font-size: 12px;
line-height: 36px;
text-align: center;
}
.title1 {
background: #C60A0A;
}
.title2 {
background: #464444;
}
.list {
box-sizing: border-box;
width: 200px;
padding-top:29px;
padding-bottom: 14px;
background: #413F3F;
font-size: 12px;
}
.list li {
margin-bottom: 14px;
padding-left: 24px;
padding-right: 24px;
}
a {
display: block;
/*Make a label a block element*/
border: #cb0c10 1px solid;
border-radius: 10px;
line-height: 29px;
text-align: center;
text-decoration: none;
/*Remove underline under hyperlinks*/
color: #ffffff;
}design sketch:
hey! The following is the content of today's study.
location
position: used to modify the layout (document) of DOM elements. There are five values: static, relative, absolute, fixed and sticky. Their functions will be explained one by one below:
-
Static (static positioning): This is the default value of position, that is, the default location definition method of elements in the document flow without operation.
-
relative positioning: keep the default position of the element in the document flow (equivalent to still in the original position, but the display effect is offset). Change the distance between the element and the default position through the four attributes of top, left, right and bottom. Top is the distance between the element and the default position.
-
absolute positioning: the default position of the element in the document flow is not reserved (that is, the following element will top up and occupy this position instead of the element). The position is also changed through the four values of top, right, bottom and left. Its displacement is relative to the nearest non static positioning ancestor element (ancestor element is its parent element and higher element).
-
fixed: the default position of the element in the document stream is not reserved. It moves relative to the window. The scrolling of the window will not affect its position relative to the upper left corner of the screen. The default z-index is 0, (z-index determines the layer priority of the layer where the element is located. The higher the value, the higher the priority, the higher the position, and the closer to the user. If the same value, the lower the position in the HTML file, the closer to the user, and the non static value is 0).
-
sticky positioning: keep the default position of the element in the document. In the interface containing the default position of the element, it is no different from static, but when the window scrolls to the specified position (that is, the position of the element specified by the four values of top, left, bottom and right is relative to the window, which is similar to fixed positioning) , it will be fixed in that position as fixed positioning.
This also has a small page:
HTML code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="position.css" />
<title>Title</title>
</head>
<body>
<h1 class="title">MOUNTAIN</h1>
<p>
The Facebook post was heartfelt. We like our little town just as it is:
Little. Homey. Just us'ns.
</p>
<div class="img-box">
<div class="first">
<p>Picture 1</p>
<img
alt=""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
/>
</div>
<div class="second">
<p>Picture 2</p>
<img
alt=""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
/>
</div>
<div class="third">
<p>Picture 3</p>
<img
alt=""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
/>
</div>
<div class="fourth">
<p>Picture 4</p>
<img
alt=""
src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
/>
</div>
</div>
<h2>LISTEN</h2>
<p>
Listen, I can empathize. As someone who's lived in the Denver area since
1971 — right about the time John Denver's songs were enticing folks to move
</p>
<footer></footer>
</body>
</html>CSS code:
body {
margin: 0; /*Remove the default style*/
font-family: Sans-serif;
color: rgba(0, 0, 0, 0.84);
font-size: 16px;
padding: 30px;
}
img {
width: 50%;
}
div>div {
position: relative;
}
div>p {
position:absolute;
font-size:20px;
color: yellow;
right: 51%;
top: 1%;
z-index: 10;
}
Effect picture: (it's too long here. Put some parts, mainly the numbers in the upper right corner of the picture)
Experience:
The above is today's content. I feel jio pretty good, but I've written it for a long time, sobbing.
And the National Day is actually a busy day. There are too many things in the Department. Come on.