怎么实现html图片跳转页面显示内容,0036 如何编写网页迁移跳转功能
上节课讲解了关于图片的相关知识,这节课来讲解关于如何使用超级链接实现网页之间的跳转功能。
上节课的课后练习
准备做2个新的网页,设计好里面的文字内容和图片。
学哥要来做2个新的网页,一个网页是显示关于“宝钢焦炉火落判定自动控制系统”的详细信息;另一个网页是显示关于项目“AES256位加密保存个人密码本”的相关信息。
程序设计如下:
第一个网页命名为project1.html,第二个网页命名为project2.html。
网页打算使用index.css当中用到的式样,第一行放一个大标题bigtitle,然后下面是一个smallcontent,里面放多段文字或多个图片。
首先准备好一些图片文件,存放到images目录下面。
project1.html里面的代码如下:
2-10-1.jpg
project1.html代码文件在浏览器中显示的效果:
2-10-2.jpg
project2.html里面的代码如下:
2-10-3.jpg
project2.html代码文件在浏览器中显示的效果:
2-10-4.jpg
大家可以参照代码,设计和编写自己的网页,可以使用前面课程中说明过的各种标签元素。
a标签和属性
前面做好了2个新的网页,可以通过浏览器直接打开这2个网页进行浏览查看。
但是每次打开这个网页,都要去文件管理器里面寻找并打开,并不是太方便,有没有什么办法,在网页上点击一个链接,网页就可以跳转到新的网页呢?
通过使用标签在HTML中创建链接。
如果大家用过浏览器访问网站的,应该就会很熟悉什么是链接,当把鼠标指针移动到网页中的某个链接上时,箭头一般会变为一只小手,点击之后,网页就会跳转到新的文档或者当前文档中的某个部分。
这种链接称之为超链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。
链接的HTML代码格式是这样的:
Link text
href属性规定链接的目标。它可以是一个网络链接地址,也可以是一个相对目录和文件名,和上节课的img标签的src属性类似。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例是这样的:
访问百度
或者:
AES256位加密保存个人密码本
在创建链接之前,需要设计和准备好,将什么内容做为一个超链接,允许用户点击它跳转页面。
学哥这里设计好了,点击“成果展示”里面的关于“宝钢焦炉火落判定自动控制系统”的图片的时候,页面跳转到project1.html;
在“工作经验(部分)”里面增加一段文字,说明项目“AES256位加密保存个人密码本”的信息,点击文字“AES256位加密保存个人密码本”的时候,也看跳转到project2.html。
在index.html当中增加关于项目“AES256位加密保存个人密码本”的内容。
index.html代码修改如下:
2-10-5.jpg
刷新页面:
2-10-6.jpg
点击图片迁移页面
先来做第一个网页跳转功能,修改index.html,在“宝钢焦炉火落判定自动控制系统”的图片的前后加上标签,设置好属性。
index.html代码修改如下:
2-10-7.jpg
刷新页面:
2-10-8.jpg
可以看到网页的这个图片显示效果好像没有什么变化,但是当鼠标移动到图片上时,鼠标光标变成了一个小手了,说明这是一个链接,可以点击了,点击一下,发现页面迁移到了新的网页:
2-10-9.jpg
如何返回前页面
网页跳转完成之后,浏览器里面的内容就是显示新的网页的内容了,那么该如何返回原来的网页呢?
一种办法是使用浏览器的返回按钮,就像导航一样,返回到前一个网页:
2-10-10.jpg
点击这个返回按钮,可以看到网页回到了index.html网页了。
使用浏览器的返回按钮呢,有些时候并不是太方便或者友好,这个以后在学习编写动态网页的时候就能体会到,这里不深入讲解。
那么还有一种办法,可以通过修改新网页里面的代码,增加一个返回的超链接,用户点击这个超链接之后,链接返回到原来的网页。
来修改project1.html网页程序,在大标题的前面,增加一个返回图片,去网上搜索一个“返回图片”,下载后存放到images目录下。
project1.html代码修改如下:
2-10-11.jpg
刷新页面:
2-10-12.jpg
可以看到多了一个返回图片,点击后可以回到index.html网页了。
这里,学哥为了简化起见,直接在project1.html里面编写了style样式,请大家将这里修改一下,将所有的CSS属性和值全部转移到index.css当中去。
迁移时新打开一个窗口页面
网页跳转可以让浏览器显示新的网页,但是在有些情况下,用户希望同时看到原页面和新的页面,不希望网页来回跳转的形式,这种情况下,可以设置标签的属性target,让用户在点击链接的时候,打开一个新的窗口显示新的网页,这样对原页面没有影响, 相当于同时在浏览器打开了原网页呃和新网页,这种功能在某些时候非常有用。
修改index.html程序的网页跳转的地方,增加target="_blank"属性。注意有一个下划线。
index.html代码修改如下:
2-10-13.jpg
点击链接之后,发现浏览器新打开了一个窗口:
2-10-14.jpg
如果点击浏览器的Tab标题“学哥的个人简历”,回到index.html网页,再次点击那个图片链接,发现浏览器又打开了一个窗口,如果不停的点击链接,就会打开很多个窗口,在某些时候,可能并不希望这样,那么可以这样修改代码。
index.html代码修改如下:
2-10-15.jpg
关掉之前打开的所有的project1.html网页,重新点击链接试试看,可以看到打开一个窗口之后就无法打开第二个窗口了。
所以要记住“_blank”属性值是告诉浏览器,每次都打开一个新的窗口,如果不是这个属性值,自己起一个名字,则浏览器会判断如果新窗口没有的名字不存在这个,则新打开一个窗口,如果已经打开过这个名字的窗口,则显示这个窗口并刷新网页。
文字链接迁移页面
在前面增加的文字“AES256位加密保存个人密码本”前后加上标签,设置跳转到project2.html网页。
index.html代码修改如下:
2-10-16.jpg
刷新网页:
2-10-17.jpg
鼠标移动到蓝色有下划线的文字链接上,发现鼠标光标变成了小手,点击这个链接后,发现新打开了一个窗口显示了新网页。
修改文字链接CSS属性
如果觉得这个蓝色有下划线的文字不太好看,可以通过CSS属性来调整,来将蓝色去掉,下划线去掉,字体调整大一些,方便用户容易点击。
index.css代码修改如下:
2-10-18.jpg
index.html代码修改如下:
2-10-19.jpg
刷新网页:
2-10-20.jpg
可以看到字体变大了,颜色变化了,下划线没有了,点击的瞬间的效果也不一样。
链接可以设置的样式的CSS属性有很多,例如 color、font-family、background或者font-size等等。
链接的特殊之处在于可以设置不同的状态的样式。
链接有四种状态:
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
例子如下:
a:link {color:#FF0000;} /* 未被访问的链接 /
a:visited {color:#00FF00;} / 已被访问的链接 /
a:hover {color:#FF00FF;} / 鼠标指针移动到链接上 /
a:active {color:#0000FF;} / 正在被点击的链接 */
在a的后面加上.prolink表示针对a标签的样式,样式名字是prolink,在html里面使用class="prolink"来使用。
大家可以自由修改这里的文字链接属性,找到自己喜欢的样式。
使用文字做为链接,是经常使用的一种链接形式,也可以使用设置div的CSS属性来做出一个漂亮的按钮链接。
将链接做成一个漂亮的按钮
来修改CSS样式,增加背景色,增加内边距,将链接做成一个流行的色块按钮。
index.css代码修改如下:
2-10-21.jpg
刷新网页:
2-10-22.jpg
课后练习
网站编写的技巧基本上就讲解到这里,虽然还有很多知识和细节没有深入的讲解,但是做为网页编程的入门课程来说,掌握到这个程度已经差不多了,已经可以完成一个个人简历网站了。
大家学习了这些知识点以后,要举一反三,把内容填写完整,编写出自己的个人简历网站。
下节课开始,就开始讲解如何测试和部署个人简历网站了,可以让别人看到我们自己做的第一个网站啦。
怎么实现html图片跳转页面显示内容,0036 如何编写网页迁移跳转功能相关推荐
- vue跳转到同一路由但传递参数不同,从而判断页面显示内容
vue跳转到同一路由但传递参数不同,从而判断页面显示内容 给router-view 添加一个key,使vue不复用 <router-view :key="一个动态的数据"&g ...
- 【css】页面出现两个滚动条以及只有一半页面显示内容的解决方法
可能当修改页面的margin等属性时会出现页面只有一半的页面显示内容的情况,此时我们可以修改css代码来解决问题 代码实现: body{overflow:hidden}html{/*overflow- ...
- Vue路由跳转-页面显示空白
跳转页面,指定路径跳转到某个页面时,如果没有按照正确的方式写路径,会导致页面显示空白 html部分 方法1.<div class="nav-item-1" @click=&q ...
- vue跳转页面增加等待_vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~ 提交 export default { data(){ return { count:"",//倒计时 } } }, mounted(){ ...
- 怎么样实现左侧页面点击后右边页面显示内容
2019独角兽企业重金招聘Python工程师标准>>> 实现结果图片 前端页面的代码 <div class="row"> <div class= ...
- 【泛微E9】待办、已办页面显示内容调整
PC端流程待办列表各TAB地址 全部:OA地址/wui/index.html#/main/workflow/listDoing?tabkeys=0 未读:OA地址/wui/index.html#/ma ...
- java自定义菜单跳转页面_微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解...
微信公众号开发 自定义菜单 请先读完本文再进行配置开发 请先前往微信平台开发者文档阅读"网页授权获取用户基本信息"的接口说明 在微信公众账号开发中,往往有定义一个菜单,然后用户点击 ...
- vue 移动端 跳转页面_Vue移动端框架Mint UI教程-跳转新页面(四)
前三节写了vue的移动端框架的入门篇章,今天接着写,今天写的教程其实很简单,在之前的基础上,新建一个界面,并且进行跳转新页面. 1:首先,在pages底下新建一个新的页面fa.vue 在页面里面写一些 ...
- js 读取php页面内容,js读取html文件 js获取html页面显示内容
CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 如题,CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 JS读取TXT文件内容的代码如下: 读 ...
最新文章
- 复习es6-解构赋值+字符串的扩展
- Listview获取选中行的值
- (C++)1011 World Cup Betting
- Django POST请求错误
- 高斯消元整数版和浮点数版实现
- 2022-03-22
- SAP销售订单-订单组合
- HDU2049 组合数学 错排公式
- GET和POST的真正区别
- 前端学习(1172):模板字符串
- 吐血整理!12种通用知识图谱项目简介
- a算法和a*算法的区别_详解SPWM与SVPWM的原理、算法以及两者的区别
- 拆除指令怎么设置_siri叫你起床啦~早安等快捷指令你会用了吗i
- ansys里面自带chemkin_Chemkin-Pro: Chemistry Effects Predicting Simulation Software | Ansys
- 计算机信息管理试卷答案,计算机信息管理专业《计算机组成原理》试卷B和参考答案4...
- Android开源框架:Universal-Image-Loader解析(四)TaskProcess
- AIX errpt 命令输出说明
- java 通讯开发_java之接口开发-初级篇-socket通信
- swagger 修改dto注解_Swagger注解及参数细节的正确书写。
- Python界面设计之Label
热门文章
- 高等数学(第七版)同济大学 习题9-1 个人解答
- c语言绘制松树图形代码,WPS怎么画松树? wps画松树的两种方法
- 缓存目录写入权限不足!/opt/lampp/htdocs/www/runtime
- 数字图像处理(第三版,Rafeal C. Gonzalez, Richard E. Woods)--灰度变换与空间滤波
- Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)
- 计算机u2.0接口在哪,USB2.0和USB3.0的USB接口区别在哪里?怎么分辨?
- android auto p30,手机资讯导报:华为P30Lite曝光后置三摄6.15寸水滴屏
- 安卓自定义二维码扫描
- 开淘宝店铺的一些操作
- 区块链物联网的垂直领域应用