Normative:
All internal files must be English images, css, style html folder, js folder, and html folder for pages other than the home page
index.html is placed on the main page. Generally, the name of html file is consistent with that of css file
emmet plug-in
Emmet configuration and common syntax
List styles should be cleared before writing styles
*{
margin: 0px;
padding:0px;
/* Clear list style */
list-style: none;
}
The value of the picture only needs to be set in one direction, and the other value can be calculated automatically by the computer
/*Only block level labels can be centered horizontally*/
margin:40px auto;
<a href="" class="left my" >left</a>
ico icon online production
ico Icon online production https://www.bitbug.net/
Of existing sites ico Enter directly after the path/favicon.ico
If not converted to ico Compatibility is not very good
link Bring in a small icon in front of the title href Picture path
<link rel="shortcuticon" href="favicon.ico" />
Alibaba vector Gallery
Be sure to read the author's documentation
Alibaba vector Gallery
/*When modifying the code, you can't touch others. Add your own style to the back*/
/*Union selector can be merged when the style is the same. Use commas*/
.header,.con,.wrap{
width: 1000px;
margin:10px auto;
}
/*Text class element horizontal center picture attribute text class element*/
text-align: center;
Sprite picture
Sprite picture: the technology of integrating many small pictures into one large picture. Reduce server requests
What is the difference between img and background?
img is generally used to introduce more important images, which can be captured and occupied by search engines
background: url(icons_5859e57.png) no-repeat -217px -458px;
After the mouse moves in, change the picture, that is, change the positioning of the sprite picture
background-position: -72px -458px;
span{
width: 47px;
height: 47px;
display: inline-block;
background: url(icons_5859e57.png) no-repeat -217px -458px;
}
After the mouse moves in, change the picture, that is, change the positioning of the sprite picture
span:hover{
/* The coordinates of the background picture can only be used if there is a background picture */
background-position: -72px -458px;
}
The button removes the border and the blue outline after the point
button{
/* Remove border */
border:none;
/* Remove the blue line after clicking */
outline: none;
}
Text box default text
placeholder
placeholder Default prompt text <input type="text" placeholder="Alibaba Group">
Pseudo object
original text
:: After: adds an object after the specified label
:: before: adds an object before the specified label
Content: the content in the element (labels cannot be written in the content)
Note: the pseudo object style must have a content attribute, otherwise the pseudo object is invalid
Learn more: Double colons are officially recommended, but we usually use single colons for better compatibility
The above two pseudo object selectors need to be used together with the attribute content
ul li::before{
content: '';
width: 5px;
height: 5px;
background: red;
border-radius: 50px;
display:inline-block;
/*Convert to inline block*/
margin-right: 5px;
position: relative;
top:-4px;
/*margin-bottom: 2px; */
}
ul li::after{
content: '';
width: 5px;
height: 5px;
background: red;
border-radius: 50px;
display:inline-block;
margin-left: 5px;
position: relative;
top:-4px;
}
Notes for label use:
Generally, block level labels are more important. In line elements are used to introduce small elements
Generally, block level labels can be nested arbitrarily, p generally, only inline labels are placed inside, and they cannot be nested h1-h6, except for text elements
Inline labels can only place text elements, except for hyperlinks
The browser has blank folding. No matter how many spaces there are, only one can be recognized
If you want to wrap < br >, space & nbsp;
Rotation center point
transform-origin: 10px 10px;
CSS3: nth of type () selector
/* :nth-of-type(n)You can select a specific one */
/* Locate the label after. If it is superimposed, write it on it
After defining the labels, you can adjust the layer order through z-index
The default value is 0. The higher the value, the higher the value. Can be negative but not recommended
*/
div img:nth-of-type(1){
position: absolute;
left:0px;
top:0px;
transform: rotate(30deg);
}
div img:nth-of-type(2)}
3D rotation model
Enter 3D coordinates:
transform-style: preserve-3d;
<style>
*{
margin: 0px;
padding:0px;
list-style: none;
}
ul{
width: 200px;
height: 200px;
margin:100px auto;
border:1px dashed red;
position: relative;
/* Add this style to enter 3D coordinates */
transform-style: preserve-3d;
animation: move 2s infinite linear;
}
li{
width: 200px;
height: 200px;
position: absolute;
left:0px;
top:0px;
}
li:nth-of-type(1){
background: pink;
transform: translateZ(100px);
}
li:nth-of-type(2){
background: red;
transform: translateZ(-100px);
}
li:nth-of-type(3){
background: red;
transform: translateX(-100px) rotateY(90deg);
}
li:nth-of-type(4){
background: red;
transform: translateX(100px) rotateY(90deg);
}
li:nth-of-type(5){
background: red;
transform: translateY(-100px) rotateX(90deg);
}
li:nth-of-type(6){
background: red;
transform: translateY(100px) rotateX(90deg);
}
@keyframes move {
0%{
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>