码迷,mamicode.com
首页 > 其他好文 > 详细

前端设计——音乐盒子

时间:2016-07-11 09:08:29      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

1、首先要完成的结构如下图所示:

技术分享

一个大盒子被分为左右下三个部分,左边部分(紫颜色)用于存放一个动态图片;右边绿颜色部分用于显示歌手头像,歌曲名字,歌词;下边银白色用于控制歌曲的播放与暂停。这就是想要实现的大概结构。

2、难点

  1)、结构的搭建

    我们都知道,div是默认自带换行,如何让两个div并排对齐存放呢。用到的是float,浮动,让他们一个浮动到左侧,一个浮动到右侧,这样就能并排对齐了。因为浮动不占据原来的文档流,所以我们在处理银白色盒子时,如果不让他浮动,他的左上顶点就会和紫盒子的左上顶点重合。

  2)、一些小细节

    ①让标题上下移动  用到line-height这个属性。

    ②让一个图片作为背景铺满整个盒子  background:url("路径");background-size:100%;

    ③去掉无序列表的小黑点  ul li{list-style:none;}

    ④图片圆角显示以及图片有光影效果  img{border-radius:px;box-shadow:0 0 10px #fff;}

    ⑤下划线   border-bottom:1px

    ⑥只控制无序列表中的一个标签  ul li:nth-child(2){} 表示只控制列表中的第二个标签。

    ⑦文字阴影效果——文字颜色如果和背景颜色接近的话,很容易看不见文字,这个时候如果给文字来点阴影效果就可以看见文字  text-shadow:0 0 5px #fff.

   3)、歌词的滚动显示js控制

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    

前端设计——音乐盒子

标签:

原文地址:http://www.cnblogs.com/sylz/p/5659112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!