一些细节设计 - 设计总结

1
<div class="n-fauxma">简单椭圆框
2
<style>
3
.n-fauxma {
4
    -webkit-box-align: center;
5
    align-items: center;
6
    backface-visibility: hidden;
7
    background-color: rgb(255, 66, 77);
8
    border-radius: 9999px;
9
    border: 1px solid rgb(255, 66, 77);
10
    box-sizing: border-box;
11
    cursor: pointer;
12
    display: inline-flex;
13
    font-weight: 500;
14
    height: unset;
15
    -webkit-box-pack: center;
16
    justify-content: center;
17
    padding: 0.46875rem 1rem;
18
    position: relative;
19
    pointer-events: unset;
20
    text-align: center;
21
    text-decoration: none;
22
    text-transform: none;
23
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
24
    user-select: none;
25
    white-space: unset;
26
    width: 100%;
27
    color: rgb(255, 255, 255) !important;
28
    font-size: 0.875rem !important;
29
}
30
</style></div>

1
<div style="background-color: rosybrown !important;">
2
<div class="btn-light">
3

4
  </div>
5
</div>
6
<style>
7
.btn-light {
8
  color: #424446 !important;
9
  -webkit-backdrop-filter: blur(5px);
10
  backdrop-filter: blur(5px);
11
  background-color: rgba(250, 250, 250, 0.5) !important;
12
  border-color: transparent !important;
13
  width: 200px;
14
  height: 200px;
15
  margin: 0 auto;
16
  border-radius: 100%;
17
}
18

19
.btn-light:hover {
20
  background-color: rgba(255, 255, 255, 0.8) !important;
21
}
22
</style>

1
<div class="bg-go">
2
    <div class="go">
3
      <span>去天猫商城</span>
4
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAgUlEQVQokYXOTQqDQAyG4dBbdeUpWn9v5h16quJCQdy40corQzNQhm9s4Mss5iGJAT0wAw1gKqFNfOsDdDn0cIC/rUIhzwQ2CoWUCawVCqkSWCmkYKmQ+arD4XYzXYOZ7f6zqykFsPqUBbj/BenhEvyiLIjoEkQ0XoGIXsA7BwA7AYXPxrhaejrsAAAAAElFTkSuQmCC" class="arrow">
5
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAx0lEQVQokX3RvQrCMBDA8b91ENx8hWZJnsLFxc3Rtj6Br+Ti16LuPoHgIyRLRx0FZ5HKaVpSaz1ICNwvd+GC1fHC6vhmdZwWRcGvFQETYACsnVEzfoSgOfAEusDSGZV9s0jb/ACkAVw5o9Iakk3bfA9kAZTWSQ15uANmAdw4o6aS68jrw/CJrYdyIWsgPjDxUDo9oob4xFWS/txEzqghcAR6wB0Y1VAA+h6Mtc3PFWoD1Qj+gfcIrI7/grKSfEsrKNEJuLQBgBczxWNEIEZ4tQAAAABJRU5ErkJggg==" class="arrow2">
6
    </div>
7
  </div>
8
  <style>
9
    .bg-go {
10
      background-color: #d72822;
11
      padding: 2em;
12
    }
13

14
    .bg-go {
15
      display: flex;
16
    }
17

18
    .go {
19
      text-align: center;
20
      border: 1px solid #fff;
21
      color: #fff;
22
      border-radius: 16px;
23
      padding: 0 1.5em;
24
      margin: 48px 0;
25
      margin-top: 16px;
26
      line-height: 2em;
27
      font-size: 1rem;
28
      transition: .25s;
29
      cursor: pointer;
30
      position: relative;
31
    }
32

33
    .go {
34
      max-width: 136px;
35
      margin: 0 auto;
36

37
    }
38

39
    .go:hover {
40
      background: #fff;
41
      color: #d72822;
42
    }
43

44
    .go:hover .arrow2 {
45
      opacity: 1;
46
    }
47

48
    .go span {
49
      display: inline-block;
50
      transform: translateY(1px) translateX(-4px);
51
    }
52

53
    /*图标*/
54
    .go .arrow,
55
    .go .arrow2 {
56
      top: 50%;
57
      right: 8px;
58
      transform: translateY(-50%) scale(0.8);
59
      position: absolute;
60
    }
61

62
    .go .arrow2 {
63
      transition: .25s;
64
      opacity: 0;
65
    }
66
  </style>

1
<div class="n-20210107">
2
    <div class="tab2-step">
3
      <div class="step-item">
4
        <a class="step-item-main" href="#" target="_blank" rel="noopener">
5
          <div class="step-num">1</div>
6
          <div class="step-content">
7
            <div class="step-name">注册阿里云账号</div>
8
          </div>
9
        </a>
10
      </div>
11
      <div class="step-item">
12
        <a class="step-item-main" href="#" target="_blank" rel="noopener">
13
          <div class="step-num">2</div>
14
          <div class="step-content">
15
            <div class="step-name">完成实名认证</div>
16
          </div>
17
        </a>
18
      </div>
19
      <div class="step-item">
20
        <a class="step-item-main" href="#" target="_blank" rel="noopener">
21
          <div class="step-num">3</div>
22
          <div class="step-content">
23
            <div class="step-name">完成学生认证</div>
24
          </div>
25
        </a>
26
      </div>
27

28
<div class="step-item"><a class="step-item-main" href="#" target="_blank" rel="noopener"><div class="step-num">4</div><div class="step-content"><div class="step-name">专享优惠购买</div></div></a></div>
29

30
    </div>
31

32
  </div>
33
  <style>
34
    .n-20210107 {
35
 width: 1180px;
36
position: absolute;
37
    top: 58em;
38
    right: -25em;
39
    }
40

41
    .tab2-step {
42
      padding: 19px 0;
43
      display: flex;
44
      justify-content: space-around;
45
      background-image: linear-gradient(90deg, #ff9524 1%, #ff6a00);
46
    }
47

48
    .tab2-step .step-item {
49
      position: relative;
50
    }
51

52
    /*虚线*/
53
    .tab2-step .step-item:before {
54
      position: absolute;
55
      top: 50%;
56
      content: "";
57
      width: 160px;
58
      right: -160px;
59
      background: linear-gradient(90deg, #ffc58d, #ffc58d 7px, transparent 0, transparent);
60
      background-size: 14px 100%;
61
      height: 1px;
62
    }
63

64
    /*内容*/
65
    .tab2-step .step-item .step-item-main {
66
      width: 185px;
67
      height: 50px;
68
      display: flex;
69
      background-image: linear-gradient(90deg, transparent, transparent 25px, hsla(0, 0%, 100%, .8) calc(4% + 25px), #fff);
70
      position: relative;
71
      z-index: 2;
72
border-bottom: none;
73
    }
74

75
    .tab2-step .step-item .step-item-main .step-num {
76
      width: 50px;
77
      height: 50px;
78
      border: 5px solid #ffd5b7;
79
      flex-shrink: 0;
80
      border-radius: 50%;
81
      background: #fff;
82
      line-height: 40px;
83
      text-align: center;
84
      font-weight: 500;
85
      font-size: 20px;
86
      color: #ff5e00;
87

88
      box-sizing: border-box;
89
    }
90

91
    /*核心*/
92
    .tab2-step .step-item .step-item-main .step-content {
93
      display: flex;
94
      flex-direction: column;
95
      justify-content: center;
96
      font-weight: 500;
97
      font-size: 14px;
98
      color: #ff6a00;
99
      padding: 0 7px;
100
    }
101

102
    /*三角形*/
103
    .tab2-step .step-item:after {
104
      content: "";
105
      position: absolute;
106
      border: 10px solid transparent;
107
      border-left-color: #ffc58d;
108
      border-left-width: 18px;
109
      top: 50%;
110
      transform: translateY(-50%);
111
      right: -80px;
112
    }
113

114
    .tab2-step .step-item:last-child::after,
115
    .tab2-step .step-item:last-child::before {
116
      display: none;
117
    }
118
  </style>

1
<a class="text-action " href="#" target="_blank" rel="noopener">查看全部代金券
2
    <i class="right-icon-action  aliyun-icon-arrow_right"></i></a>
3
  <style>
4
    .text-action {
5

6
      line-height: 20px;
7
      background-image: linear-gradient(90deg, #ff4f1d, #ff1866);
8
      height: 42px;
9
      border-radius: 32px;
10
      display: inline-block;
11
      padding: 0 39px;
12
      padding-right: 63px;
13
      line-height: 42px;
14
      color: #fff!important;
15
      font-size: 16px;
16
      position: relative;
17

18
      text-decoration: none;
19
      transition: color .3s;
20

21
    border-bottom: none!important;
22
    }
23

24
    /*图标*/
25
    .text-action .right-icon-action {
26
      background: #fff;
27
      width: 32px;
28
      height: 32px;
29
      border-radius: 50%;
30
      color: #eb2629;
31
      display: inline-block;
32
      position: absolute;
33
      right: 5px;
34
      top: 5px;
35
      line-height: 32px;
36
      font-size: 24px;
37

38
      font-family: "aliyun-icon" !important;
39
      font-style: normal;
40
      -webkit-font-smoothing: antialiased;
41

42
      text-align: center;
43
    }
44

45
    .aliyun-icon-arrow_right:before {
46
      content: ">";
47
    }
48
  </style>

1
  <div class="dahuzi_file_download">
2
    <div class="background-primary">
3
      <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2179" width="30"
4
        height="30">
5
        <path
6
          d="M256 85.333333a85.333333 85.333333 0 0 0-85.333333 85.333334v682.666666a85.333333 85.333333 0 0 0 85.333333 85.333334h512a85.333333 85.333333 0 0 0 85.333333-85.333334V341.333333l-256-256H256m0 85.333334h298.666667v213.333333h213.333333v469.333333H256V170.666667m85.333333 341.333333v85.333333h341.333334v-85.333333H341.333333m0 170.666667v85.333333h213.333334v-85.333333H341.333333z"
7
          fill="#ffffff" p-id="2180"></path>
8
      </svg>
9
    </div>
10
    <div class="file_download_info">
11
      <h3 class="file_download_title">R复古主题</h3>
12
      <div class="file_download_subtitle"><small>一款优秀的WordPress个人博客主题</small></div>
13
    </div>
14
    <div class="file_download_but">
15
      <a rel="nofollow noopener" target="_blank" href="#">
16
        <i class="n-fa"></i> 官方购买</a>
17
    </div>
18
  </div>
19
<style>
20
.dahuzi_file_download {
21
  padding: 20px;
22
  background-color: #3f51b5;
23
  display: flex;
24
  flex-wrap: wrap;
25
  border-radius: 4px;
26

27
  max-width: 808px;
28
  margin: 2em auto;
29

30
  box-sizing: border-box;
31
}
32

33
/*第一个*/
34
.dahuzi_file_download .background-primary {
35
  height: 54px !important;
36
  width: 54px !important;
37
  line-height: 70px;
38
  text-align: center;
39
  background-color: #4caf50;
40
  display: inline-block;
41
  margin-right: 15px;
42
  border-radius: 4px;
43
}
44

45
/*第二个*/
46
.dahuzi_file_download .file_download_info {
47
  flex: 1;
48
}
49

50
/*标题*/
51
.dahuzi_file_download .file_download_title {
52
  font-size: 1rem;
53
  line-height: 1.4;
54
  text-align: left;
55
  margin-bottom: 5px;
56
  margin-top: 5px;
57
  color: #fff;
58
}
59
/*描述*/
60
.dahuzi_file_download .file_download_subtitle {
61
  font-size: 12px;
62
  color: #d2d2d2;
63
}
64

65
/*第三个*/
66
.dahuzi_file_download .file_download_but {
67
  margin-left: 15px;
68
  background-color: #4caf50;
69
  height: 35px;
70
  margin-top: 9px;
71
  border-radius: 3px;
72
  padding-top: 5px;
73
  /*调整位置*/
74
  box-sizing: border-box;
75
}
76

77
.dahuzi_file_download .file_download_but a {
78
  color: #fff;
79
  font-size: 14px;
80
  padding: 10px 15px;
81

82
border-bottom: 0px;
83
}
84

85
.dahuzi_file_download .file_download_but a .n-fa::before {
86
  content: "★";
87
  font-style: normal;
88
}
89

90
</style>