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

绝对、相对路径

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

绝对地址:在任何情况下,都可以准确找得到的地址(例如我的家乡在山东济宁)

相对地址:必须知道当前所在,才能找到的地址(例如我家里我的衣服放在了什么位置)

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

百度云盘小案例

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

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

浏览效果如下

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

浏览效果入下

第二步将其变为超链接

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

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

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

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

还是先加入背景图

效果如下

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

效果如下

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

将one中的代码复制过来

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

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

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

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

我们来总结一下

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

大家来动手练习一下

- End -

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

(0)

相关推荐