this belongs to the step bar.
hasn't written a style for a long time. It took three minutes to do it. does not recommend using pictures .
<!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>
.step{
/* background-color: azure; */
height: 100px;
margin-top: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.step-circle{
width: 58px;
height: 58px;
border-radius: 30px;
background-color: -sharpf0f3f5;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
position: relative;
}
.step-circle::before{
content: "";
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 48px;
height: 48px;
/* background-color: -sharp495a75; */
background-color: -sharpfff;
border-radius: 48px;
}
.step-circle>span{
position: relative;
z-index: 2;
color: -sharp495a75;
}
.between{
width: 428px;
height: 18px;
background-color: -sharpf0f3f5;
margin: 0 -3px;
}
.currnet>span{
color: -sharp5dbcac;
}
.currnet::before{
background-color: -sharp495a75;
}
</style>
</head>
<body>
<div class="step">
<div class="step-circle currnet">
<span>1</span>
</div>
<div class="between"></div>
<div class="step-circle">
<span>2</span>
</div>
<div class="between"></div>
<div class="step-circle">
<span>3</span>
</div>
</div>
</body>
</html> 1. Through pictures, the effects of different states are divided into different pictures.
2, div+css can achieve a similar effect.
Previous: Flask cannot modify access ip and port
Next: Npm installation from github address is not responding
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...
dynamic effects that are often overlooked are so important to user experience design Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...
1. First of all, I have declared my font 2. 3. . 4. However, the above problems only occur in chrome and Firefox, where special fonts are successfully rendered on Safari . ...
sometimes normal and sometimes abnormal, use document.body.scrollTop = document.body.scrollHeight;; on the contrary, input will not be pushed up. Can you give me some advice? Thank you when the keyboard pops up, there is a value in document.body....
recently encountered a problem, in the cat s eye movie official website to see the normal display of numbers on the page, but to check the source code is a white box, can anyone solve the problem? screenshots of some cat s eye movie pages: ...
table component of elementUI used after adding a piece of data, if you have a scroll bar, you need to scroll to the corresponding position and highlight ...
there is a demand for the product, and there is no good solution after thinking about it, so I turn to you for help. no, no, no. the requirement is like this: an element (width and height is not fixed, defined according to browser width and height) cont...
A novice at the front end, who knows about html and css for about a month and a half, wants to ask the gods to take a look at it. There is such a page as the first screen, text plus pictures, the first half of the text is fixed, the second half is t...
<div> <p id=1> <p id=2> <p id=3> < div> p1 <div> <p id=2> <p id=3> <p id=4> < div> how to implement DIV can only display 3 pieces of data, and the new data will top up the previous data, simil...
first of all, IE9 does not support the placeholder attribute; placeholder under IE10 and Edge cannot set color and size; but after reading the registration of Xiaomi s official website, it is OK to ask how to achieve placeholder compatibility abo...
use javascript to imitate the sticky drag-and-drop effect of qq unread messages ...
when the width of the content in body exceeds the width of body due to the setting of left,margin thank you, and the width of body is not as wide as the width of the content, how to make the width of body equal to the width of the complete content? ...
ask a question about css breaking the table on this node? Thank you as shown in the picture. I erased the text, formatted it and stretched it out. As follows: http: www.yiyuanzhaopin.com . http: www.yiyuanzhaopin.com . above is the source cod...
question 1. For the layout of the following picture, first of all, the picture is uploaded by the user and needs to be displayed in a square. In the face of the variable proportion of the picture uploaded by the user, how will it be perfectly displayed ...
I want to be able to generate a small sound effect such as jquery after sending a unit. I wonder if there is any relevant way or example that can achieve this function? " I want to be able to produce a small sound effect. I want to be able to produc...
similar effect: question: the width of the parent element adapts to the width of the browser window, so how are the child elements evenly distributed horizontally (including the left and right margins)? requires compatibility with ie8 regardless of...
the page is segmented and typeset like word. Each page has a fixed width and height of 990 * 1400, which needs to be truncated and inserted into the header and footer. there are places where pages may be truncated: 1. 2. table 3. ul the realiza...
var imgs = $("-sharppictureQueryTable img").prevObject[0].images; the following figure is the printed result of the above sentence: console.loglength0dom console.log($( "-sharppictureQueryTable img ")) : : { title : "&...
separate structure from style Independent structure and style (skin) rules (Separate structure and skin) .metadata{font-size:1.2em; text-align:left; margin:10px 0;} .metadata{ font-size:1.2em; margin:10px 0; ** width...
App shares the content displayed by Wechat QQ, etc.; do you want to rewrite a page according to the layout on App? (App is developed natively by outsourcing companies) figure 1 below is the App interface, and after it is opened by Wechat, it is show...