我和我的家乡网页制作_绝对、相对路径,百度网盘小案例制作

本文通过一个百度云盘小案例,介绍了如何使用HTML的相对地址和绝对地址创建内部链接,实现网页间的上下级目录跳转。步骤包括插入图片、设置超链接、创建新网页并调整图片路径,特别强调了在不同层级间跳转时使用../的规则。
摘要由CSDN通过智能技术生成

ef00607ab727bb3f27888c6861f52304.png

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

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

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

0bdb95d46baf559b66b77edab5175de7.png

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

edd00add602ba43e3a4530f51544ebe4.png

二、百度云盘小案例

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

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

cf7546acba7a87575ac0116b064853a6.png

浏览效果如下

5d9b197daf8358d0b51e6f04262d84ac.png

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

0daa0560df82860af8e061a5b5bd74b4.png

浏览效果入下

5b22addca8fe49aa346ff9da3571305a.png

第二步将其变为超链接

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

5bffa504b1e02fbde01469c3523e94b7.png

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

6611a43ac4399f7fa1831d3fc67c3b2b.png

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

05bab6c60f0c808da04d6fae82c9a7db.png

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

还是先加入背景图

d618319f20a76762fa239f8d60ee77e0.png

效果如下

5b22addca8fe49aa346ff9da3571305a.png

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

8e3fb260748d2bd2f11bf3b34ce1ed39.png

效果如下

a2080efde25bd1aa36516deba548a261.png

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

aa6b6ddd1f4b9b1d0371054423d40cf7.png

将one中的代码复制过来

a60bf97bcbbcc5821860ea709743ce4b.png

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

7dcefd6f1ac4735539e06bf84403fda3.png

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

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

d383ba501a0efc628ae74b597eb9677f.png

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

我们来总结一下

405faa8c4418249b79549bfefdf537c6.png

5ba54cc6b9811911229031f2c40a4eb1.png

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

49b4cf83bf02f1b515f4bb64e0687e96.png

8bfa23b53b97e521b610cff41771fdb1.png

最后大家来练习一下

--- 笔记来自于【千锋教育】视频

9d899bb03f846321e08ac216d6092522.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值