html---链接跳转案例

news/2024/5/15 7:26:48/文章来源:https://blog.csdn.net/m0_68976043/article/details/131562224

目录

一、要求:设置一个网页如下图所示,可实现首页、列表页、详情页、登录页链接 

 二、实现:实现代码及截图如下

三、寄语 


一、要求:设置一个网页如下图所示,可实现首页、列表页、详情页、登录页链接 

 二、实现:实现代码及截图如下

①代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>凌晨五点的星</title>
</head>
<body><h1>欢迎您来到登录页<h1><a href="./images/text1.shou.jpg">首页</a><a href="./images/text1.lie.jpg">列表页</a><a href="./images/text1.xiang.jpg">详情页</a><a href="./images/text1.deng.jpg">登录页</a><h1>请登录。</h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;账号:<input/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:<input/></p><p>你的Apple ID是你用来登录iTuns、App Stire和iCloud的电子邮</p>件地址或手机号码<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button style="background-color: blue; color: white; padding: 10px 20px; border: none; text-align: center;text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">登录</button></p><p><span style="color: blue;">忘记了自己的Apple ID或密码?</span></p><p><span style="color: blue;">没有Apple ID?立即创建一个。</span></p>
</body>  
</html>

②:截图

 

1.首页(这里只提供思路图片为网上随便下载的) 

 

2.列表页

3.详情页

 4.登录页

三、寄语 

在做初级web界面设计时,图片可使用width和hight设置其宽度和长度,border设置其边框

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_326359.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

弃购邮件:用这一招帮您赢回失去的客户

弃购邮件&#xff1a;用这一招帮您赢回失去的客户 弃购邮件是发送给将产品添加至购物车却没有结算的顾客&#xff08;即弃单顾客&#xff09;的邮件。 这是一种十分有效的顾客留存策略。 在线客户放弃购物车的频率比您想象的要高。他们没有完成购买的原因有很多。但是&#xff…

创作神器:探索ai智能绘画软件的魅力与功能

曾经有一个名叫小艾的年轻画家&#xff0c;她对绘画充满热情&#xff0c;并梦想创作出令人惊叹的艺术作品。然而&#xff0c;她发现自己在技术和创意方面遇到了一些困难。正当她感到沮丧时&#xff0c;她听说了一个关于智能ai绘画软件的故事&#xff0c;这个软件据说能够通过机…

Springboot整合Activiti详解

文章目录 版本依赖配置文件需要注意的问题画流程图activiti服务类进行编写流程部署流程定义启动流程流程实例 测试流程启动流程完成任务受理任务 版本依赖 开发工具 IDEASpringBoot 2.4.5&#xff08;这里我试过SpringBoot 3.1.1版本&#xff0c;Activiti没有启动&#xff0c;…

测试开发 —— 快速定位问题

写在前面 这两天工作实在是有点小忙&#xff0c;感觉好久没更新了&#xff0c;但是平时也是有感而发的比较多&#xff0c;今天遇到一个问题&#xff0c;感觉挺有意思&#xff0c;处理过程也非常有意义&#xff0c;希望能给大家一个借鉴吧。 测试平台又又又出问题了 今天一位…

一招教你看懂KMP算法next数组

给两个字符串&#xff0c;一个匹配串&#xff0c;一个主串&#xff0c;我们要在主串中找到第一个匹配串&#xff0c;并全部返回 eg: p"aba"; s"bbabaca"; 那么返回的就是第一个找到的匹配串的下标 返回2; 这里最容易想到的就是暴力匹配了,挨个&#xff0c;…

云原生(第四篇)-k8s yaml文件

Kubernetes 支持 YAML 和 JSON 格式管理资源对象 JSON 格式&#xff1a;主要用于 api 接口之间消息的传递 YAML 格式&#xff1a;用于配置和管理&#xff0c;YAML 是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 YAML 语法格式&#xff1a; ●大小写敏…

还在用策略模式解决 if-else?Map+函数式接口方法才是YYDS!

本文介绍策略模式的具体应用以及Map函数式接口如何 “更完美” 的解决 if-else的问题。 需求 最近写了一个服务&#xff1a;根据优惠券的类型resourceType和编码resourceId来 查询 发放方式grantType和领取规则 实现方式&#xff1a; 根据优惠券类型resourceType -> 确定查…

open3D cmake+win10+vs2019编译

已经采用python版open3D实现和验证了功能&#xff0c;但是在C迁移上却遇到了不少问题&#xff1a; 1、可能是与本地的编译器存在差异&#xff0c;在使用open3D git上的winows版本时&#xff0c;存在地址访问冲突和std::bad_alloc等问题。前者在适用IO读写时必现&#xff0c;后者…

最小年龄仅5岁!盘点全球最“天才”少年黑客 TOP 10

你还能想起自己8岁的时候&#xff0c;每天都在玩什么吗&#xff1f;可能是在楼下和小朋友一起捉迷藏&#xff1f;在家追一本连载的漫画书&#xff1f;又或者在电脑上玩种菜偷菜的小游戏&#xff1f; 当同龄人还在沉迷于这些比较“基础”的小游戏时&#xff0c;有这样一批和互联…

Qt-事件(下)(事件过滤、自定义事件)

文章目录 事件过滤自定义事件 事件过滤 event()函数是一个protected的函数&#xff0c;这意味着我们要想重写event()&#xff0c;必须继承一个已有的组件类&#xff0c;——重写其event()函数。event()函数的确有一定的控制&#xff0c;不过有时候我的需求更严格一些&#xff…

完美适配小爱课程表(河南科技学院)

1.前言&#xff1a; 前文请参照我的以前的博客&#xff1a; 青果教务系统适配小爱课程表 本文代码现已开源&#xff1a; 小爱课程表适配gitee小爱课程表适配github 去年的时候试着适配了我们学校的小爱课程表&#xff0c;但是由于水平不够&#xff0c;直接把接口以及参数照搬&a…

react—Hook(2)

6. useMemo—似计算属性 useMemo和useCallback的作用十分类似&#xff0c;只不过它允许记住任何类型的变量&#xff08;useCallback只记住函数&#xff09;。当改变其他变量时&#xff0c;普通函数都会运行&#xff0c;它返回的结果并没有改变。这个时候就可以使用useMemo将函…

Win10资源管理器不停的崩溃重启怎么办?

Win10资源管理器不停的崩溃重启怎么办&#xff1f;资源管理器是Win10系统中负责管理文件和文件夹的核心组件&#xff0c;如果它不断崩溃和重新启动&#xff0c;将严重影响用户的工作效率和系统稳定性&#xff0c;也会感到困扰和烦恼&#xff0c;以下小编给用户们介绍一些方法&a…

多元回归预测 | Matlab基于粒子群算法优化深度置信网络(PSO-DBN)的数据回归预测,matlab代码回归预测,多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab基于基于粒子群算法优化深度置信网络(PSO-DBN)的数据回归预测,matlab代码回归预测,多变量输入模型,多变量输入模型 评价

浅谈 JEP290

0x01 前言 属于是拖了很久的文章了&#xff0c;4.18 筹划着开始写&#xff0c;6.22 左右才真正开始提笔。 一开始提到这个概念可能会比较懵逼&#xff0c;其实这就是为什么高版本 jdk 有部分能打 jndi&#xff0c;打不了 RMI 8u121 ~ 8u230 打不了 RMI 0x02 关于 JEP290 J…

小程序开发的未来:人工智能与物联网的结合

微信小程序自上线以来&#xff0c;一直在改变着人们的生活。它可以让你通过微信搜索直接找到你想要的信息&#xff0c;同时也可以让你用微信直接付款&#xff0c;给你的生活带来了极大的便利。同时&#xff0c;小程序的出现也改变了人们获取信息的方式&#xff0c;不需要再像以…

php宝塔搭建EMLOG站长工具箱网站自适应PC手机端php源码

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。本期给大家带来一套站长工具箱网站自适应PC手机端php源码。感兴趣的朋友可以自行下载学习。 技术架构 PHP5.6 nginx mysql5.6 JS CSS HTMLcnetos7以上 宝塔面板 文字搭建教程 下载源码&#xff0c;宝塔添…

如何自学网络安全,网络安全学习路线是什么

要自学网络安全&#xff0c;你可以按照以下学习路线进行&#xff1a; 基础知识学习&#xff1a; 学习计算机网络基础知识&#xff0c;了解TCP/IP协议、网络拓扑、子网划分等概念。学习操作系统的基础知识&#xff0c;包括Windows和Linux。学习编程语言&#xff0c;如Python、C等…

代码模版-element plus如何进行前端校验输入框

文章目录 步骤一&#xff1a;引入 element plus 框架步骤二&#xff1a;使用 element plus 的 form步骤三&#xff1a;form 明确指定 rules步骤四&#xff1a;事件触发校验 使用 vue3 element plus 步骤一&#xff1a;引入 element plus 框架 先 npm 安装 在 src/main.js 中…