blog的前端代码
view | history | commit | commitdiff
inleft
2022-01-21 b505f3648a10dd998ae9fe7a6edb1bf125d7d6a6
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     export default {}
40 </script>
41
42 </script>
43
44 <style lang="less">
45     .myFriend {
46         a {
47             padding: 10px;
48         }
49     }
50
51     .link-box a {
52         width: 33.75rem;
53         background: #fff;
54         float: left;
55         margin: 0 0 4.375rem;
56         color: #2E2E2E;
57         text-decoration: none;
58         border-bottom: none;
59         border-radius: .25rem;
60         overflow: hidden;
61         -webkit-touch-callout: none;
62         -webkit-user-select: none;
63         -moz-user-select: none;
64         -ms-user-select: none;
65         user-select: none;
66         // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
67         -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
68         -moz-box-shadow: 0 3px 0.0625rem #0000001a;
69         box-shadow: 0 3px 0.0625rem #0000001a;
70         -webkit-transform: translate3d(0, 0, 0);
71         -moz-transform: translate3d(0, 0, 0);
72         -ms-transform: translate3d(0, 0, 0);
73         -o-transform: translate3d(0, 0, 0);
74         transform: translate3d(0, 0, 0);
75         -webkit-transition: .3s;
76         -moz-transition: .3s;
77         -ms-transition: .3s;
78         -o-transition: .3s;
79         transition: .3s;
80     }
81
82     .link-box a:hover:after {
83         left: 0;
84         width: 100%;
85         -webkit-transition: width 350ms;
86         -moz-transition: width 350ms;
87         -ms-transition: width 350ms;
88         -o-transition: width 350ms;
89         transition: width 350ms;
90     }
91
92     .link-box a .thumb {
93         font-size: 0;
94         overflow: hidden;
95         background-color: #fff;
96         margin: 0;
97         border-top-left-radius: .25rem;
98         border-top-right-radius: .25rem;
99     }
100
101     .link-box a .thumb img {
102         width: 100%;
103         height: auto;
104         position: relative;
105         margin: 0;
106         padding: 0;
107         -webkit-transition: .4s;
108         -moz-transition: .4s;
109         -ms-transition: .4s;
110         -o-transition: .4s;
111         transition: .4s;
112     }
113
114     .link-box a .content {
115         text-align: center;
116         background-color: #fff;
117     }
118
119     .link-box a .content .title {
120         text-align: center;
121         padding: 1rem .25rem;
122         font-weight: 500;
123         color: #333;
124         white-space: nowrap;
125         overflow: hidden;
126         text-overflow: ellipsis;
127         margin: 0;
128     }
129
130     .link-box a:hover,
131     .link-box a:active {
132         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
133         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
134         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
135         -webkit-transform: translateY(-0.25rem);
136         -moz-transform: translateY(-0.25rem);
137         -ms-transform: translateY(-0.25rem);
138         -o-transform: translateY(-0.25rem);
139         transform: translateY(-0.25rem);
140         -moz-transform: none;
141     }
142
143     @media screen and (min-width: 1600px) {
144         .link-box a {
145             margin: 0 0.9375rem 3.75rem;
146             width: -webkit-calc(200% / 5 - 1.875rem);
147             width: calc(200% / 5 - 1.875rem);
148         }
149     }
150
151     @media screen and (max-width: 1599px) and (min-width: 768px) {
152         .link-box a {
153             margin: 0 0.9375rem 3.75rem;
154             width: -webkit-calc(150% / 4 - 1.875rem);
155             width: calc(150% / 4 - 1.875rem);
156         }
157     }
158
159
160
161     @media screen and (max-width: 500px) and (min-width: 319px) {
162         .link-box a {
163             margin: 0 0.75rem 1.5rem;
164             width: -webkit-calc(50% - 1.5rem);
165             width: calc(50% - 1.5rem);
166         }
167     }
168
169     @media screen and (max-width: 767px) and (min-width: 501px) {
170         .link-box a {
171             margin: 0 0.9375rem 3.75rem;
172             width: -webkit-calc(100% / 3 - 1.875rem);
173             width: calc(100% / 3 - 1.875rem);
174         }
175     }
176 </style>