2. HTML/CSS learning notes 2 - try to write out my first web page and the concept of elements
First page
Software used: vscode
Recommended plug-ins to install in vscode:
1. Emmet plug-in: it can automatically generate HTML code fragments. It can quickly generate batches containing nested structures through tab key combined with its specific syntax. This plug-in is built-in in vscode, and I can use it directly without relevant configu ...
Posted by tinyashcities on Tue, 05 Oct 2021 02:54:18 +0200
flex flexible box layout (detailed)
Elastic box model
1. Telescopic container display
Flex is the abbreviation of Flexible Box, meaning "flexible layout", which is used to provide maximum flexibility for box model. Any container can be specified as a flex layout.
Elements with Flex layout are called Flex containers, or "containers" for short. All its child ...
Posted by DarkShadowWing on Thu, 30 Sep 2021 23:03:35 +0200
Scss study notes
In vscode, you first need to install live sass compiler to compile sass into css in real time.
Click watch sass at the bottom to compile the sass file into a css file with the same name in real time.
nesting
I think the most important function of sass is that it can be nested layer by layer in html, instead of selecting an element in css ...
Posted by spider22 on Fri, 24 Sep 2021 17:03:24 +0200
Flex flexible layout tutorial - 09 - container properties flex flow
Objectives of this section
Master the use of flex flow, which is a collection of flex direction and flex wrap.Master the layout writing skills from top to bottom.
Content summary
This chapter introduces the container attribute flex flow, which is a collection of flex direction and flex wrap. The related attributes have been explained earlier ...
Posted by 86Stang on Fri, 24 Sep 2021 16:49:50 +0200
Front end performance optimization 03_ Layer and redraw rearrangement
css layer
When rendering a page, the browser will divide the page into many layers, ranging from large to small, with one or more nodes on each layer. When rendering DOM, what the browser does is actually:
1. After obtaining DOM, it is divided into multiple layers
2. Calculate style results for nodes of each layer (calculate style – st ...
Posted by jamesm87 on Fri, 24 Sep 2021 14:21:40 +0200
js implementation tab
Tabs are often used in web pages, so how to implement tabs?
In the current framework, dom operation is omitted, and developers only need to pay attention to data. Is it really unnecessary to operate dom? Yes, it is necessary, but the program has helped to do this, and pure data logic will make the front end more difficult.
Overall structure
...
Posted by johnsiilver on Thu, 23 Sep 2021 13:01:10 +0200
Animation.css with wow.js (html scrolls to the visible area to display animation)
Requirements: scroll html to the visual area to display animation. Use it in combination with animate.css wow.js
First put the cdn link
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<!-- Scrolling down the page has an effect -->
<script type="text/javascript" src="https://cdn.dowebok.c ...
Posted by ranam on Thu, 23 Sep 2021 04:11:31 +0200
[Mid Autumn Festival] simulate the revolution of planets in the solar system
preface
Last [Mid Autumn Festival] realize the revolution of sun, earth and moon in pure CSS I dug a pit to simulate the revolution of the planets in the solar system around the sun. Today I'll fill the pit.
There are only eight planets in the solar system: Mercury, Venus, earth, Mars, Jupiter, Saturn, Uranus and Neptune. Originally there w ...
Posted by AnnieKay on Tue, 21 Sep 2021 12:04:44 +0200
WEB front end optimization -- HTML/CSS optimization
This series of articles is organized, recorded and expanded by the book efficient front end - Web efficient programming and optimization practice.
Optimization 1: don't use JS for problems that can be solved with HTML/CSS
Several cases are introduced
1.1 navigation highlight
This case is not an ordinary mouse to highlight, but highlight ...
Posted by Tchelo on Mon, 20 Sep 2021 22:08:46 +0200
HTML5 basic learning
1, Structure of HTML pages
1. Basic framework of HTML
<html>Web page as a whole
<head>
<title>Page title</title>
</head>
<body>Theme of web page</body>
</html>
2. Structure of HTML tags
< tag name attribute name = attribute value > content < / tag name >
2 ...
Posted by mikeylikesyou on Sun, 19 Sep 2021 19:46:27 +0200