blog的前端代码
view | history | commit | commitdiff
inleft
2022-03-01 a71b6416b467cd3b2ec24efd68accc85223e8a3b
commit | author | age
b4f6a5 1 <template>
I 2     <div style="display: flex;" class="link-box">
3         <!-- <a href="#" target="_blank" class="no-underline"> -->
4         <a href="#" class="no-underline">
5             <div class="thumb">
6                 <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
7             </div>
8             <div class="content">
9                 <p class="title">
10                     长野 の BLOG
11                 </p>
12             </div>
13         </a>
14         <a href="#" class="no-underline">
15             <div class="thumb">
16                 <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
17             </div>
18             <div class="content">
19                 <p class="title">
20                     长野 の BLOG
21                 </p>
22             </div>
23         </a>
24         <a href="#" class="no-underline">
25             <div class="thumb">
26                 <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
27             </div>
28             <div class="content">
29                 <p class="title">
30                     长野 の BLOG
31                 </p>
32             </div>
33         </a>
34
35     </div>
36 </template>
37
38 <script>
39 </script>
40
41 </script>
42
43 <style lang="less">
44     .myFriend {
45         a {
46             padding: 10px;
47         }
48     }
49
50     .link-box a {
51         width: 33.75rem;
52         background: #fff;
53         float: left;
54         margin: 0 0 4.375rem;
55         color: #2E2E2E;
56         text-decoration: none;
57         border-bottom: none;
58         border-radius: .25rem;
59         overflow: hidden;
60         -webkit-touch-callout: none;
61         -webkit-user-select: none;
62         -moz-user-select: none;
63         -ms-user-select: none;
64         user-select: none;
65         // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
66         -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
67         -moz-box-shadow: 0 3px 0.0625rem #0000001a;
68         box-shadow: 0 3px 0.0625rem #0000001a;
69         -webkit-transform: translate3d(0, 0, 0);
70         -moz-transform: translate3d(0, 0, 0);
71         -ms-transform: translate3d(0, 0, 0);
72         -o-transform: translate3d(0, 0, 0);
73         transform: translate3d(0, 0, 0);
74         -webkit-transition: .3s;
75         -moz-transition: .3s;
76         -ms-transition: .3s;
77         -o-transition: .3s;
78         transition: .3s;
79     }
80
81     .link-box a:hover:after {
82         left: 0;
83         width: 100%;
84         -webkit-transition: width 350ms;
85         -moz-transition: width 350ms;
86         -ms-transition: width 350ms;
87         -o-transition: width 350ms;
88         transition: width 350ms;
89     }
90
91     .link-box a .thumb {
92         font-size: 0;
93         overflow: hidden;
94         background-color: #fff;
95         margin: 0;
96         border-top-left-radius: .25rem;
97         border-top-right-radius: .25rem;
98     }
99
100     .link-box a .thumb img {
101         width: 100%;
102         height: auto;
103         position: relative;
104         margin: 0;
105         padding: 0;
106         -webkit-transition: .4s;
107         -moz-transition: .4s;
108         -ms-transition: .4s;
109         -o-transition: .4s;
110         transition: .4s;
111     }
112
113     .link-box a .content {
114         text-align: center;
115         background-color: #fff;
116     }
117
118     .link-box a .content .title {
119         text-align: center;
120         padding: 1rem .25rem;
121         font-weight: 500;
122         color: #333;
123         white-space: nowrap;
124         overflow: hidden;
125         text-overflow: ellipsis;
126         margin: 0;
127     }
128
129     .link-box a:hover,
130     .link-box a:active {
131         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
132         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
133         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
134         -webkit-transform: translateY(-0.25rem);
135         -moz-transform: translateY(-0.25rem);
136         -ms-transform: translateY(-0.25rem);
137         -o-transform: translateY(-0.25rem);
138         transform: translateY(-0.25rem);
139         -moz-transform: none;
140     }
141
142     @media screen and (min-width: 1600px) {
143         .link-box a {
144             margin: 0 0.9375rem 3.75rem;
145             width: -webkit-calc(200% / 5 - 1.875rem);
146             width: calc(200% / 5 - 1.875rem);
147         }
148     }
149
150     @media screen and (max-width: 1599px) and (min-width: 768px) {
151         .link-box a {
152             margin: 0 0.9375rem 3.75rem;
153             width: -webkit-calc(150% / 4 - 1.875rem);
154             width: calc(150% / 4 - 1.875rem);
155         }
156     }
157
158
159
160     @media screen and (max-width: 500px) and (min-width: 319px) {
161         .link-box a {
162             margin: 0 0.75rem 1.5rem;
163             width: -webkit-calc(50% - 1.5rem);
164             width: calc(50% - 1.5rem);
165         }
166     }
167
168     @media screen and (max-width: 767px) and (min-width: 501px) {
169         .link-box a {
170             margin: 0 0.9375rem 3.75rem;
171             width: -webkit-calc(100% / 3 - 1.875rem);
172             width: calc(100% / 3 - 1.875rem);
173         }
174     }
175 </style>