Table of contents
4.3 Prevent drag and drop text field resize
5.2 Solve the problem of the default blank gap at the bottom of the picture
6. Overflow text ellipsis display
1. Single-line text overflows and displays an ellipsis -- three conditions must be met
2. Multi-line text overflows and displays ellipsis
Xiaobai book delivery activity
3. CSS Triangle
Some triangles are common in web pages, and they can be drawn directly by using css, without having to make pictures or font icons.
<!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>三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>In order to consider compatibility issues: you can add line-height: 0; font-size: 0;
Case: The production of Jingdong Triangle
4. CSS User Interface Styles
4.1 What is interface style
The so-called interface style is to change some user operation styles in order to improve a better user experience. (i.e. mouseover changes its style)
- Change the user's mouse style
- form outline
- Prevent form fields from dragging
4.1 Mouse style cursor
li {cursor: pointer; }
Sets or retrieves which system-predefined cursor shape the mouse pointer adopts when moving over the object.
| attribute value | describe |
| default | white, default |
| pointer | tiny hand |
| move | move |
| text | text |
| not-allowed | prohibit |
Code
<!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>鼠标样式</title>
</head>
<body>
<ul>
<li style="cursor:default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor:move">我是鼠标移动样式</li>
<li style="cursor:text">我是鼠标文本样式</li>
<li style="cursor:not-allowed;">我是鼠标禁止样式</li>
</ul>
</body>
</html>4.2 outline outline
After adding outline: 0; or outline: none; style to the form, you can remove the default blue border.
input { outline: none: }
4.3 Prevent drag and drop text field resize
In actual development, the lower right corner of our text field cannot be dragged.
textarea {resize: none; }
Code:
<!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>用户界面样式-表单轮廓和防止拖拽文本域</title>
<style>
input,
textarea {
outline: auto;
}
textarea {
resize: none;
/* outline: none; */
}
</style>
</head>
<body>
<!--1.取消表单轮廓-->
<input type="text">
<!--2. 防止拖拽文本域-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 一般在写文本域的时候一般写在一行上面，如果不放在一行上面在输入的时候光标不会从最前面开始A -->
</body>
</html>5. vertical-align attribute
The vertical-align property of CSS is used in scenarios: it is often used to set the vertical alignment of pictures or forms (inline blocks) 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.
grammar:
vertical-align : baseline | top | middle | bottom
| value | describe |
| baseline | default. The element is placed on the baseline of the parent element |
| top | Aligns the top of the element with the top of the element in the row |
| middle | Place this element in the middle of the parent element |
| bottom | Aligns the top of the element with the top of the lowest element in the row |
Generally display: inline-block; and vertical-align: middle; are used together.
5.1 Pictures and forms are all inline block elements, and the default vertical-align is baseline alignment.
At this time, you can set the vertical-align attribute of the inline block elements of pictures and forms to middle to make the text and pictures vertically centered.
5.2 Solve the problem of the default blank gap at the bottom of the picture
Bug: There will be a blank gap at the bottom of the image, because the inline-block element will be aligned with the baseline of the text.
There are two main solutions:
- Add vertical-align: middle | top | bottom etc. to the image. (promoted use)
- Images can be converted into inline-block elements. display: block;
6. Overflow text ellipsis display
1. Single-line text overflows and displays ellipsis
2. Multi-line text overflows and displays ellipsis
1. Single-line text overflows and displays an ellipsis -- three conditions must be met
- First force the text to be displayed in one line white-space: nowrap; (default normal wraps automatically)
- The excess part is hidden overflow: hidden;
- The text is replaced with ellipsis text-overflow: ellipsis;
Code:
<!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>单行溢出文字显示省略</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 如果文字显示不开不自动换行 */
/* white-space: normal; */
white-space: nowrap;
/* 溢出的部分隐藏 */
overflow: hidden;
/* ellipsis 是省略的意思 */
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 major compatibility issues. It is used in webKit browsers or mobile terminals (most of the mobile terminals are webKit kernels)
- The overflow part is hidden overflow: hidden;
- Use ellipsis when text overflows text-overflow: ellipsis;
- Flexible box model display display: -webkit-box;
- Limit the number of lines of text displayed in a block element -webkit-line-clamp: 2;
- Set or retrieve the arrangement of the child elements of the flex box object -webkit-box-orient: vertical;
Code
<!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>多行文字溢出省略号显示</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>啦啦啦啦啦了了了了了了啦啦啦啦啦啦啦了了了了了了啦啦啦啦啦</div>
</body>
</html>Xiaobai book delivery activity:
" Git from entry to mastery "
【Reference copy】
- Establishing a correct concept of Git allows you to choose the correct Git command in your work.
2. Terminal instructions are combined with graphic interface tools to double the learning efficiency.
3. Not only teach you how to use it, but also let you know what you are using and why.
【brief introduction】
Git is a tool that feels easy to learn at first, but difficult to master. In addition to introducing the relevant knowledge of Git, this book also simulates various common situations to let readers know when to use which commands.
"Git from Getting Started to Mastering" is divided into 11 chapters. Chapters 1~3 introduce the installation tools and environment. Readers who have already installed Git can start reading directly from Chapter 4. Chapter 5 introduces the basic usage of Git. Although it is not difficult, it is the basis of the entire Git system. Chapter 6 introduces the commonly used branch functions and usage scenarios in Git, and Chapters 7-9 introduce how to modify existing history records, use labels, and how to deal with other common situations.
The previous content can be completed on your own computer, starting from Chapter 10 to introduce how to push a copy of the records in your computer to online (GitHub). *The last chapter (Chapter 11) introduces Git Flow, a development process that teams may use when developing.
Most of the reference books or online tutorials on the market teach you how to learn Git through terminal commands, which discourages many novices who want to learn Git. In addition to teaching you how to input Git commands in the terminal window, this book is also equipped with a graphical interface tool, which eases the learning curve for readers and makes it easier for readers to get started.
【About the Author】
Gao Jianlong, programmer, initiator and host of large-scale technical seminars (such as PHPConf, WebConf, RubyConf Taiwan, etc.) and community activities (such as Rails Girls Taipei, Taipei.rb). He is currently the co-founder and person in charge of Five Times Ruby. He has 20 years of experience in program development and nearly 10 years of teaching experience. He has promoted Ruby and Git in Taiwan for many years, and has taught courses in various universities and is very popular among students.
Jingdong self-operated purchase link:
"Git from entry to proficiency" (Gao Jianlong) [Abstract Book Review Trial Reading]-Jingdong Books