Use of sprites
In order to effectively reduce the number of times the server receives and sends requests and improve the page loading speed, CSS sprite technology (also known as CSS Sprites, CSS Sprite) has emerged.
Core principle: Integrate some small background images in the web page into a large image, so that the server only needs one request.
Using sprite map core summary:
- Sprite images are mainly used for small background images.
- It is mainly realized by means of the background position—background-position.
- In general, sprite maps are negative values. (Be sure to pay attention to the coordinates in the webpage: the x-axis goes to the right is a positive value, and the left side is a negative value, and the y-axis is the same.)
font icon
Font icons can provide front-end engineers with a convenient and efficient way to use icons. What is displayed is an icon, which is essentially a font.
Steps for usage:
-
Downloading font icons
We can download the required font icons through icomoon font library http://icomoon.io or Ali iconfont font library http://www.iconfont.cn/. Take
icomoon font library as an example:
-
Introduction of font icons
After downloading font icons, put the fonts folder in the download package into the root directory of the page
Globally declare fonts in CSS styles: Simply understand that these font files are introduced into our pages through css.
Add small icons inside html tags.
Open this demo.html and copy the small frame.
Can it be used directly at this time?
Define the font for the label.
The result is as follows:
Making a css triangle
Subject: Specify a border for a box with no size
CSS user interface styles
mouse style cursor
li {
cursor: pointer; }
After adding the outline: 0; or outline: none; style to the form, you can remove the default blue border .
input {
outline: none; }
Prevent dragging the text field resize
In actual development, the lower right corner of our text field cannot be dragged.
textarea{
resize: none;}
The vertical-align property applies
the vertical-align property of CSS usage scenarios: It is often used to set the vertical alignment of pictures or forms (inline block elements) and text.
Official explanation: It is used to set the vertical alignment of an element, but it is only valid for inline elements or inline block elements.
Solve the problem of the default blank gap at the bottom of the picture,
and the overflowing text ellipsis display
Layout Tips
Use of negative margin values:
1. Move the margin of each box to the left by -1px to just press the border of the adjacent box.
2. When the mouse passes over a certain box, just increase the level of the current box (if there is no positioning, add Relative positioning (preserve position), if there is positioning, add z-index)
Text around floating elements: similar to the effect shown in the picture below
Prepare a large box, enter text directly into it, and use ordinary standard flow; let the picture placed on the left float to the left, and the text will surround the picture at this time.
Clever use of inline blocks:
the page number is displayed in the middle of the page:
1. Convert these link boxes into inline blocks, and then specify text-align:center for the parent;
2. Use the gap in the middle of the inline block elements, and add text- to the parent align:center; Inline block elements will be centered horizontally.
The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-decoration: none;
line-height: 36px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
</div>
</body>
The final realization effect is as follows:
Clever use of css triangle
.box1 {
width: 0;
height: 0;
/* 左边边框和下边边框的宽度设置为0 */
/* 再把上边框设置的高一点 */
border-top: 100px solid transparent;
border-right: 50px solid yellow;
border-bottom: 0 solid red;
border-left: 0 solid green;
}
The final effect:
New features of HTML5
New Semantic Tags in HTML5
- <header>: head tag
- <nav>: navigation label
- <article>: content tag
- <section>: defines an area of the document
- <aside>: sidebar label
- <footer>: footer tag
New multimedia tags in HTML5
There are two new multimedia tags:
- Audio: <audio>
- Video: <video>
<video src="文件地址" controls="controls"></video>
<audio src="文件地址" controls="controls"></audio>
New input type in HTML5
New form attribute in HTML5
input::placeholder {
color: pink;
}
New Features of CSS3
CSS3 adds a selector
CSS3 adds a selector to us, which can be more convenient and free to select the target element.
1. Attribute selector
2. Structural pseudo-class selector
3. Pseudo-element selector
- Structural pseudo-class selectors are generally used to select the first child in the parent
- nth-child Sort and select all children in the parent element (the serial number is fixed) First find the nth child, and then see if it matches E
- nth-of-type sorts and selects the specified child elements in the parent element. First match E, and then find the nth child based on E
- Regarding nth-child(n), we need to know that n is calculated from 0 , and remember the commonly used formula
- If it is an unordered list, we must use nth-child More
- Class selector, attribute selector, pseudo-class selector with a weight of 10.
Pseudo-element selectors can help us use CSS to create new label elements without HTML tags, thus simplifying the HTML structure.
Notice:
- before and after create an element, but are inline elements
- This newly created element cannot be found in the document tree, so we call it a pseudo-element
- Syntax: element::before {}
- before and after must have content attribute you
- before creates an element before the content of the parent element, and after inserts the element after the content of the parent element
- Pseudo-element selectors are the same as label selectors, with a weight of 1
In CSS3, the box model can be specified through box-sizing, which has 2 values: it can be specified as content-box and border-box, so the way we calculate the box size has changed.
Can be divided into two cases:
1.box-sizing: content-box box size is width + padding + border (previous default)
2.box-sizing: border-box box size is width