一、实现网易云音乐首页 item 左上角的图标
网易云音乐首页有的 item 中可能左上角还是包含一个图标,并且这个图标是在另外一张图片当中的,通过浏览器的检查工具查看具体的背景图和图标位置:
根据上篇文章中的抽取的 CSS 代码的例子,对于这个图标我们可以分成三个 CSS 选择器来共同实现,首先先把背景图以及图标的大小位置信息写出来,具体代码如下所示:
.icon2 {
background: url(../images/icon2.png) no-repeat;
display: inline-block;
}
.hot {
width: 40px;
height: 40px;
background-position: -135px -220px;
}
接着在封面图元素下面增加一个 i
元素,设置三个 class
值,除了上面两个还有一个 .icon2-hot
就是图标位置的选择器,具体代码如下:
<div class="top">
<img src="https://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140" alt="">
<!-- 封面背景 -->
<a class="cover"></a>
<!--封面左上角图标-->
<i class="icon2 hot icon2-hot"></i>
<div class="info">
<i class="icon icon-hearset hearset"></i>
<span class="count">2829万</span>
<i class="icon icon-play play"></i>
</div>
</div>
原样式中图标在左上角的位置,我们可以使用子绝父相,给 div.top
父元素设置相对定位,给图标元素 i.icon2-hot
设置相对定位,并且 left/top
偏移量均为 0,具体代码如下:
.item .top {
/* background-color: #f00; */
position: relative;
}
.item .top .icon2-hot {
position: absolute;
top: 0;
left: 0;
}
刷新浏览器,效果如下:
这样就可以将图标固定在左上角的位置了。
二、实现网易云首页 item 底部的描述
在完成了整个封面以及封面上的图标的设置之后,就剩余底部的描述内容了,我们可以先通过浏览器的检查工具查看描述信息的一些文字样式:
底部描述信息是一个超链接,我们需要将 div
改成 a
:
<a class="bottom" href="">这些充满『强烈画面感』的音乐</a>
根据原样式将字体大小设置为 14px:
.item .bottom {
font-size: 14px;
}
刷新浏览器,效果如下:
a
元素本身自带了一些样式,我们需要对 a
元素进行样式的重置:
a {
text-decoration: none;
color: #333;
}
再次刷新页面,效果如下:
原样式中封面与描述信息有一定的外间距,可以在 a.bottom
中通过设置 margin-top
来实现:
.item .bottom {
display: block;
font-size: 14px;
margin-top: 8px;
}
刷新浏览器,效果如下:
当鼠标悬浮在文字上时文字会出现下划线,因此需要设置 hover
状态,具体代码如下:
.item .bottom:hover {
text-decoration: underline;
}
刷新浏览器,效果如下:
当描述文字比较多的时候,比如 HTML 结构为下面这种情况:
<a class="bottom" href="">这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐</a>
刷新浏览器,效果如下:
此时描述信息在多行显示,我们需要将他们控制在两行内显示,并且使用省略号来代替,具体 HTML 代码如下:
.item .bottom {
display: block;
font-size: 14px;
margin-top: 8px;
/*设置超出内容使用省略号代替*/
/* white-space: nowrap; */
overflow: hidden;
text-overflow: ellipsis;
/*设置在两行中显示内容*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
刷新浏览器,效果如下:
具体的设置也可以参考 HTML + CSS 连载 | 23 - 盒子模型 B 站(下)中设置一行和多行省略的情况。