Table of contents
- I. Introduction
- 2. Sprite map
- 3. CSS Triangle
- Fourth, CSS user interface style
- Five, vertical-align property
- Six, the overflow text ellipsis display
- Seven, common layout skills
- 8. Summary
I. Introduction
As an important part of front-end development, CSS not only gives the web page a beautiful appearance, but also provides users with a good interactive experience. This article will discuss in depth the sprite map, triangle effect, user interface style, overflow ellipsis and common layout techniques in CSS to help you make better use of CSS and create a more attractive web interface.
2. Sprite map
1. What is a sprite map
CSS sprites combine multiple small icons or pictures into a large picture, and then display the required parts through the background positioning of CSS. This has the benefit of reducing the number of HTTP requests, resulting in faster page loading.
2. Why do we need a sprite map
The web pages we write need to be placed on the server, so that anyone who opens a browser and enters our URL can visit our web pages.
When we click on a picture in the browser, a request will be sent to the server, and after the server accepts the request, it will return the corresponding picture to the page
A webpage often uses many small background images as decorations. When there are too many images in the webpage, the server will frequently accept and send request images, which will cause excessive request pressure on the server, which will greatly reduce the loading speed of the page. Therefore, in order to effectively reduce the number of times the server accepts and sends requests and improve the loading speed of the page , CSS sprite technology (CSS Sprites) appeared.
The core principle of CSS sprite technology: integrate some small background images in the web page into a large image, so that the server only needs one request.
When I want an image in the big picture, the server will directly return the big picture to the page, so that when I want a certain image again, I don't need to send the request again.
3. The use of sprite maps
①. Steps to create a CSS sprite map
1) Select the appropriate icon
Select the small icons or pictures that need to be merged
2) Merge pictures
Use tools to merge small icons into one big image, preserving transparent areas
3), set the background positioning
Use the "background-position" property in CSS to position the part that needs to be displayed
②. Techniques for Optimizing CSS Sprite Maps
1) Easy maintenance
Sprite management can get complicated and requires a good naming and maintenance strategy
2), consider the Retina screen
Provide 2x icon size for high resolution screens, use "background-size" for Retina screens
3), use CSS preprocessor
Use Less, Sass and other preprocessors to generate sprite map style code more conveniently
③. Use sprite map core
- Sprite technology is mainly used for background images, which is to integrate multiple small background images into one large image
- To move the position of the background image, you can use background-position
- In general, sprite maps are negative values (the right side of the x-axis is positive, the left side is negative, and the y-axis is the same)
3. Sprite diagram case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵图使用</title>
<style>
.box1 {
width: 260px;
height: 430px;
background: url(../02/image/0001.png) no-repeat -185px 0;
margin: 100px auto;
}
.box2{
width: 40px;
height: 40px;
margin: 200px;
background: url(../02/image/0002.png) no-repeat -185px -199px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3. CSS Triangle
Some triangles are common in web pages, you can use CSS to draw them directly, you don’t need to make pictures or font icons
To avoid browser incompatibility, you can add these two attributes
line-height: 0;
font-size: 0;
1. Realize the four triangles
Define a box with a width and height of 0, and then define the four borders of the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角</title>
<style>
.box1 {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-top: 30px solid palevioletred;
border-bottom: 30px solid pink;
border-left: 30px solid orange;
border-right: 30px solid palegreen;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
2. Realize a triangle
Just define the style of one of the borders
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角</title>
<style>
.box2 {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
margin-top: 40px;
border: 100px solid transparent;
border-top-color: blueviolet;
}
</style>
</head>
<body>
<div class="box2"></div>
</body>
</html>
3. Realize the right triangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角</title>
<style>
.box1 {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-top: 70px solid transparent;
border-bottom: 0 solid transparent;
border-left: 0 solid transparent;
border-right: 30px solid purple;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
4. Case realization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角</title>
<style>
.box3 {
width: 120px;
height: 240px;
position: relative;
background-color: palevioletred;
}
.box3 span {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
position: absolute;
right: 30px;
top: -17px;
border: 10px solid transparent;
border-bottom-color: palevioletred;
}
</style>
</head>
<body>
<div class="box3">
<span></span>
</div>
</body>
</html>
Fourth, CSS user interface style
1. Change the user's mouse style cursor
Sets or retrieves which system-predefined cursor shape the mouse pointer moves over the object
//语句
li{
cursor: pointer;
}
①, attribute style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标样式</title>
<style>
.li1 {
cursor: default;
}
.li2 {
cursor: pointer;
}
.li3 {
cursor: move;
}
.li4 {
cursor: text;
}
.li5 {
cursor: not-allowed;
}
</style>
</head>
<body>
<ul>
<li class="li1">默认小白鼠标样式</li><br>
<li class="li2">鼠标小手样式</li><br>
<li class="li3">鼠标移动样式</li><br>
<li class="li4">鼠标文本样式</li><br>
<li class="li5">鼠标禁止样式</li>
</ul>
</body>
</html>
2. Form outline outline
After adding outline:0 or outline:none style to the form, you can remove the default blue border
//语法
outline：none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮廓线和防止拖移</title>
<style>
input{
width: 200px;
height: 100px;
outline: none;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
3. Prevent form fields from being dragged and resized
In case development, the lower right corner of the text field cannot be dragged
//语法
textarea{
resize: none
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮廓线和防止拖移</title>
<style>
textarea{
resize: none;
outline: none;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
Five, vertical-align property
1. The vertical-align attribute of CSS is used in scenarios: it is used to set the vertical alignment of pictures or forms (inline block elements) and text
2. It is used to set the vertical alignment of an element, but it is only valid for inline elements or inline block elements
1. Grammar
vertical-align: baseline top middle bottom
2. What is the top line, middle line, baseline and bottom line
3. Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../02/images/taobao.webp">pink
</body>
</html>
4. Case where the text is vertically centered on the picture
<!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>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<img src="../02/images/taobao.webp">pink
</body>
</html>
5. Image, form and text alignment
Pictures and forms are all inline block elements, and the default vertical-align is baseline alignment
So how to vertically center the picture text?
At this time, you can set the vertical-align attribute of inline block elements such as pictures and forms to middle to make the text and pictures vertically centered.
6. Solve the problem of the default blank gap at the bottom of the picture
When adding a picture in the box, after running the page, it is found that there is a blank gap at the bottom of the picture. And this box has no height and width set.
<!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{
border: 2px solid palegreen;
}
</style>
</head>
<body>
<div>
<img src="../02/images/taobao.webp">
</div>
</body>
</html>
①. The reason for the default blank gap problem at the bottom of the picture
Inline-block elements are aligned to the baseline of the text
② How to solve the problem of the default blank gap at the bottom of the picture
1) Add vertical-align: middle | top | bottom to the image
<!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{
border: 2px solid palegreen;
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="../02/images/taobao.webp">哈哈哈
</div>
</body>
</html>
2) Convert the image into a block element display: block
<!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{
border: 2px solid palegreen;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<img src="../02/images/taobao.webp">
</div>
</body>
</html>
Six, the overflow text ellipsis display
1. Single-line text overflows and displays an ellipsis
①. Single-line text overflows and displays ellipsis - three necessary conditions
/* 1. 先强制一行内显示文本 （默认normal自动换行） */
white-space: nowrap;
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
②, code example
<!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: 180px;
height: 200px;
/* 1. 先强制一行内显示文本 （默认normal自动换行） */
white-space: nowrap;
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
如果你设计的软件猪不能使你就是猪
</div>
</body>
</html>
2. Multi-line text overflows and displays ellipsis
Multi-line text overflows and displays ellipsis, which has a large compatibility problem and is suitable for webKit browsers or mobile terminals (most of the mobile terminals are webKit kernels)
<!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: 180px;
height: 200px;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块级元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
如果你设计的软件猪不能使你就是猪;让每一个软件使用者都成为我们软件的设计者
</div>
</body>
</html>
Seven, common layout skills
1. The use of negative margin values
- Let the margin of each box move to the test - 1px to just press the border of the adjacent box
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
ul li{
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
float: left;
margin-left: -1px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
- When the mouse passes over a certain box, just increase the level of the current box (if there is no positioning, add relative positioning (reserve position), if there is positioning, add z-index) if there is no positioning, then add relative
positioning
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
ul li{
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
float: left;
margin-left: -1px;
}
ul li:hover{
border: 2px solid purple;
position: relative;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
If there is positioning, add z-index
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
ul li{
position: relative;
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
float: left;
margin-left: -1px;
}
ul li:hover{
border: 2px solid purple;
z-index: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
2. The text surrounds the floating element
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字围绕浮动元素</title>
<style>
.box{
width: 300px;
height: 145px;
background-color: rgb(150, 180, 114);
margin: 100px auto;
padding: 5px;
}
.image{
float: left;
width: 128px;
height: 145px;
margin-right: 5px;
}
.image img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="image">
<img src="../02/image/0001.png" alt="">
</div>
<p>如果你设计的软件猪不能使你就是猪;让每一个软件使用者都成为我们软件的设计者</p>
</div>
</body>
3. Ingenious use of inline blocks
① How to achieve the effect of the following pictures
②, code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块巧妙运用</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
width: 36px;
height: 36px;
display: inline-block;
background-color: #f7f7f7;
border: 1px solid #ccc;
line-height: 36px;
text-align: center;
/* 取消下划线 */
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .btn1,
.box .btn2 {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
width: 45px;
height: 36px;
border: 1px solid #ccc;
/* 取消点击时的蓝色/黑色边框 */
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="btn1"><<上一页</a>
<a href="#">1</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="elp">...</a>
<a href="#" class="btn2">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>
4. css triangle enhancement
① How to achieve the effect of the purple frame in the following picture
②, code implementation
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角</title>
<style>
.box1 {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-top: 70px solid transparent;
border-bottom: 0 solid transparent;
border-left: 0 solid transparent;
border-right: 30px solid purple;
}
.price{
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.one{
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.one i{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.two{
font-size: 13px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="one">$1234
<i></i>
</span>
<span class="two">$2345</span>
</div>
</body>
8. Summary
Through the use of sprite maps, CSS triangles, user interface styles, vertical alignment, overflow ellipsis, and common layout techniques, we can more flexibly control the style and layout of web pages, and present users with a more beautiful and interactive web interface.