一个简单的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 京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 京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 京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>
以上就是全部代码了
更多推荐
一个简单的HTML网页
发布评论