一个简单的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，大家一起探讨哈！
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
