Html+Css+Javascript项目实战——模拟手机上的7881网页
来源：互联网 发布：mmd姿势数据百度网盘 编辑：程序博客网 时间：2024/06/05 10:59
1. 主页
- 效果图如下
index.html主页主要代码如下
<head> <meta charset="utf-8"> <title></title> <script> function init() { document.getElementById("seach").value = "输入搜索的内容"; } function _focus() { document.getElementById("seach").value = ""; } function _blur() { var name = document.getElementById("seach").value; if (name == "") { document.getElementById("seach").value = "输入搜索的内容"; } else { document.getElementById("seach").style.color = "black"; } } function clickme(){ alert("假装你已经搜到了种子！"); } </script> <style> #top { background-color: #E4F2FC; } .div_user { position: relative; float: right; margin-top: 20px; margin-right: 20px; } #left { width: 33.3%; position: relative; float: left; } #center { width: 33.3%; position: relative; float: left; } #right { width: 33.3%; position: relative; float: left; } #bottom { position: relative; float: left; width: 100%; } </style></head><body style="margin:0;background:#E4E4E4" onload="init()"> <div id="top"> <img src="../img/7881/logo.png" /> <div class="div_user"> <a href="login.html" style="text-decoration: none;">登录</a> <a href="regist.html" style="text-decoration: none;">注册</a> </div> </div> <div id="headad"> <img src="../img/7881/s01.jpg" style="width: 100%;" onclick="location.href='login.html'" /> </div> <div id="left"> <img src="../img/7881/i01.png" width="100%" height="50%" onclick="location.href='buy.html'" /> <img src="../img/7881/i02.png" width="100%" height="50%" onclick="location.href='change.html'" /> </div> <div id="center"> <img src="../img/7881/i05.png" width="100%" height="100%" onclick="location.href='list.html'" /> </div> <div id="right"> <img src="../img/7881/i03.png" width="100%" height="50%" onclick="location.href='list.html'" /> <img src="../img/7881/i04.png" width="100%" height="50%" onclick="location.href='login.html'" /> </div> <div id="bottom"> <p align="center"> <input type="text" id="seach" onfocus="_focus()" onblur="_blur()" style="color: darkgrey;" /> <input type="button" value="搜索" onclick="clickme()" /> <br> (c) Copyright 2016 Administrator. All Rights Reserved. </p> </div></body>
2. 登录界面
- 效果图如下
login.html登录页主要代码如下
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function clickme() { var name = document.getElementById("name").value; var pass = document.getElementById("pass").value; var reg = /^[\w]{6,12}$/; if(name =="用户名：" || pass == "密码：" || !pass.match(reg)){ alert("用户名或密码错误"); }else{ location.href = "index.html"; } } function init() { document.getElementById("name").value = "用户名："; document.getElementById("pass").value = "密码："; } function name_focus() { document.getElementById("name").value = ""; } function pass_focus() { document.getElementById("pass").value = ""; document.getElementById("pass").type = "password"; } function name_blur() { var name = document.getElementById("name").value; if (name == "") { document.getElementById("name").value = "用户名："; } else { document.getElementById("name").style.color = "black"; } } function pass_blur() { var pass = document.getElementById("pass").value; if (pass == "") { document.getElementById("pass").value = "密码："; document.getElementById("pass").type = "text"; } else { document.getElementById("pass").style.color = "black"; } } </script> <style> .div_head { width: 100%; height: 50px; background: #0073C3; padding-top: 15px; } #img_back { width: 25px; height: 25px; margin-top: 5px; margin-left: 12px; position: relative; float: left; } #img_home { position: relative; float: right; width: 32px; height: 30px; margin-top: 5px; margin-right: 14px; } span { font-size: 25px; color: white; font-family: "微软雅黑"; margin-top: 20px; } input { width: 80%; height: 20px; margin: 8px; padding: 10px; color: #B2B2B2; font-size: large; } #btn { width: 85%; background: #F9873C; height: 50px; color: white; margin-top: 25px; font-size: large; } #a_login { position: relative; float: left; margin-left: 60px; margin-top: 30px; } #a_regist { position: relative; float: right; margin-right: 60px; margin-top: 30px; } </style> </head> <body style="margin:0;background:#E4E4E4" id="body" onload="init()"> <div class="div_head"> <p align="center" style="margin-top: 0px;"> <a href="index.html"> <img src="../img/7881/back.png" id="img_back" /> </a> <span>会员登录</span> <a href="index.html"> <img src="../img/7881/home.png" id="img_home" /> </a> </p> </div> <center style="margin-top: 20px; height: 200px;"> <input type="text" id="name" onfocus="name_focus()" onblur="name_blur()" /> <input type="text" id="pass" onfocus="pass_focus()" onblur="pass_blur()" /> <input type="button" value="登录" id="btn" onclick="clickme()" /> </center> <div style="height: 80px;" align="center"> <p> <a href="regist.html" id="a_login" style="text-decoration: none;">用户注册</a> <a href="#" id="a_regist" style="text-decoration: none;">忘记密码</a> </p> </div> <div style="height: 50px;" align="center"> <p> <a href="index.html" style="text-decoration: none;">登录</a> | <a href="regist.html" style="text-decoration: none;">注册</a> | <a href="#body" style="text-decoration: none;">返回顶部</a> </p> </div> <div align="center"> (c) 2014 m.7881.com </div> </body></html>3. 注册界面
- 效果图如下
regist.html注册页主要代码如下
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function register() { var pass = document.getElementById("pass"); var conpass = document.getElementById("conpass"); var reg = /^[\w]{6,12}$/; var passValue = pass.value; var conpassValue = conpass.value; if (passValue == "密码：(6-12位英文或数字)" || conpassValue == "确认密码：") { alert("密码不完整"); return; } if (passValue != conpassValue) { alert("两次密码不一致！"); } else { if (!passValue.match(reg)) { alert("密码格式不对"); } else { location.href = "index.html"; } } } function init() { document.getElementById("phone").value = "请输入你的手机号码："; document.getElementById("pass").value = "密码：(6-12位英文或数字)"; document.getElementById("conpass").value = "确认密码："; document.getElementById("phone_very").value = "请输入手机验证码"; } function phone_focus() { document.getElementById("phone").value = ""; } function pass_focus() { document.getElementById("pass").value = ""; document.getElementById("pass").type = "password"; } function conpass_focus() { document.getElementById("conpass").value = ""; document.getElementById("conpass").type = "password"; } function very_focus() { document.getElementById("phone_very").value = ""; } function phone_blur() { var phone = document.getElementById("phone").value; if (phone == "") { document.getElementById("phone").value = "请输入你的手机号码："; } else { document.getElementById("phone").style.color = "black"; } } function pass_blur() { var pass = document.getElementById("pass").value; if (pass == "") { document.getElementById("pass").value = "密码：(6-12位英文或数字)"; document.getElementById("pass").type = "text"; } else { document.getElementById("pass").style.color = "black"; } } function conpass_blur() { var conpass = document.getElementById("conpass").value; if (conpass == "") { document.getElementById("conpass").value = "确认密码："; document.getElementById("conpass").type = "text"; } else { document.getElementById("conpass").style.color = "black"; } } function very_blur() { var very = document.getElementById("phone_very").value; if (very == "") { document.getElementById("phone_very").value = "请输入手机验证码"; } else { document.getElementById("phone_very").style.color = "black"; } } </script> <style> @import url("../css/head.css"); #phone, #pass, #conpass { width: 90%; margin: 8px; padding: 10px; color: #B2B2B2; font-size: large; } #btn { width: 95%; background: #F9873C; height: 50px; color: white; margin-top: 25px; font-size: large; } #phone_very { width: 50%; position: relative; float: left; margin: 8px; padding: 10px; color: #B2B2B2; font-size: large; } #btn_very { width: 30%; position: relative; float: right; height: 42px; margin: 8px; padding: 5px; color: #E1E5D6; background: #898989; font-size: large; } .div_very { width: 98%; height: 60px; } </style></head><body style="margin:0;background:#E4E4E4" onload="init()"> <div class="div_head"> <p align="center" style="margin-top: 0px;"> <a href="index.html"> <img src="../img/7881/back.png" id="img_back" /> </a> <span>会员注册</span> <a href="index.html"> <img src="../img/7881/home.png" id="img_home" /> </a> </p> </div> <center style="margin-top: 20px; height: 350px;"> <input type="phone" id="phone" value="请输入你的手机号码：" onfocus="phone_focus()" onblur="phone_blur()" /> <input type="text" id="pass" value="密码：(6-12位英文或数字)" onfocus="pass_focus()" onblur="pass_blur()" /> <input type="text" id="conpass" value="确认密码：" onfocus="conpass_focus()" onblur="conpass_blur()" /> <div class="div_very"> <input type="text" id="phone_very" value="请输入手机验证码" onfocus="very_focus()" onblur="very_blur()" /> <input type="button" id="btn_very" value="发送验证码" /> </div> <input type="button" value="注册" id="btn" onclick="register()" /> </center> <div style="height: 50px;" align="center"> <p> <a href="login.html" style="text-decoration: none;">登录</a> | <a href="regist.html" style="text-decoration: none;">注册</a> | <a href="#body" style="text-decoration: none;">返回顶部</a> </p> </div> <div align="center"> (c) 2014 m.7881.com </div></body>
4. 物品详情页
- 效果图如下
list.html物品详情页主要代码如下
<head> <meta charset="utf-8"> <title></title> <style> @import url("../css/head.css"); .continar { background: white; height: 410px; width: 94%; margin-top: 15px; } #btn { width: 94%; background: #F9873C; height: 50px; color: white; margin-top: 15px; font-size: large; } font { position: relative; float: left; } #backlist { position: relative; float: right; }</style><div class="div_head"> <p align="center" style="margin-top: 0px;"> <a href="index.html"> <img src="../img/7881/back.png" id="img_back" /> </a> <span>忘仙</span> <a href="index.html"> <img src="../img/7881/home.png" id="img_home" /> </a> </p></div><center> <div class="continar"> <p style="width: 80%; "> <font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-top: 20px;margin-bottom: 10px;">寄</font> <b><font color="#1873CC" size="4" style="padding: 5px;margin-top: 20px;font-family: '微软雅黑';margin-bottom: 10px;">7300银两=100元 即买即发</font></b> </p> <br/> <hr width="80%" /> <p style="width: 80%; "> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏名称：忘仙</font></b> </p> <br/> <p style="width: 80%; "> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏区服：三区/万剑逍遥</font></b> </p> <br/> <p style="width: 80%; "> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏类型：游戏币</font></b> </p> <br/> <p style="width: 80%; "> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 单件数量：7300银两</font></b> </p> <br/> <p style="width: 80%; "> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 商品单价：0.0135698515744元/银两</font></b> </p> <br/> <p style="width: 80%; "> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-bottom: 15px;"> 商品库存：1件</font></b> </p> <br/> <br/> <hr width="80%" /> <p style="width: 80%; "> <b><font color="#FF6600" size="6" style="font-family: '微软雅黑';">￥100</font> </b> <font id="backlist" color="#1873CC" size="5" style="font-family: '微软雅黑';margin: 4px;"><a href="list.html" style="text-decoration: none;">返回列表页</a></font> </p> <br/> </div> <a href="index.html" style="text-decoration: none;"> <input type="button" value="立即购买" id="btn" /> </a></center><div style="height: 50px;" align="center"> <p> <a href="login.html" style="text-decoration: none;">登录</a> | <a href="regist.html" style="text-decoration: none;">注册</a> | <a href="#body" style="text-decoration: none;">返回顶部</a> </p></div>
5. 手游交易界面
- 效果图如下
change.html手游交易界面主要代码如下
<head> <meta charset="utf-8"> <title></title> <style> @import url("../css/head.css"); .tab { background: white; width: 90%; border: solid thin #E4E4E4; font-size: 20px; color: #6F7383; } .more { width: 100%; height: 40px; } #moreGm { position: relative; float: right; margin-right: 20px; } #left_content { position: absolute; margin-left: 22px; } #right_content { position: absolute; margin-left: 22px; } </style> <script> function showLeft() { // 显示左边 document.getElementById("left_content").style.visibility = "visible"; document.getElementById("right_content").style.visibility = "hidden"; } function showRight() { // 显示右边 document.getElementById("right_content").style.visibility = "visible"; document.getElementById("left_content").style.visibility = "hidden"; } </script></head><body style="margin:0;background:#E4E4E4"> <div class="div_head"> <p align="center" style="margin-top: 0px;"> <a href="index.html"> <img src="../img/7881/back.png" id="img_back" /> </a> <span>手游交易</span> <a href="index.html"> <img src="../img/7881/home.png" id="img_home" /> </a> </p> </div> <center> <table style="width: 100%; height: 30px; margin-top:30px ;font-size: 20px;color: #6F7383;"> <tr> <th><a href="#" onclick="showLeft()" style="text-decoration: none;">热门游戏</a></th> <th><a href="#" onclick="showRight()" style="text-decoration: none;">最近浏览</a></th> </tr> </table> <hr width="90%" style="margin-top: 15px;margin-bottom: 15px;"></hr> <div style="height: 200px;" align="center"> <table class="tab" id="left_content" border="1px" cellpadding="0px" cellspacing="0px"> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">忘仙</font></td> <td style="width: 50%"><font style="margin-left: 20px;">神魔</font></td> </tr> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">仙变</font></td> <td style="width: 50%"><font style="margin-left: 20px;">时空猎人</font></td> </tr> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">神与魔</font></td> <td style="width: 50%"><font style="margin-left: 20px;">九州OL</font></td> </tr> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">世界OL</font></td> <td style="width: 50%"><font style="margin-left: 20px;">诸神OL</font></td> </tr> </table> <table id="right_content" class="tab" border="1px" cellpadding="0px" cellspacing="0px" style="visibility: hidden;"> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">1</font></td> <td style="width: 50%"><font style="margin-left: 20px;">2</font></td> </tr> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">3</font></td> <td style="width: 50%"><font style="margin-left: 20px;">4</font></td> </tr> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">5</font></td> <td style="width: 50%"><font style="margin-left: 20px;">6</font></td> </tr> <tr style="height: 50px;"> <td style="width: 50%"><font style="margin-left: 20px;">7</font></td> <td style="width: 50%"><font style="margin-left: 20px;">8</font></td> </tr> </table> </div> </center> <div class="more"> <b> <p id="moreGm"><a href="#" style="text-decoration: none;"><font color="#1280C8">更多手机游戏>></font></a></p> </b> </div> <div style="height: 50px;" align="center"> <p> <a href="login.html" style="text-decoration: none;">登录</a> | <a href="regist.html" style="text-decoration: none;">注册</a> | <a href="#body" style="text-decoration: none;">返回顶部</a> </p> </div> <div align="center"> (c) 2014 m.7881.com </div></body>
6. 购物清单页
- 效果图如下
buy.html购买清单页主要代码如下
<head> <meta charset="utf-8"> <title></title> <script> function clickme() { var result = confirm("确认购买吗？"); if (result) { alert("购买成功"); } else {} } </script> <style> @import url("../css/head.css"); .first { background: white; height: 140px; width: 94%; margin-top: 15px; } .second { background: white; height: 140px; width: 94%; margin-top: 5px; } .three { background: white; height: 140px; width: 94%; margin-top: 5px; } .decs { position: relative; float: left; width: 220px; height: 120px; } .buy { position: relative; float: right; } font { position: relative; float: left; } input { width: 60px; height: 30px; background: #0073C3; color: white; font-size: 18px; margin-right: 28px; margin-top: 60px; } </style></head><body style="margin:0;background:#E4E4E4"> <div class="div_head"> <p align="center" style="margin-top: 0px;"> <a href="index.html"> <img src="../img/7881/back.png" id="img_back" /> </a> <span>忘仙</span> <a href="index.html"> <img src="../img/7881/home.png" id="img_home" /> </a> </p> </div> <center> <div class="first"> <div class="decs"> <p> <font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px;">寄</font> <b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微软雅黑';">7300银两=100元</font></b> <font></font> </p> <p> <b><font color="#FF6600" size="5" style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px;">￥100</font> </b> </p> <p> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px;"> 三区/万剑逍遥/游戏币</font></b> </p> </div> <div class="buy"> <input type="button" value="购买" onclick="clickme()" /> </div> </div> <div class="second"> <div class="decs" style="width: 240px;height: 120px;"> <p> <font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px;">寄</font> <b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微软雅黑';">7300银两=100元</font></b> <font></font> </p> <p> <b><font color="#FF6600" size="5" style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px;">￥100</font> </b> </p> <p> <b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px;"> 三区/万剑逍遥/游戏币</font></b> </p> </div> <div class="buy"> <input type="button" value="购买" onclick="clickme()" /> </div> </div> <div class="three"> <div class="decs"> <p> <font color="white " style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px; ">寄</font> <b><font color="#1873CC " size="4 " style="padding: 5px;margin-left: 2px;font-family: '微软雅黑'; ">7300银两=100元</font></b> <font></font> </p> <p> <b><font color="#FF6600 " size="5 " style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px; ">￥100</font> </b> </p> <p> <b><font color="#424240 " style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px; "> 三区/万剑逍遥/游戏币</font></b> </p> </div> <div class="buy"> <input type="button" value="购买" onclick="clickme()" /> </div> </div> </center> <div style="height: 50px; " align="center"> <p> <a href="login.html " style="text-decoration: none; ">登录</a> | <a href="regist.html " style="text-decoration: none; ">注册</a> | <a href="#body " style="text-decoration: none; ">返回顶部</a> </p> <p> <img style="width: 150px;height: 60px; " src="../img/7881/bottom.png " /> </p> </div></body>
阅读全文
0 0
- Html+Css+Javascript项目实战——模拟手机上的7881网页
- Html+Css+Javascript项目实战
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- 【HTML+CSS+JavaScript】网页实战开发笔记之二—关于Web标准，你不能不知道的事
- HTML+CSS+JavaScript】网页实战开发笔记之HTML的头部信息里你不知道的事
- 网页设计与开发——HTML、CSS、JavaScript
- JavaWeb基础知识：Html，Css和Javascript项目实战
- html+css+javascript编程实战项目及心得
- iOS项目开发实战——网页源代码实现二进制和HTML的转换
- JavaWeb基础知识：Html和Css实战WebView实现手机显示网页
- 手机网页的HTML
- 【HTML+CSS实战】商城网页前端
- 手机web——自适应网页设计（html/css控制）
- 手机web——自适应网页设计（html/css控制）
- 手机web——自适应网页设计（html/css控制）
- 23种设计模式
- 2017年八大顶尖的技术趋势
- request
- leetcode Container With Most Water(Java)
- 在html语言中，cellpadding="0" cellspacing="0"是什么意思啊？
- Html+Css+Javascript项目实战——模拟手机上的7881网页
- 图解c/c＋＋多级指针与“多维”数组
- django18-登录注册
- NumPy 核心和模块
- Selenium webdriver 各版本
- 折半查找的递归算法
- 关于安卓发送有序广播的问题
- JavaScript基础知识点
- C#175课的主要内容
