Web前端-网站首页和注册界面的实现
2024-04-28 11:42:22
首页用到的知识如下：
1.bootstrap框架
2.jQuerry实现页面定时弹出广告
注册界面用到的知识：
1.bootstrap框架
2.jQuerry实现省市联动操作
3.jQuerry实现表单的校验
首页代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>首页bootstrap实现</title>
6 <link rel="stylesheet" href="bootstrap.css" />
7 <script type="text/javascript" src="jquery-3.3.1.js"></script>
8 <script type="text/javascript" src="bootstrap.min.js" ></script>
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <style>
11 .adpart{
12 position: fixed;
13 right: 0;
14 bottom: 0;
15 }
16 </style>
17 <script>
18 function showAd(){
19 $("#ad").fadeIn(2000);
20 }
21 $(function () {
22 $("#ad").hide();
23 setTimeout("showAd()",2000);
24 $("#shutad").click(function () {
25 $("#ad").fadeOut(1500)
26 })
27 })
28 </script>
29 </head>
30 <body>
31 <div class="container">
32 <div class="row" style="background-color: transparent;">
33 <div class="col-md-4 col-sm-6 col-xs-6" style="height: 50px;">
34 <img src="firstP_img/logo.jpg" width="80%" height="100%"/>
35 </div>
36 <div class="col-md-4 hidden-sm hidden-xs">
37 <img src="firstP_img/header.jpg" />
38 </div>
39 <div class="col-md-4 col-sm-6 col-xs-6 " style="line-height: 50px;height: 50px;position: absolute;right:0px">
40 <a href="#" class="btn">登录</a>
41 <a href="#" class="btn">注册</a>
42 <a href="#" class="btn">购物车</a>
43 </div>
44 </div>
45
46 <div>
47 <nav class="navbar navbar-inverse">
48 <div class="container-fluid">
49 <!-- Brand and toggle get grouped for better mobile display -->
50 <div class="navbar-header">
51 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
52 <span class="sr-only">Toggle navigation</span>
53 <span class="icon-bar"></span>
54 <span class="icon-bar"></span>
55 <span class="icon-bar"></span>
56 </button>
57 <a class="navbar-brand" href="#">首页</a>
58 </div>
59
60 <!-- Collect the nav links, forms, and other content for toggling -->
61 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
62 <ul class="nav navbar-nav">
63 <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
64 <li><a href="#">电脑办公</a></li>
65 <li><a href="#">鞋靴箱包</a></li>
66 <li><a href="#">香烟酒水</a></li>
67 <li class="dropdown">
68 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类<span class="caret"></span></a>
69 <ul class="dropdown-menu">
70 <li><a href="#">手机数码</a></li>
71 <li><a href="#">电脑办公</a></li>
72 <li><a href="#">香烟酒水</a></li>
73 </ul>
74 </li>
75 </ul>
76 <form class="navbar-form navbar-right">
77 <div class="form-group">
78 <input type="text" class="form-control" placeholder="搜索">
79 </div>
80 <button type="submit" class="btn btn-default">提交</button>
81 </form>
82
83 </div><!-- /.navbar-collapse -->
84 </div><!-- /.container-fluid -->
85 </nav>
86
87 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
88 <!-- Indicators -->
89 <ol class="carousel-indicators">
90 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
91 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
92 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
93 </ol>
94
95 <!-- Wrapper for slides -->
96 <div class="carousel-inner" role="listbox">
97 <div class="item active">
98 <img src="firstP_img/0.jpg" alt="...">
99 <div class="carousel-caption">
100 ...
101 </div>
102 </div>
103 <div class="item">
104 <img src="firstP_img/1.jpg" alt="...">
105 <div class="carousel-caption">
106 ...
107 </div>
108 </div>
109 <div class="item">
110 <img src="firstP_img/2.jpg" alt="...">
111 <div class="carousel-caption">
112 ...
113 </div>
114 </div>
115 ...
116 </div>
117
118 <!-- Controls -->
119 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
120 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
121 <span class="sr-only">Previous</span>
122 </a>
123 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
124 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
125 <span class="sr-only">Next</span>
126 </a>
127 </div>
128
129 <div class="row">
130 <div class="col-md-12">
131 <h3>最新商品<img src="firstP_img/smtitle.jpg"></h3>
132 </div>
133 </div>
134 <div class="row" style="background: transparent">
135 <div class="col-md-2" style="height:480px;">
136 <img src="firstP_img/left01.jpg" height="100%" width="100%">
137 </div>
138 <div class="col-md-10">
139 <div class="col-md-6" style="height: 240px;">
140 <img src="firstP_img/middle01.jpg" width="100%" height="80%">
141 </div>
142 <div class="col-md-2" style="height: 240px;">
143 <img src="firstP_img/small01.jpg" width="100%" height="80%">
144 <p style="text-align: center">微波炉</p>
145 <em style="color: red">$999</em>
146 </div>
147 <div class="col-md-2" style="height: 240px;">
148 <img src="firstP_img/small01.jpg" width="100%" height="80%">
149 <p style="text-align: center">微波炉</p>
150 <em style="color: red">$999</em>
151 </div>
152 <div class="col-md-2" style="height: 240px;">
153 <img src="firstP_img/small01.jpg" width="100%" height="80%">
154 <p style="text-align: center">微波炉</p>
155 <em style="color: red">$999</em>
156 </div>
157 <div class="col-md-2" style="height: 240px;">
158 <img src="firstP_img/small01.jpg" width="100%" height="80%">
159 <p style="text-align: center">微波炉</p>
160 <em style="color: red">$999</em>
161 </div>
162 <div class="col-md-2" style="height: 240px;">
163 <img src="firstP_img/small01.jpg" width="100%" height="80%">
164 <p style="text-align: center">微波炉</p>
165 <em style="color: red">$999</em>
166 </div>
167 <div class="col-md-2" style="height: 240px;">
168 <img src="firstP_img/small01.jpg" width="100%" height="80%">
169 <p style="text-align: center">微波炉</p>
170 <em style="color: red">$999</em>
171 </div>
172 <div class="col-md-2" style="height: 240px;">
173 <img src="firstP_img/small01.jpg" width="100%" height="80%">
174 <p style="text-align: center">微波炉</p>
175 <em style="color: red">$999</em>
176 </div>
177 <div class="col-md-2" style="height: 240px;">
178 <img src="firstP_img/small01.jpg" width="100%" height="80%">
179 <p style="text-align: center">微波炉</p>
180 <em style="color: red">$999</em>
181 </div>
182 <div class="col-md-2" style="height: 240px;">
183 <img src="firstP_img/small01.jpg" width="100%" height="80%">
184 <p style="text-align: center">微波炉</p>
185 <em style="color: red">$999</em>
186 </div>
187 </div>
188 </div>
189 <div class="row">
190 <div class="col-md-12">
191 <img src="firstP_img/index.jpg" width="100%">
192 </div>
193 </div>
194
195 <div class="row">
196 <div class="col-md-12">
197 <img src="firstP_img/footer.jpg" width="100%">
198 </div>
199 </div>
200
201
202 <div style="text-align: center">
203 <a href="#" class="btn">关于我们</a>
204 <a href="#" class="btn">联系我们</a>
205 <a href="#" class="btn">招贤纳士</a>
206 <a href="#" class="btn">法律声明</a>
207 <a href="#" class="btn">友情链接</a>
208 <a href="# class="btn">支付方式</a>
209 <a href="#" class="btn">配送方式</a>
210 <a href="#" class="btn">服务声明</a>
211 <a href="#" class="btn">广告声明</a>
212 </div>
213
214 <!-- 广告部分-->
215 <div class="adpart">
216 <div>
217 <a id="shutad" style="position: absolute;right: 10px;color: red">关闭</a>
218 </div>
219 <div id="ad" style="height: 250px;width: 350px">
220 <img src="firstP_img/ad1.jpg" width="100%" height="100%"></img>
221 </div>
222 </div>
223 </div>
224
225 </div>
226 </body>
227 </html>View Code
注册界面代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册界面</title><link rel="stylesheet" href="bootstrap.css" /><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript" src="bootstrap.min.js" ></script><meta name="viewport" content="width=device-width, initial-scale=1"><style>.header{float:left;height:60px;width:33%;line-height:60px;}.menu{color:white;text-decoration:none;line-height:50px;}</style><script type="text/javascript" src="jquery-3.3.1.js"></script><script>var allcities=[["济南市","青岛市","滨州市"],["贵林","六盘水","毕节"],["石家庄","秦皇岛","保定"],]$(function(){<!--1 绑定事件--><!--2 获取选择的省份的值--><!--3 遍历对应的城市然后添加至div中-->$("#provinces").change(function(){var cities=allcities[this.value];$("#cities").empty();$(cities).each(function(i,n){$("#cities").append("<option>"+n+"</option>");})})$(".required").focus(function () {if($(this).is("#username")){var span=$("#span_username");if(this.value.length < 6 ){$(span).html("<font style='color: red;font-size: small; c'>用户名长度小于6</font>");return false;}else{$(span).html("<font class='right' style='color: grey;font-size: small'>用户名合适</font>");return true;}}else{var span=$("#span_password");if(this.value.length < 6 ){$(span).html("<font style='color: red;font-size: small'>密码长度小于6</font>");}else{$(span).html("<font class='right' style='color: grey;font-size: small'>密码合适</font>");}}}).blur(function () {$(this).triggerHandler("focus");}).keyup(function () {$(this).triggerHandler("focus");})$("#repassword").focus(function () {var span=$("#span_repassword");// if($(this).val() != $("#password").val() ){// $(span).html("<font style='font-size:small;color: red;'>两次密码输入不一致</font>")// }if(this.value != $("#password").val() || $("#repassword").val().length == 0){$(span).html("<font style='font-size:small;color: red;'>两次密码输入不一致</font>");return false;}else{$(span).html("<font class='right' style='font-size:small;color: grey;'>两次密码输入一致</font>");return true;}}).blur(function () {$(this).triggerHandler("focus");}).keyup(function () {$(this).triggerHandler("focus");})$("#email").focus(function () {var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;var value=this.value;var span=$("#span_email")if(re.test(value)){$(span).html("<font class='right' style='font-size:small;color: grey;'>邮箱输入合法</font>");return true;}else{$(span).html("<font style='font-size:small;color: red;'>邮箱输入不合法</font>");return false;}}).blur(function () {$(this).triggerHandler("focus");}).keyup(function () {$(this).triggerHandler("focus");})$("#submit").click(function () {if($(".right").length == 3)return true;return false;})})// function showCities(){// var value=document.getElementById("provinces").value;// var cities=allcities[value];// var select=document.getElementById("cities")// select.options.length=0;// for(var i=0;i < cities.length;i++){// var city_ele=document.createElement("option");// var city_text=document.createTextNode(cities[i]);// city_ele.appendChild(city_text);// select.appendChild(city_ele);// }//
// }//
//
// function showTips(id,tips){// var sp=document.getElementById(id);// tips="<font size='2' color='blue'>" + tips +"</font>";// sp.innerHTML=tips;// }//
//
// function checkUsername(){// var un=document.getElementById("username").value;// var span=document.getElementById("span_username");// if(un.length < 6){// span.innerHTML="<font size='2' color='red'>用户名长度不足六位</font>";// return false;// }// else{// span.innerHTML="<font size='2' color='gray'>用户名可用</font>";// return true;// }// }//
//
// function checkPassword(){// var pw=document.getElementById("password").value;// var span=document.getElementById("span_password");// if(pw.length < 6){// span.innerHTML="<font size='2' color='red'>密码长度不足六位</font>";// }// else{// span.innerHTML="<font size='2' color='gray'>密码可用</font>";// return true;// }// }// function checkRepassword(){// var pw=document.getElementById("password").value;// var rp=document.getElementById("repassword").value;// var span=document.getElementById("span_repassword");// if(pw != rp){// span.innerHTML="<font size='2' color='red'>两次密码输入不一致</font>";// }// else{// span.innerHTML="<font size='2' color='gray'>两次输入密码一致</font>";// return true;// }// }//
// function checkEmail(){// var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;// var email=document.getElementById("email").value;// var span=document.getElementById("span_email");// if(!re.test(email)){// span.innerHTML="<font size='2' color='red'>邮箱格式不正确</font>";// return false;// }// else{// span.innerHTML="<font size='2' color='gray'>邮箱格式正确</font>";// return true;// }// }//
// function checkAll(){// return checkUsername() && checkPassword && checkRepassword() && checkEmail();// }</script>
</head>
<body>
<!--第一部分-->
<div class="container"><div class="row" style="background-color: transparent;"><div class="col-md-4 col-sm-6 col-xs-6" style="height: 50px;"><img src="firstP_img/logo.jpg" width="80%" height="100%"/></div><div class="col-md-4 hidden-sm hidden-xs"><img src="firstP_img/header.jpg" /></div><div class="col-md-4 col-sm-6 col-xs-6 " style="line-height: 50px;height: 50px;position: absolute;right:0px"><a href="#" class="btn">登录</a><a href="#" class="btn">注册</a><a href="#" class="btn">购物车</a></div></div><div><nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li><li><a href="#">电脑办公</a></li><li><a href="#">鞋靴箱包</a></li><li><a href="#">香烟酒水</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">手机数码</a></li><li><a href="#">电脑办公</a></li><li><a href="#">香烟酒水</a></li></ul></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="搜索"></div><button type="submit" class="btn btn-default">提交</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><div style="background:url(./registP_img/regist_bg.jpg);height:480px;width:100%"><div style="position:absolute;top:25%;left:35%;width:40%;height:360px;" ><form class="form-horizontal" action="firstPage.html" οnsubmit="return checkAll()"><div class="form-group"><label class="col-md-2">姓名</label><input type="text" id="username" class="required col-md-6"><span id="span_username" class="col-md-4"></span></div><div class="form-group"><label class="col-md-2">密码</label><input type="password" id="password" class="required col-md-6"><span id="span_password" class="col-md-4"></span></div><div class="form-group"><label class="col-md-2">确认密码</label><input type="password" id="repassword" class="col-md-6"><span id="span_repassword" class="col-md-4"></span></div><div class="form-group"><label class="col-md-2">性别</label><input type="radio" name="sex" >男<input type="radio" name="sex">女</div><div class="form-group"><label class="col-md-2">省份</label><select id="provinces" ><option value="-1">--请选择</option><option value="0">山东省</option><option value="1">贵州省</option><option value="2">辽宁省</option></select><select id="cities"></select></div><div class="form-group col-md-12" ><input style="position: absolute;left:40%" type="submit" value="注册" id="submit" ></div></form></div></div><div class="row"><div class="col-md-12"><img src="firstP_img/footer.jpg" width="100%"></div></div><div style="text-align: center"><a href="#" class="btn">关于我们</a><a href="#" class="btn">联系我们</a><a href="#" class="btn">招贤纳士</a><a href="#" class="btn">法律声明</a><a href="#" class="btn">友情链接</a><a href="# class="btn">支付方式</a><a href="#" class="btn">配送方式</a><a href="#" class="btn">服务声明</a><a href="#" class="btn">广告声明</a></div>
</div>
</body>
</html>View Code
转载于:https://www.cnblogs.com/nlw-blog/p/10724567.html
Web前端-网站首页和注册界面的实现相关推荐
- 前端flv.js设置缓冲时间和大小_不可不知的 WEB 前端网站优化 —— 雅虎 34 条军规...
不可不知的 WEB 前端网站优化 -- 雅虎 34 条军规 不得不说现在依然适用于大部分的网站 当年雅虎推荐了一套优化网站加载速度的34条法则(包括Yslow规则22条),以下是详细说明. 1. Mi ...
- php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...
- C# ASP.NET.Web大学课堂登入注册界面实验
先设计注册界面 <style>body{background-color:antiquewhite;}</style> 背景色 图像 <div><asp:La ...
- Ubuntu Web服务器网站首页存放路径
Ubuntu 环境下使用Apache2配置Web服务器,如果服务器的内网ip地址为192.168.1.111,则在启动Apache2服务后,在浏览器输入192.168.1.111会看到主页显示Apac ...
- 为了悼念XXX，前端网站首页设置为黑白灰色的方法
项目场景: 为了悼念XXX重要人物,需要将网站首页设置为黑白灰色. 解决方案: CSS修改样式便可: body {/* 丧版样式 */-webkit-filter: grayscale(100%);- ...
- web前端网站推荐（后续继续补充）
http://ejohn.org/ jquery作者的个人网站 http://www.ecmascript.org/ js标准 http://www.nczonline.n ...
- 高端大气上档次的web前端网站图标收藏
1.网站类 1.1 Highcharts中文网:https://www.hcharts.cn/demo/highcharts 2.图标类 2.1 fontawesome:519个网站开发小图标 (ti ...
- web前端网站制作的实例（大学生期末作业）集合
- web前端优化与细节
雅虎WEB前端网站优化--34条军规:https://www.jianshu.com/p/3d77c3d3cc8f 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duan ...
最新文章
- 【知识星球】猫猫狗狗与深度学习那些事儿
- 博客园T恤PP泄漏版(附图)
- 斯坦福CS229机器学习课程的数学基础（概率论）翻译完成
- StackOverflow 上面最流行的 7 个 Java 问题！| 值得一看
- java中级职称考试试题_Java中级开发工程师笔试题及答案2016
- android开发JNI之高级篇
- SpringBoot两种定时任务(Spring Schedule 与 Quartz 整合 )实现
- mysql contain和like_mysql不带%的like 与等号之间的区别
- oracle讲表通过主键去重,数据库试题,数据库基础试题及答案
- 直通车推广:打造潮流女装爆款
- css图片保持原有尺寸比例
- C1能力认证训练题解析 _ 第一部分 _ 计算机通识
- emi滤波matlab,EMI电源滤波器选型方法 浅析EMI电源滤波器及其原理介绍
- c语言bfs算法走迷宫,使用广度优先算法(BFS)走迷宫
- Mybatis 学习笔记
- JQCloud标签云、词云展示
- D55_BMS_IntefaceBoard_RevA接口板电路设计图
- VRT系统常用命令总结
- 阅读真题 | 真题阅读 做题记录 二
- 数学建模的影响因素分析方法