Comprehensive summary of CSS knowledge -- Quick Reference Manual
CSS
brief introduction
p
{
color:red;
text-align:center;
}
Do not leave spaces between attribute values and units
CSS comments start with / * and end with /
id selector
#para1
{
text-align:center;
color:red;
}
id and class should not start with numbers
class selector
.center {text-align:center;}
Specifies tha ...
Posted by theBond on Thu, 03 Feb 2022 12:30:13 +0100
Failure investigation and replacement scheme of scrollIntoView
Problem background
Today, we need to do a function of clicking icon to slide to the article comment area, using scrollIntoView. It is found that the mobile terminal occasionally fails.
The code is as follows:
commentRef.current.scrollIntoView({
behavior: 'smooth',
});
analysis
Think about whether 1 is caused by a browser bug
accor ...
Posted by Formula on Thu, 03 Feb 2022 10:27:10 +0100
2022 dark horse programmer - first stage of front-end learning (day04 CSS advanced)
Learning video station B: Dark horse programmer - front end learning (phase I)
CSS advanced
Advanced of selector
compound selector
Descendant selector: spaces
Function: select the qualified elements in the descendants of parent elements according to the nesting relationship of HTML tags Selector syntax: selector 1 selector 2 {CSS} res ...
Posted by rakuci on Thu, 03 Feb 2022 08:40:53 +0100
CSS selector exercise restaurant exercise
Source code link:
https://pan.baidu.com/s/1cDehMieTufSbZRBR6sqVYQ Extraction code: x0pz
After downloading, double-click the index in the restaurant exercise directly HTML file, and then do it one by one
The answers are given in code snippets~
W3C description of CSS selector: CSS pseudo class
Level operation instructions:
1. Directly selec ...
Posted by musicdirector on Thu, 03 Feb 2022 08:18:13 +0100
WEB vulnerability - full solution of PHP&JAVA deserialization
PHP Deserialization
Principle: the serialization string entered by the user is not detected, so that the attacker can control the deserialization process, resulting in code failure
Execution, SQL Injection, directory traversal and other uncontrollable consequences. Some magic methods are automatically triggered during deserialization. When ...
Posted by tbobker on Thu, 03 Feb 2022 07:20:57 +0100
vue event handling
**
vue event handling
** Generally, v-on is used to listen for events. When listening for DOM events, some js code will be triggered.
Use v-on:xxx or @ xxx to bind events. xxx refers to the event name. The callback of the event should be written in the methods object and will eventually be placed on the vm. 2. The function in is managed by ...
Posted by drizzle on Thu, 03 Feb 2022 05:18:41 +0100
Take you hand-in-hand for 10 minutes to create a simple Markdown editor
preface
Recently, I need to implement the requirement of a markdown editor in my project, which is developed based on the React framework, similar to Nuggets:
My first thought is that if you can use excellent open source, you must use open source. After all, you can't always build wheels repeatedly. So I asked a lot of friends in my front-e ...
Posted by playaz on Thu, 03 Feb 2022 02:41:57 +0100
Take you hand in hand to build a simple webpack scaffold
Plugin plug in
In the whole process of webpack, loader enables webpack to process more file resources. The plugin exists in the whole packaging process of webpack. The processed content can be processed when the hook exposed by the webpack is triggered. So we can use plugin to process the files in process.
index.html file processing
Before, ...
Posted by andremta on Thu, 03 Feb 2022 02:15:05 +0100
React learning notes
Three properties of component instances
1. Attribute I
state [concept] React regards components as a state machine. Through the interaction with users, different states are realized, and then the UI is rendered to keep the user interface and data consistent. [note]
this in the render method of the component is the component instance obje ...
Posted by introvert on Wed, 02 Feb 2022 21:38:48 +0100
React router: build multi page SPA
Using Router, you can build a multi page single page app
1. Install the react router:
npm intall react-router-dom
2 basic usage
2.1 App.js import Route component
import { Route } from "react-router-dom";
2.2 App.js definition path:
There are two paths:
http://localhost:3000/welcome
http://localhost:3000/products
Load correspo ...
Posted by avalonindigo on Wed, 02 Feb 2022 21:17:25 +0100