音乐播放器界面设计

音乐播放器界面简单制作

这个音乐播放器界面的设计主要涉及到div对整个页面的布局分层想法 然后涉及到 定位; 浮动 ; 精灵图 以及伪类选择器的样式用法 下面我们进入正题吧

首先我们搭建整体的布局


具体的css样式参数我们在代码中讲解 我们分析一下这个整体的div布局最外围是<body>给它设置宽高,<warpper>作为播放器页面的主体我们让它居中显示并带上上边距。 内容部分我们设置一左一右也是为了后面的浮动做准备,最后<left-bottom>作为底部鼠标触碰弹出框 为其设置hover属性。

下面是HTML部分代码
<body>
		<div id="warpper">
			<div class="left">
				<a class="left-dj" href="#"></a>
				
				<div class="left-bottom">
					<p class="title">最酷的百大DJ即将引爆电音新浪潮 </p>
					<p class="author">电疗中心</p>
					<i class="play"></i>
				</div>
				<p class="left-num">
					<i></i>
					<span>36.8万</span>
				</p>	
			</div>
			<div class="right">
				<a href="#" style="background-image: url(img/02.jpg);"></a>
				<a href="#" style="background-image: url(img/03.jpg);"></a>
				<a href="#" style="background-image: url(img/04.jpg);"></a>
				<a href="#" style="background-image: url(img/05.jpg);"></a>
			</div>
		</div>
	</body>

按照我们之前设想的边框进行排版并输入内容

然后我们通过link链接一个css样式表
*{
	/*取消浏览器缺省样式*/
	margin: 0;
	padding: 0;
}
#warpper{
	width: 820px;
	height: 500px;
	/*让最底层warpper位置居中*/
	margin: 10px auto 0;
}
.left,.right{
	float: left;
	position: relative;
}
.left-dj{
	/*设置显示为行内块元素*/
	display: inline-block;
	width: 300px;
	height: 320px;
	margin: 10px;
	background-image: url(../img/01.jpg);
	/*设置背景图片为居中避免造成平铺效果*/
	background-size: contain;
}
.right{
	width: 340px;
	height: 500px;
	margin-top: 10px;
}
.right a{
	
	float: left;
	width: 150px;
	height: 150px;
	margin: 5px;
}

.left-num{
	/*相对父元素做绝对定位*/
	position: absolute;
	top: 10px;
	right: 12px;
}

.left-num span{
	color: #fff;
}
.left-num i{
	display: inline-block;
	width: 15px;
	height: 15px;
	background-image: url(../img/sprite.png);
	background-position: 0 -195px;
}

.left-bottom{
	/*初始状态为不显示*/
	display: none;
	position: absolute;
	width: 300px;
	height: 80px;
	background-color: rgba(0,0,0,.2);
	bottom: 14px;
	left: 10px;
}
.left-bottom p{
	margin: 10px;
	width: 200px;
	white-space: nowrap;
	/*text-overflow: ellipsis;
	overflow: hidden;*/
	/*这里代码作用是过多文字不转行转化成省略号*/	 
	color: #fff;
}
.play{
	position: absolute;
	
	right: 5px;
	top: 30px;
	width: 40px;
	height: 40px;
	background-image: url(../img/sprite.png);
	background-position: 0 -360px;
}
/*这里我们伪类选择器选择.left下面的left-bottom*/
.left:hover .left-bottom{
	display: block;
}

  • 关于定位问题position的取值用到了 relativeabsolute 在定义absolut 时它会相对于离它最近已经定位祖先级元素并且会脱离文档流
  • 关于伪类选择器hover要注意的是一定要定位到需要增加样式的类上
  • 一些边框的数据可以根据实际情况进行更改,备注部分介绍了用到的样式属性的作用 ,后面四张图片的样式都可以参考第一张

精灵图

精灵图就是将多个小图片整合在一张图上,这样做可以减少浏览器向服务器发送请求次数,提高网页的加载速度 而在浏览器中就是使用<background-position>来调整精灵图的位置,通过宽高来确定需要的图片

    width: 15px;
	height: 15px;
	background-image: url(../img/sprite.png);
	background-position: 0 -195px;

关于精灵图的定位我们来看这张图 方便理解为什么position的取值是负数因为xy轴的正方向分别为右和下 而精灵图的位置是相对于原点的即要将你需要的图片上边框位置固定在原点因为x、y轴的正方向分别为右和下 而精灵图的位置是相对于原点的 即要将你需要的图片上边框位置固定在原点

最后是我们的效果图 鼠标触碰会将底部的作者标签和播放按钮显示出来在这里插入图片描述


谢谢大家的支持,如有错误请指正!
©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值