前端学习（16）：跳转链接小练习

点击图片实现跳转

目录结构

header.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>首页</title>
</head>
<body><a href="./html/list.html"><img src="./img/004.jpg" width="300px" height="300px">
</a>
</body>
</html>

list.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>列表页</title>
</head>
<body><a href="./message.html"><img src="../img/005.jpg" width="300px" height="300px">
</a>
</body>
</html>

message.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>详情页</title>
</head>
<body><a href="../header.html"><img src="../img/006.jpg" alt="" width="300px" height="300px">
</a>
</body>
</html>

运行结果

点击

代码

链接：https://pan.baidu.com/s/1WcmJfuKtXwVZX1cMmJ_Btg
提取码：i01l
复制这段内容后打开百度网盘手机App，操作更方便哦

前端学习（16）：跳转链接小练习相关推荐

【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...
前端学习（2835）：小程序中使用less
安装插件自动生成wxss
前端学习（2832）：小程序事件绑定2
前端学习（2831）：小程序事件绑定
前端学习（2818）：小程序学习之文件建立
前端学习（2814）：小程序学习之建立第一个项目
前端学习（2813）：小程序开发前的环境搭建
前端学习（2811）：小程序学习之学习目录
前端学习（2818）：小程序学习之新建页面
直接page.json配置即可

前端学习（16）：跳转链接小练习

前端学习（16）：跳转链接小练习相关推荐

最新文章

热门文章