一个简单的HTML网页

article/2025/10/9 10:09:48

        一个简单的HTML网页,这是朋友写的,里面没有什么内容的,和大家分享一下,不喜勿喷。

先看下效果图

这里的登录和注册都是没有实际功能的,只是一个样式

下面来看看代码

登录

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" type="text/css" href="./css/index.css"></head><body style="background-image: url(img/背景图2.jpg); 	background-repeat: no-repeat;background-size: cover;"><div class="logo center"><a href="./index.html" target="_blank"><img src="./image/mistore_logo.png" alt=""></a></div></div><form  action="index.html" class="form center" style="line-height: 50%;"><div class="login"><div class="login_center"><div class="login_top"><div class="left fl">登录</div><div class="clear"></div><div class="xian center"></div></div><div class="login_main center"><div class="username">用户名:&nbsp;<input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名"/></div><div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="shurukuang" type="password" name="password" placeholder="请输入你的密码"/></div></div><div class="login_submit"><input class="submit" type="submit" name="submit" value="立即登录" ></div></div></div></form></body>
</html>

 注册

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
<link type="text/css" rel="stylesheet" href="./css/index.css" /></head><body style="background-image: url(img/背景图2.jpg); 	background-repeat: no-repeat;background-size: cover;" class="zc-body"><div id = "zc-a1"><div class = "zc-b"><div>注册</div></div>  <div class = "zc-c"><form action="login.html" method=""><table class="zc-table"><tr> <td align= "center">用户名</td><td class="zc-c"><input placeholder="请输入名字"></td><td class = "zc-td3">请不要输入汉字</td></tr><tr><td align= "center">密  码</td><td><input type = "password" placeholder = "请输入密码"></td><td class = "zc-td3">请输入6位以上的字符</td></tr><tr><td align= "center">确认密码</td><td><input type = "password" placeholder = "请输入密码"></td><td class = "zc-td3">两次密码要输入一致哦</td></tr><tr><td align= "center">手机号</td><td><input type="number" placeholder = "请填写正确的手机号" maxlength ="11"></td><td class = "zc-td3">请填下手机号吧,方便我们练习</td></tr><tr><td align= "center">验证码</td><td><input placeholder = "请输入验证码"></td><td><img src="img/yanzhengma.jpg"></td></tr><tr><td colspan="3" align = "center"><input id = "zc-end" type="submit" value = "立 即 注 册"></td></tr></table></form></div>	</div></body>
</html>

首页

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>首页</title><link type="text/css" rel="stylesheet" href="css/index.css" /></head><body style="background-color:#FFFFFF;"><div style="width: 1900px;"><!-- 导航栏 --><div id="daohanlan"><div style="width: 100px;float: left;margin-left: 50px;"><img src="img/log3.jpg" style="width: 100px; height: 100px;" /></div><div class="zhuti"><h2>伏羲山景区</h2></div><div class="jingqu"><div><ul class="index-ul1"><li><a href="index.html">首页</a></li><li><a href="ScenicOne.html">景区一</a></li><li><a href="ScenicTwo.html">景区二</a></li></ul></div>	 </div><div class="denglu"><div><ul class="index-ul1"><li><a href="login.html">登录</a></li><li><a href="zhuce.html">注册</a></li></ul></div>	</div></div><!-- 中间部分 --><div><div id="jieshao"><div><h4>伏羲山介绍:</h4><p class="p1">伏羲山(原名浮戏山),位于河南省郑州市新密市境内,其中伏羲大峡谷是国家4A级景区,伏羲山因伏羲而得名,伏羲女娲曾在此正姓氏、演八卦、置嫁娶、开创了中华文明。</p><p class="p1">伏羲山是嵩山东北向的余脉,东西绵延50多公里,总面积60平方公里,最高海拔1108.5余米,主峰五指岭海拔1084米。伏羲大峡谷属伏羲山核心区域,是一条以典型的红岩嶂谷群地质地貌为主的峡谷景区。山中千年以上的古树名木有数十棵,并拥有“活植物化石”之称的古亢树。</p><p class="p1">景点级别:&nbsp;&nbsp;&nbsp;&nbsp;国家AAAA级旅游景区</p><p class="p1">门票价格:&nbsp;&nbsp;&nbsp;&nbsp;分段式售票</p><p class="p1">地理位置:&nbsp;&nbsp;&nbsp;&nbsp;河南省郑州市,新密市</p><p class="p1">开放时间:&nbsp;&nbsp;&nbsp;&nbsp;08:00-17:00</p><p class="p1">占地面积:&nbsp;&nbsp;&nbsp;&nbsp;60平方公里</p><p class="p1">气候类型:&nbsp;&nbsp;&nbsp;&nbsp;暖温带大陆性季风气候(半湿润)</p><p class="p1">著名景点:&nbsp;&nbsp;&nbsp;&nbsp;伏羲大峡谷、栖凤峪、玫瑰岭、中原首座玻璃吊桥、红石林、玻璃环廊——天空漫步、悬崖秋千</p></div></div><div class="tese"><table class="tbl" border="1" cellspacing="0"><tr><td><img src="img/特色1.jpg"></td><td><img src="img/特色2.jpg"></td><td><img src="img/特色3.jpg"></td></tr><tr><td><img src="img/特色四.jpeg"></td><td><img src="img/特色5.jpg"></td><td><img src="img/特色6.jpg"></td></tr></table></div></div><div class="div5">	<p style="margin: auto;width: 780px;margin-top: 5px;">欢迎各位网友积极参与,共同创建我们美好的家园。如果您有介绍家乡风光的文字、图片,欢迎与我们联系</p><p style="margin: auto;width: 900px;margin-top: 5px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;@mi.com 京ICP证110507号 京ICP备10046444号 京公安网备11010802020134号 京网文[2014]0059-0009号</p><p style="margin: auto;width: 850px;margin-top: 5px;">如发现政治性、事实性、技术性差错和版权方面的问题及不良信息,请及时与我们联系 联系我们: QQ:107485100</p>				</div></div></body>
</html>

景区一

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>景区一</title><link type="text/css" rel="stylesheet" href="css/index.css" /></head><body><div style="width: 1900px;" id="index"><!-- 导航栏 --><div id="daohanlan"><div style="width: 100px;float: left;margin-left: 50px;"><img src="img/log3.jpg" style="width: 100px; height: 100px;" /></div><div class="zhuti"><h2>红石林景区</h2></div><div class="jingqu"><div><ul class="index-ul1"><li><a href="index.html">首页</a></li><li><a href="ScenicOne.html">景区一</a></li><li><a href="ScenicTwo.html">景区二</a></li></ul></div>	</div><div class="denglu"><div><ul class="index-ul1"><li><a href="login.html">登录</a></li><li><a href="zhuce.html">注册</a></li></ul></div>	</div></div><div id="sce-centen"><img src="img/红石林.jpg"  style="width:1500px;height:400px;margin-left: 60px;"/></div><div style="width:1600px ; height: 800px;margin: auto;"><div style="float: left;"><table border="1" cellspacing="0" class="sce-tbl1"><tr class="sce-tr1"><td style="border-top:3px solid rgb(51, 158, 81);border-bottom: rgb(232, 232, 232);">风景景点</td></tr><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红石林景区位于郑州市西部伏羲山区,规划面积约8平方千米。漫步世界最长的空中玻璃环廊,居高临下,体验“天空漫步”的惊险刺激。在360米的高空乘坐悬崖秋千,凌空飞翔,任凭秋千越荡越高,感受“命悬一线”的激情挑战!穿行悬空栈道,无数的石峰、石柱、石芽、石笋组成的岩石森林,宛如座座盆景。乘坐高空索道,饱览丹霞地貌、石林奇观让您感叹大自然的鬼斧神工。<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;沿518米的中原首座登山扶梯扶级而上,直冲云霄;格桑花海随风摇曳,美不胜收;百姓街上小吃民宿,回味无穷;居悬崖酒店,遥望星空,都市繁华尽收眼底;登补天阁顶,品高天流云、评星转斗移。伏羲宫的晨钟暮鼓则叩响了华夏祖先开天辟地的赞歌,而矗立于山巅的华夏人祖石、伏羲女娲雕像则承载着中华民族五千年文明之滥觞,也见证了旷古千年的溱洧风情。</td></tr></table><br /><table  border="1" cellspacing="0" class="sce-tbl1"><tr class="sce-tr1"><td style="border-top:3px solid rgb(51, 158, 81);border-bottom: rgb(232, 232, 232);">联系方式</td>	</tr><tr><td><ul><li>地址:xxxx</li><li>联系人:xxxxx</li><li>电话:0771-xxxxx</li><li>QQ:xxxxxxxxx</li><li>网址:xxxxxxxx</li><li>邮编:xxxxx</li></ul></td>	</tr></table></div><div class="sce-pric"><table border="1" cellspacing="0" class="sce-tbl2"><tr class="sce-tr1"><td style="border-top:3px solid rgb(51, 158, 81);border-bottom: rgb(232, 232, 232);">首页 > 红石林</td></tr><tr><td><div class="sce-gallery"><a target="_blank" href="#"><img src="img/红石林1.jpg" alt="Cinque Terre" width="600" height="400"></a><div class="sce-desc">玻璃环廊</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/红石林2.jpg" alt="Forest" width="600" height="400"></a><div class="sce-desc">悬崖秋千</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/红石林3.jpg" alt="Northern Lights" width="600" height="400"></a><div class="sce-desc">悬空栈道</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/红石林4.jpg" alt="Mountains" width="600" height="400"></a><div class="sce-desc">红石林</div></div>		</td></tr></table></div></div><!-- 尾部 --><div class="div5"><p style="margin: auto;width: 780px;margin-top: 5px;">欢迎各位网友积极参与,共同创建我们美好的家园。如果您有介绍家乡风光的文字、图片,欢迎与我们联系</p><p style="margin: auto;width: 900px;margin-top: 5px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;@mi.com 京ICP证110507号 京ICP备10046444号 京公安网备11010802020134号 京网文[2014]0059-0009号</p><p style="margin: auto;width: 850px;margin-top: 5px;">如发现政治性、事实性、技术性差错和版权方面的问题及不良信息,请及时与我们联系 联系我们: QQ:107485100</p>				</div></div></body>
</html>

景区二

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>景区二</title><link type="text/css" rel="stylesheet" href="css/index.css" /><link type="text/css" rel="stylesheet" href="css/secnicOne.css" /></head><body><div style="width: 1900px;"><!-- 导航栏 --><div id="daohanlan"><div style="width: 100px;float: left;margin-left: 50px;"><img src="img/log3.jpg" style="width: 100px; height: 100px;" /></div><div class="zhuti"><h2>三泉湖景区</h2></div><div class="jingqu"><div><ul class="index-ul1"><li><a href="index.html">首页</a></li><li><a href="ScenicOne.html">景区一</a></li><li><a href="ScenicTwo.html">景区二</a></li></ul></div>	</div><div class="denglu"><div><ul class="index-ul1"><li><a href="login.html">登录</a></li><li><a href="zhuce.html">注册</a></li></ul></div>	</div></div><div id="sce-centen"><img src="img/三泉湖.jpg"  style="width:1500px;height:400px;margin-left: 50px;"/></div><div style="width:1600px ; height: 1200px;margin: auto;"><div style="float: left;"><table border="1" cellspacing="0" class="sce-tbl1"><tr class="sce-tr1"><td style="border-top:3px solid rgb(51, 158, 81);border-bottom: rgb(232, 232, 232);">风景景点</td></tr><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三泉湖景区是伏羲山旅游区面积最大的自然风景区,景区面积约10平方公里。由玫瑰岭、凤凰天桥、栖凤峪、三泉湖和盘龙古镇休闲区等组成。<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;走进玫瑰岭登高远望,看日出、观云海,三泉湖壮观美景尽收眼底,月牙湖掩映于碧草花丛间。中原首条双排高空玻璃滑道,呈龙形蜷曲姿态俯卧于玫瑰岭下,全长280米,落差达108米,带给您飞一般的速度与激情。中原首座悬索玻璃吊桥,全长210米,往下看如临深渊,沟壑间的枝丫,奇石清晰可见,可谓拾云高山上,踏险万壑中,快意人生路,天堑变通途。<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;栖凤峪因山势的形状如一只展翅欲飞的凤凰而得名,峡谷内绿荫蔽日,巨石嶙峋,飞瀑流泉,珍禽鸣唱,其山岩通体皆红与绿树交相辉映,幻化成浓淡相宜的水墨丹青画廊<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三泉湖景区于2013年8月开始建设,2016年10月创建成为国家4A级景区,2017年全年游客接待量达50万人次。尤其是凤凰天桥成为河南旅游关注的焦点,是休闲度假与高空体验相得益彰的山水胜地。</td></tr></table><br /><table  border="1" cellspacing="0" class="sce-tbl1"><tr class="sce-tr1"><td style="border-top:3px solid rgb(51, 158, 81);border-bottom: rgb(232, 232, 232);">联系方式</td>	</tr><tr><td><ul><li>地址:xxxx</li><li>联系人:xxxxx</li><li>电话:0771-xxxxx</li><li>QQ:xxxxxxxxx</li><li>网址:xxxxxxxx</li><li>邮编:xxxxx</li></ul></td>	</tr></table></div><div class="sce-pric"><table border="1" cellspacing="0" class="sce-tbl2"><tr class="sce-tr1"><td style="border-top:3px solid rgb(51, 158, 81);border-bottom: rgb(232, 232, 232);">首页 > 三泉湖</td></tr><tr><td><div class="sce-gallery"><a target="_blank" href="#"><img src="img/三泉湖1.jpg" alt="Cinque Terre" width="600" height="400"></a><div class="sce-desc">三泉湖</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/三泉湖2.jpg" alt="Forest" width="600" height="400"></a><div class="sce-desc">伏羲宫</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/三泉湖3.jpg" alt="Northern Lights" width="600" height="400"></a><div class="sce-desc">凤凰天桥</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/三泉湖4.jpg" alt="Mountains" width="600" height="400"></a><div class="sce-desc">丛林穿越</div></div>	<div class="sce-gallery"><a target="_blank" href="#"><img src="img/三泉湖5.jpg" alt="Mountains" width="600" height="400"></a><div class="sce-desc">玻璃滑道</div></div><div class="sce-gallery"><a target="_blank" href="#"><img src="img/三泉湖6.jpg" alt="Mountains" width="600" height="400"></a><div class="sce-desc">巨型佛手</div></div></td></tr></table></div></div><!-- 尾部 --><div class="div5"><p style="margin: auto;width: 780px;margin-top: 5px;">欢迎各位网友积极参与,共同创建我们美好的家园。如果您有介绍家乡风光的文字、图片,欢迎与我们联系</p><p style="margin: auto;width: 900px;margin-top: 5px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;@mi.com 京ICP证110507号 京ICP备10046444号 京公安网备11010802020134号 京网文[2014]0059-0009号</p><p style="margin: auto;width: 850px;margin-top: 5px;">如发现政治性、事实性、技术性差错和版权方面的问题及不良信息,请及时与我们联系 联系我们: QQ:107485100</p>				</div></div></body>
</html>

以上就是全部代码了,大家感兴趣的需要源码可以加博主QQ3251312632,大家一起探讨哈!


http://chatgpt.dhexx.cn/article/trNZmmS2.shtml

相关文章

return的使用方法

这里是修真院前端小课堂&#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能&#xff0c;本篇分享的是&#xff1a; 【return的使用方法 】 今天给大家分享一下&am…

if中return的用法

C#编程中&#xff0c;在if语句中&#xff0c;使用return语句&#xff0c;用于退出该if语句所在类的所在方法。例如程序&#xff1a; namespace RETU {class Program{static void Main(string[] args){IFR ifr new IFR();ifr.Kan();//Console.Read();}}class IFR{public stati…

【Java SE】return的用法(快速扫盲)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 前言 1.定义 2.return的用法 3.break和retur…

python中 return 的用法

# 说明&#xff1a; 1&#xff0c;return 语句后面跟的表达式可以省略&#xff0c;省略后相当于 &#xff08;返回&#xff09;return None # 2&#xff0c;如果函数没有retur…

Java中return的两种用法

一、return语句总是用在方法中&#xff0c;有两个作用。 一个是返回方法指定类型的值&#xff08;这个值总是确定的&#xff09;。 一个是结束方法的执行&#xff08;仅仅一个return语句&#xff09;。 一般的就百是用在有反回值的方法中&#xff0c;用来返回方度法指定问类…

return的四种用法

return的四种用法 &#xff08;1&#xff09;return跳出函数 def num1():print(欢迎练习return !)print(hello!) num1() #跳出函数&#xff1a; def num1():print(欢迎练习return !)returnprint(hello!) num1()(2)return从函数返回一个值&#xff0c;并且这个值可以赋值给他变…

C语言中return的各种用法

按初学的理解&#xff0c;return的任务就是返回对应的参数&#xff0c;在外层函数中对这个参数做进一步处理。 实际上return的用法不只这些。 为调用的函数返回参数值 此类应用最为普遍&#xff0c;通常是在一个具有返回值的函数中&#xff0c;返回一个参数值&#xff0c;这个返…

个人公众号,多谢关注

个人公众号,多谢关注!

Java用BufferedImage处理图片实例

最近&#xff0c;项目中需要对图片进行处理。实现的方式当然有很多种&#xff0c;这里&#xff0c;我使用了Java的BufferedImage进行了实现。由于对图片的不熟悉&#xff0c;实现的时候费了点儿劲&#xff0c;这里记录一下&#xff0c;以备后用。 场景描述&#xff1a;其实问题…

彻底理解ThreadLocal、ITL、TTL

懒人改变了世界,简化了世界,却隐瞒了世界的真相. 大家好,今天跟大家剖析一下ThreadLocal. 文章目录 痛苦的回忆抛几个问题前奏铺垫正片详解 痛苦的回忆 不知道大家有没有面向JDBC编程的经历.如果有的话,可以回想一下那是一种怎样的体验;如果没有,也可以假装有这样的经历,然…

【转】线上内存溢出分析

状况描述&#xff1a; 最近项目新打的版本&#xff0c;过不了多长时间&#xff0c;项目就会挂掉。状况就是处于一种假死的状态。索引查询都很慢&#xff0c;几乎进行不了任何操作&#xff0c;慢慢卡死。 然后我们再发版时&#xff0c;只能基于之前打好的war包&#xff0c;替换或…

SQL Server数据库基础的级联删除、级联更新与三层架构之窥

一、定义&#xff1a; 级联删除是指删除包含主键值的行的操作&#xff0c;该值由其它表的现有行中的外键引用。在级联删除中&#xff0c;还删除其外键值引用删除的主键值的所有行。 级联更新是指更新主键值的操作&#xff0c;该值由其它表的现有行中的外键引用。在级联更新中&a…

正则表达式

正则表达式简介&#xff1a; 正则表达式是对字符串操作的一种逻辑公式&#xff0c;就是用事先定义好的一些特定字符、及这些特定字符的组合&#xff0c;组成一个“规则字符串”&#xff0c;这个“规则字符串”用来表达对字符串的一种过滤逻辑。   给定一个正则表达式和另一个…

SQL Server2005中触发器的运用

编写过存储过程的人&#xff0c;再编写触发器时会发现&#xff1a;他们的语法、格式是非常类似的。其实触发器就是一种特殊类型的存储过程。他们都是预编译的&#xff0c;在程序正式编译前就由编译器进行编译&#xff0c;存储在服务器端。 不过&#xff0c;触发器与一般的存储过…

关于SimpleDateFormat安全的时间格式化线程安全问题

关于SimpleDateFormat安全的时间格式化线程安全问题 2014年02月18日 16:19:40 zxh87 阅读数&#xff1a;34426 想必大家对SimpleDateFormat并不陌生。SimpleDateFormat 是 Java 中一个非常常用的类&#xff0c;该类用来对日期字符串进行解析和格式化输出&#xff0c;但如果使用…

LaTex - 插入公式 (从MathType公式编辑器导入到LaTex中)

原创 LaTex 论文排版(2): 插入公式 (从MathType公式编辑器导入到LaTex中) 2019年03月08日 09:37:40 在水一方xym 阅读数 5948 更多 分类专栏&#xff1a; LaTex 论文排版 LaTex 论文排版 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&…

CSS总结

自从做牛腩新闻发布系统的时候&#xff0c;就开始了CSS的学习。CSS这部分知识并不是孤立的&#xff0c;它与JavaScript&#xff0c;与XML&#xff0c;与AJAX等都有着密切的关系。在制作网页的过程中&#xff0c;CSS就是充当一个化妆师的角色&#xff0c;它能够让我们制作出各式…

大型网站应用之海量数据和高并发解决方案总结

一、网站应用背景 开发一个网站的应用程序&#xff0c;当用户规模比较小的时候&#xff0c;使用简单的&#xff1a;一台应用服务器一台数据库服务器一台文件服务器&#xff0c;这样的话完全可以解决一部分问题&#xff0c;也可以通过堆硬件的方式来提高网站应用的访问性能&…

ehcache memcache redis三大缓存男高音

&#xfeff;&#xfeff; 研究使用缓存已经有一段时间了&#xff0c;今天本来想对比一下它们异同以及使用场景。然后我发现已经有前辈做了很不错的总结&#xff0c;而且这篇文章跟我也有很多共鸣。我想说的也就这些&#xff0c;所以这里就直接拿来主义了。 不过&#xff0c;还…

技术是个王八蛋,可是长得真好看

看完题目&#xff0c;请勿喷。最近的生活可能太苦逼了&#xff0c;好想吐槽一下~~~ 首先&#xff0c;先来分享一段个人特别喜欢的话&#xff1a; 透视社会依次为三个层面&#xff1a;制度、文化和技术。小到一个人&#xff0c;大到一个国家&#xff0c;一个民族&#xff0c;任…