QQ音乐首页静态页面练习

遇到的主要问题

1. 同行的图标
   解决方案：
   第一种：
   将图标截图保存；
   在css添加背景图片为该图标
   第二种：
   画一个16px*16px的div，border-radius设为50%，使其变成⚪；
   然后再画一条短线，调整位置到⚪的尾巴处；

	/*第一种*/
	background-image: url(pic/search-icon.png);
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: center;

因为第二种较为复杂，且图标种类过多，为了节省时间，选择第一种截图添加为背景图的方式.

2. 下拉菜单文字居中
   不管是对select还是option设置text-aline:center都不起作用
   选择了对select设置padding

3. 文字标题两端居中。
   了解到两端对齐的样式为

	/*justify没有效果*/
	text-align:justify; 
	text-justify:inter-ideograph;

然而不管是单独的justify还是添加text-justity都不能使中文文字两端居中，因此选择在文字中间添加半角空格 来填充。

可以通过设置letter-spacing属性的方式来调节文字之间的间距

4. 鼠标悬停在图片上时图片放大
   查询了解到设置transition和transform，可以设置放大的倍数和时间

.pic-list-item:hover .recom-pic{
	transition: transform 0.75s;
	transform: scale(1.05);
}

放大不出格：父子元素设置同样大小的宽高，设置overflow属性
5. 鼠标悬停在图片上出现播放按钮

display属性设置为none
播放按钮的三角形通过设置border来调节

6. 下拉列表默认的option不出现在下拉列表的option中。
   
   暂未解决，通常开发中不用select表单
7. 文字溢出时显示…
   

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

8. 不知道页面参数。
   直接在QQ音乐的首页inspect原页面的参数，按照原页面参数进行设置。
9. 背景色由上而下渐变。
   设置背景图片后发现会被上层的div挡住，检索解决方案对全局选择器设置透明（这个问题莫名其妙的消失了，不需要背景透明了）

background-color:rgba(255, 255, 255, 0);

10. 消除表单边框

input {
       border: 0;  // 去除未选中状态边框
       outline: none; // 去除选中状态边框
       background-color: rgba(0, 0, 0, 0);// 透明背景
}

11. 两边的轮播符号
    左右两侧的符号分别调节position的绝对位置为负值
    利用transition属性调节变化位置
    设置overflow属性避免影响全局页面的左右宽度