绝对相对路径，百度网盘小案例

绝对、相对路径

在制作这个小案例之前，我们先来了解一下绝对地址和相对地址

绝对地址：在任何情况下，都可以准确找得到的地址（例如我的家乡在山东济宁）

相对地址：必须知道当前所在，才能找到的地址（例如我家里我的衣服放在了什么位置）

如果我们在一个网址下链接了一个相对路径，那我们点击这个相对路径，就会以网页地址为参考，相对于这个地址进行内部跳转。

百度云盘小案例

图片大家可以自己截取一下，没必要非要一样图片。

第一步，先把顶部背景图插入

浏览效果如下

再插入两个文件夹的图片和文字

浏览效果入下

第二步将其变为超链接

用a标签将图片和文字包裹起来，href写上文件夹和要建的网页

对应着新建一个one和one网页文件

第二个也和他方法相同，为two

第三步在建好的one网页文件中加入图片

还是先加入背景图

效果如下

添加返回箭头链接和其他图片

效果如下

第四步新建two文件夹和two网页中的内容

将one中的代码复制过来

但是与one不同的是，在two中再新建一个子目录，three中也包含一个three.html

再来编辑 three页面，先把one中的所有复制过来

three中的各个图片路径要再加一个 ../ （即返回上上个目录）

到这案例就完成，最终效果就是可以跳转上下级目录。

我们来总结一下

加入../就是返回上一级目录

大家来动手练习一下

- End -

--- web分享，分享的不只是Web