仿做QQ音乐官网——问题与解决办法

问题与解决办法

一.图片的路径

1.绝对路径：从根目录为起点到某一个目录的路径

直接指明文件在硬盘上真正存在具体位置或者是以Web站点根目录为参考的完整路径。
（绝对路径是规定死的目录，直观清晰，但被网页引用的文件不能随意挪动。当多个网页引用同一个文件时，所使用的路径都是相同的。

2.相对路径：在同一个网站下，不同文件之间的位置定位

附：/ 代表根目录
./ 代表当前文件所在目录（可省略）
…/ 代表当前文件所在目录的上级目录
…/…/代表当前文件所在目录的上上级目录
…/…/…/ 以此类推

3.绝对路径和相对路径异同点：

相同点 ：在于两者都是对图像，音乐，网址，视频等文件资源的引用方法。

不同点： 在于描述目录路径时，所采用的参考基准点不同。

绝对路径：直接指明文件在硬盘上真正存在具体位置或者是以Web站点根目录为参考的完整路径。绝对路径是规定死的目录，直观清晰，但被网页引用的文件不能随意挪动。

相对路径：当保存于不同目录的网页引用同一个文件时，所使用的相对路径不同。

二.下拉菜单

• .dropdown 类用来指定一个下拉菜单。

• 可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

• <div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

• 也可以使用 <a>

下拉菜单中的分割线：

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：

三.查询网页图标

• 在菜鸟教程Bootstrap的字体图标查询

• 也可以截取图片插入

• 在阿里巴巴员工的图标库

步骤：
1.进入链接https://www.iconfont.cn/ 

2.点击图标库——搜索关键词——选择你需要的图标，加入车中——
——点击右上角的车——点击添加进入项目——确定——点击下载到本地——
——将下载的压缩包进行解压——复制解压后的文件夹到你的项目中——
——点击文件夹中的demo.html文件，这里面有相关的使用说明——
——复制里面的两段代码到你的css文件中——
——修改这两段代码中图标的引用路径——使用图标

(1)点击图标库，搜索关键词：

(2）选择需要的图标，加入车中，点击右上角的车

（详细看weixin_44841312的博客）

四.浮动布局

1. 浮动可以设置元素，向右或者向左，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。

例如：
我们使用div等块标签的时候，它们都是独占一行，但是很多时候要将多个div并排放置，这种情况就可以使用浮动布局。

2. 可以解决文字包围图片的问题
4. 可以解决间隔问题
5. 可以将盒子向左或向右排列
6. 如果盒子塌陷盒子，则
方法：（1）设定父元素高度；
（2）添加clear样式；
（3）用子元素撑开父元素（不给父元素设定一个固定高度）