一个简单的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">用户名: <input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名"/></div><div class="username">密 码: <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">景点级别: 国家AAAA级旅游景区</p><p class="p1">门票价格: 分段式售票</p><p class="p1">地理位置: 河南省郑州市,新密市</p><p class="p1">开放时间: 08:00-17:00</p><p class="p1">占地面积: 60平方公里</p><p class="p1">气候类型: 暖温带大陆性季风气候(半湿润)</p><p class="p1">著名景点: 伏羲大峡谷、栖凤峪、玫瑰岭、中原首座玻璃吊桥、红石林、玻璃环廊——天空漫步、悬崖秋千</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;">       @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> 红石林景区位于郑州市西部伏羲山区,规划面积约8平方千米。漫步世界最长的空中玻璃环廊,居高临下,体验“天空漫步”的惊险刺激。在360米的高空乘坐悬崖秋千,凌空飞翔,任凭秋千越荡越高,感受“命悬一线”的激情挑战!穿行悬空栈道,无数的石峰、石柱、石芽、石笋组成的岩石森林,宛如座座盆景。乘坐高空索道,饱览丹霞地貌、石林奇观让您感叹大自然的鬼斧神工。<br /> 沿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;">       @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> 三泉湖景区是伏羲山旅游区面积最大的自然风景区,景区面积约10平方公里。由玫瑰岭、凤凰天桥、栖凤峪、三泉湖和盘龙古镇休闲区等组成。<br /> 走进玫瑰岭登高远望,看日出、观云海,三泉湖壮观美景尽收眼底,月牙湖掩映于碧草花丛间。中原首条双排高空玻璃滑道,呈龙形蜷曲姿态俯卧于玫瑰岭下,全长280米,落差达108米,带给您飞一般的速度与激情。中原首座悬索玻璃吊桥,全长210米,往下看如临深渊,沟壑间的枝丫,奇石清晰可见,可谓拾云高山上,踏险万壑中,快意人生路,天堑变通途。<br /> 栖凤峪因山势的形状如一只展翅欲飞的凤凰而得名,峡谷内绿荫蔽日,巨石嶙峋,飞瀑流泉,珍禽鸣唱,其山岩通体皆红与绿树交相辉映,幻化成浓淡相宜的水墨丹青画廊<br /> 三泉湖景区于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;">       @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,大家一起探讨哈!