CSS style supplement
- Sprite map
In the project chapter, several small pictures are combined into a large picture, which is called the wizard picture.
The advantage of Sprite graph is to reduce the number of times sent by the server, reduce the pressure on the server and improve the page loading speed.
For example, 8 small pictures need to be displayed in the web page, 8 small pictures need to be sent respectively, and 8 requests need to be sent.
Synthesize a sprite map and send it only once
This small picture is the icon on a sprite diagram (self taken, which can be used in the following code)
Use steps: create a box, set the size of the box to the size of the small picture, set the sprite picture to the background picture of the box, take a negative value for the coordinates in the upper left corner of the small picture, and set it to the box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -264px;
float: left;
}
.two {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -484px;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
- Background picture size
Background size width and height are used to set the size of the background picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 400px;
height: 300px;
border: 1px solid #000;
background: url('./images/1.jpg') no-repeat;
margin: 100px auto;
}
div:nth-child(2) {
/*
1,Number + px
Advantages: simple setup
Disadvantages: the picture may stretch and deform
*/
background-size: 400px 300px;
}
div:nth-child(3) {
/*
2,percentage:
Advantages: simple setup
Disadvantages: the picture may stretch and deform
*/
background-size: 100% 100%;
}
div:nth-child(4) {
/*
3,contain: Include - let the background picture scale equally until it does not exceed the maximum size of the box
Advantages: equal scale without deforming the picture
Disadvantages: the box may be left blank
*/
background-size: contain;
}
div:nth-child(5) {
/*
4,cover: Overlay - let the background picture be scaled to the same scale, and directly fill the whole box until there is no blank
Advantages: equal scale without deforming the picture
Disadvantages: the background image may exceed the box
*/
background-size: cover;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
- Text shadow
Add a shadow effect to the text to attract the user's attention
With text shadow, shadows can be superimposed, and each group of shadow values are separated by commas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 300px;
text-align: center;
line-height: 300px;
font-size: 100px;
font-weight: 700;
}
div:nth-child(1) {
text-shadow: 18px 20px 16px red;
}
div:nth-child(2) {
text-shadow: 10px 10px 5px red, 20px 20px 5px green, 30px 30px 5px blue;
}
div:nth-child(3) {
color: #fff;
background-color: #000;
text-shadow: 0 0 5px #fff, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
div:nth-child(4) {
background-color: #000;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
div:nth-child(5) {
color: #666;
background-color: #666;
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
div:nth-child(6) {
color: #666;
background-color: #666;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>I love learning.</div>
<div>I love learning.</div>
<div>I love learning.</div>
<div>I love learning.</div>
<div>I love learning.</div>
<div>I love learning.</div>
</body>
</html>
- Box shadow
Add a shadow to the box to attract users' attention and reflect the production details of the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
/* Box shadow */
box-shadow: 32px 26px 15px #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- transition
Let the style of elements change slowly, and often use it with hover to enhance the transition of web page interaction experience
(About transition, there are also transform transition animate, etc Here, I will only use one of the methods. We need to understand the differences between the three methods so that we can choose and use them more flexibly in future projects)
The default state is different from the hover state style to have the transition effect. You need to add attributes to the transition element itself.
Given the default state settings, moving the mouse in and out has a transition effect
Set the hover state. When the mouse is moved in, there is a transition effect, and when it is moved out, there is no transition effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* transition */
transition: all 1s;
}
div:hover {
width: 800px;
/* width: 200px; */
/* background-color: yellow; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Project pre cognition
- Relationship between web pages and websites
A web page is equivalent to every page of paper, and a website is equivalent to a book.
When users look through it, they look at the contents of each page
By integrating multiple pages of paper, it is a complete book
For example, Jingdong website is similar to a book. There are many web pages in Jingdong website, such as login page and main page, which are similar to each page. The integration of multiple web pages is a website
- Skeleton structure label
Note: DOCTYPE needs to be written in the first line of the page and is not an HTML tag
The function of web language is search engine classification + browser translation
The saved and opened character codes need to be set uniformly, and the universal code (UTF-8) can be used in development. Because it is an international character code, you can understand it
- Three labels of SEO
Search Engine Optimization
The purpose is to make the website rank high in the search engine
Ways to improve SEO: competitive ranking, label semantics, etc
The following are the three tags of JD. Title is the page title tag. Description is the page description tag. keywords is the page keyword tag
In the new version of HTML5, some semantic layout tags are introduced to enhance the semantics of web pages. The following tags show the same characteristics as div, but have different semantics than Div
- ico icon settings
The small icon displayed to the left of the title of the tab. It is customary to use the icon in. ico format
Code settings
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
- Edition Center
The main content of the page is constrained in the middle of the page, so that the theme content of the page can be seen on screens of different sizes, and CSS styles can be set
- CSS writing order
The ability of programmers should be measured not only by the ability to realize business requirements, but also by the norms (professionalism) of writing code at ordinary times
Different CSS writing order will affect the rendering performance of the browser. It is recommended that front-end engineers use professional writing order habits
It is recommended to use multiple classes + descendants in development, but the more levels, the better. It is recommended that the number of class selectors in a selector should not exceed 3 1
