CSS to achieve Ant Design official website Logo egg effect
In recent projects Ant Design There are a lot of connections, which is very good. i don't know if you have found such an effect. On the official website, if you put the mouse on the Logo, the icon on the letter i will change constantly. After leaving, it will stop and change again. It can be regarded as a small colored egg (maybe i didn't find ...
Posted by djfox on Wed, 26 Jan 2022 08:27:45 +0100
css child element selects the implementation of the parent element
In css, elements cannot be selected forward, that is, parent elements or former sibling elements cannot be selected; This is subject to DOM rendering rules; In fact, html is a rendering mechanism from the outer layer to the inner layer; If you can render up, there will be problems such as rendering disorder and performance;
Change the position ...
Posted by andyhoneycutt on Wed, 26 Jan 2022 07:02:47 +0100
html advanced Tags
html2.0 learning notes
I html advanced Tags 1. The HTML encoding format is &; There are three common: 1) Spaces, & nbsp; 2)<，<； 3)>，>； 2. < br > Enter (line feed) 3. < HR > horizontal line 4. Ordered list labels Basic format:
<ol>
<li></li>
...
<li></li>
</ol ...
Posted by marty68 on Wed, 26 Jan 2022 02:20:13 +0100
[responsive layout of mobile Web development]
[responsive layout of mobile Web development] front end notes (20)
This study note is a personal summary of teacher Pink's course. Please indicate the source for reprint!
1, Responsive development
1.1 principles of responsive development
Media query is used to set the layout and style of devices with different widths, so as to adap ...
Posted by mrgrinch12 on Wed, 19 Jan 2022 07:40:55 +0100
Selector summary in CSS
I Basic selector
Basic selector:
Label selector: for a class of labelsID selector: used for a specific labelClass selector: use for all tags you wantUniversal selector (wildcard): applicable to all labels (not recommended)
selectorExampledescribe.class.navSelect all elements of class = "intro"#id#firstnameSelect all elements wi ...
Posted by Shiki on Wed, 19 Jan 2022 00:20:56 +0100
CSS secret: how to improve the user's visual experience only with CSS?
catalog:
1,Expand clickable area
2,Custom check box
3,Through shadows/Blur to weaken the background
4,Scroll prompt
1. Expand clickable areaThe clickable area of some buttons is very small. For user interaction, CSS needs to be used to exaggerate their clickable area.For the simple button shown below, we want to expand the clickable area by 10p ...
Posted by zak on Sun, 16 Jan 2022 20:21:46 +0100
CSS3 series 04 common units
Pixel size
px
px is a fixed pixel unit. If your web page needs to be used at multiple ends, use it as little as possible. It does not have responsive characteristics.
As follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
< ...
Posted by richinsc on Sun, 16 Jan 2022 18:16:46 +0100
Margin margin merging problem
Problem restatement
Margin is the outer margin attribute. It defines the distance between the border and the border, but sometimes these margins are merged. Do you know what's going on?
Code demonstration
1. Vertical margin merge
css
.box1{
width: 100px;
height: 100px;
margin-bottom: 25px;
background-color: #00FFFF;
}
.box2{
width: 10 ...
Posted by kiltannen on Sun, 16 Jan 2022 04:15:39 +0100
CSS3 series 12 grid layout
grid layout
Basic introduction
The grid layout of CSS is also called grid layout, which is a new layout method.
Grid layout is a two-dimensional system, which means that it can process columns and rows at the same time. Similar to elastic layout, grid system is also used by wrapping grid elements in grid containers.
For grid layout, its id ...
Posted by drums on Sat, 15 Jan 2022 12:28:38 +0100
[JavaScript] basic of process control statement
preface
Obviously, the sequence of program execution has a significant impact on the running results of the program, so the process control statement was born. It has three basic structures: sequence structure, selection structure and loop structure.
Sequential structure: code is executed from top to bottom.Select structure: perform di ...
Posted by johndale on Fri, 14 Jan 2022 06:27:42 +0100