1. 基于媒体查询和 Grid 布局
https://codepen.io/kevinpowell/pen/ExaNWyM
<div class="card">
<img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img">
<ul class="social-list">
<li><a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a></li>
<li><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a></li>
</ul>
<h2 class="profile-name">Ramsey Harper</h2>
<p class="profile-position">Graphic Designer</p>
<p class="profile-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum?</p>
</div>
<style>
.card {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2em;
/* 默认采用垂直布局 */
grid-template-areas:
"name"
"image"
"social"
"position"
"description";
}
/* 利用媒体查询,当视口宽度大于 600px 的时候,
采用更易于阅读的双列布局方式 */
@media (min-width: 600px) {
.card {
text-align: left;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"image name"
"image position"
"social description";
}
}
.profile-name { grid-area: name; }
.profile-position { grid-area: position; }
.profile-info { grid-area: description; }
.profile-img { grid-area: image; }
.social-list { grid-area: social; }
</style>
2. 使用 Grid 布局实现内容重叠
https://codepen.io/kevinpowell/pen/ExaNmQN
<div class="grid">
<img src="https://unsplash.it/200/300" alt="" class="image">
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae, ut soluta autem dolorum. Nesciunt dolore ipsum corporis modi magni labore voluptatibus, harum maiores!</p>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
/* .image, .body 都占据一行 */
.image,
.body {
grid-row: 1 / 2;
align-self: center;
}
/* .image 占据第一、第二列 */
.image { grid-column: 1 / 3; }
/* .body 占据第二列到最后一列 */
.body {
grid-column: 2 / -1;
}
<style>
3. 使用 outline 实现偏移“边框”效果
https://codepen.io/kevinpowell/pen/gObLqxz
使用 outline
简单的模拟出元素边框效果,与 outline-offset
属性结合使用,还能制作出偏移“边框”效果出来。
.outline {
outline: 2px solid white;
outline-offset: -10px;
}
4. border-radius 的斜线语法
https://codepen.io/kevinpowell/pen/JjobxBN
border-radius
除了普通的四个值语法外,还能使用用斜线分割的、最多 8 个值的语法,后者可以更加细粒度的控制每个角的两个角半径值
.border-radius {
border-radius: 50px 25px / 25px 50px;
}
5. 背景图片从文字透出
https://codepen.io/kevinpowell/pen/OJPPGwN
<h2 class="image-text">This is pretty easy!</h2>
<style>
.image-text {
background-image: url(https://picsum.photos/id/865/300/100);
background-size: cover;
background-clip: text;
color: transparent;
}
</style>
6. 相关链接
https://codepen.io/collection/nJzQBY
https://twitter.com/hashtag/CSSTipOfTheDay?src=hashtag_click&f=live
最新评论
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?
正则规则的原理可以多说一些