酷狗经典界面复现
-
页面结构分析
先将页面分为 a bc d 三大块；再将bc细分
-
矢量图标的使用
Iconfont阿里巴巴矢量图标库
https://www.iconfont.cn/ 下载好添加到项目使用即可
Font Awesome图标库
https://fontawesome.com/
使用方法
1、先下载Font Awesome文件
2、将压缩好的文件拖到自己的项目中
3、在HTML文件中引入对应的css
4、开始使用
在图标库直接搜索图标，复制代码即可
5、具体操作见文档
http://www.fontawesome.com.cn/examples/
-
实训笔记
1、设置头像：主要的变圆形属性：
border-radius:50%;
2、鼠标漂浮变手指：
cursor: pointer;
3、伪类（鼠标漂浮变色）:
.song:hover{
background-color: rgba(192,192,192,0.5);
}
4、rgb()和rgba（）
rgb三原色(红绿蓝)：rgb(0,0,0) 每一项0-255变化，全0为黑，全255为白
rgba();则最后一个a变化范围为0~1代表透明度
.a{
color=rgb(0,24,78)
}
.a{
color=rgba(0,24,78，0.5)
}
5、滚轮
-
出现滚轮
overflow:scroll; ##水平和竖直滚轮都出现
overflow-y:scroll; ##只出现竖直滚轮
overflow-x:scroll; ##只出现水平滚轮
overflow-y:hidden; ##隐藏竖直滚轮
overflow-x:hidden; ##隐藏水平滚轮
-
滚轮美化
.f::-webkit-scrollbar {
width: 5px;
}
/* 滚动槽 */
.f::-webkit-scrollbar-track {
border-radius: calc(50%);
}
/* 滚动条滑块 */
.f::-webkit-scrollbar-thumb {
border-radius: inherit;
background-color: rgba(144, 147, 153, 0.3);
-webkit-transition: 0.3s background-color;
transition: 0.3s background-color;
}
6、输入框
<span id="search">
<form>
<input class="search-style" type="text" placeholder=" PUMA NINEONE"/>
<img class="search-image" src="img/搜索.png" />
</form>
</span>
7、位置固定
position: absolute;
8、靠左浮动
float: left;
9、文本居中
text-align: center;
10、字幕滚动
<marquee>字幕内容</marquee>
-
滚动方向
<marquee direction="up" >字幕内容</marquee>
-
滚动速度
<marquee scrollamount="10" >字幕内容</marquee>
11、多行编辑相同内容
ctrl+左键点每一行 可以多选无限行添加相同内容
12、旋转
style="transform: rotate(180deg);" 旋转180°
13、加边框线
border: 2px solid white;
border-radius: 25px; 边框圆形化
14、播放器；自动循环播放
<!-- 歌曲播放 -->
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls" height= "100" width = "100" class="media-controls" hidden ="true">
<!-- 自动播放循环属性
autoplay="autoplay" loop="loop" preload="auto" controls="controls"
-->
<source src="media/NINEONE%20-%20PUMA.mp3" type="audio/mp3"></source>
<source src="media/NINEONE%20-%20PUMA.mp3" type="audio/ogg"></source>
<embed height="100" width="100" src="media/NINEONE%20-%20PUMA.mp3"/>
</audio>
15、伪类补充
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
16、毛玻璃效果
添加 background-color：rgba（x,x,x,0.1~0.3）
-
原界面
-
复现结果
