绝对、相对路径 在制作这个小案例之前,我们先来了解一下绝对地址和相对地址 绝对地址:在任何情况下,都可以准确找得到的地址(例如我的家乡在山东济宁) 相对地址:必须知道当前所在,才能找到的地址(例如我家里我的衣服放在了什么位置) 如果我们在一个网址下链接了一个相对路径,那我们点击这个相对路径,就会以网页地址为参考,相对于这个地址进行内部跳转。 百度云盘小案例 图片大家可以自己截取一下,没必要非要一样图片。 第一步,先把顶部背景图插入 浏览效果如下 再插入两个文件夹的图片和文字 浏览效果入下 第二步将其变为超链接 用a标签将图片和文字包裹起来,href写上文件夹和要建的网页 对应着新建一个one和one网页文件 第二个也和他方法相同,为two 第三步在建好的one网页文件中加入图片 还是先加入背景图 效果如下 添加返回箭头链接和其他图片 效果如下 第四步新建two文件夹和two网页中的内容 将one中的代码复制过来 但是与one不同的是,在two中再新建一个子目录,three中也包含一个three.html 再来编辑 three页面,先把one中的所有复制过来 three中的各个图片路径要再加一个 ../ (即返回上上个目录) 到这案例就完成,最终效果就是可以跳转上下级目录。 我们来总结一下 加入../就是返回上一级目录 大家来动手练习一下 - End - --- web分享,分享的不只是Web |
|
来自: AnXuelin295 > 《HTML+CSS》