Web前端-网站首页和注册界面的实现
首页用到的知识如下：
1.bootstrap框架
2.jQuerry实现页面定时弹出广告
注册界面用到的知识：
1.bootstrap框架
2.jQuerry实现省市联动操作
3.jQuerry实现表单的校验
首页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页bootstrap实现</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>
.adpart{
position: fixed;
right: 0;
bottom: 0;
}
</style>
<script>
function showAd(){
$("#ad").fadeIn(2000);
}
$(function () {
$("#ad").hide();
setTimeout("showAd()",2000);
$("#shutad").click(function () {
$("#ad").fadeOut(1500)
})
})
</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 id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="firstP_img/0.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="firstP_img/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="firstP_img/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <div class="row">
<div class="col-md-12">
<h3>最新商品<img src="firstP_img/smtitle.jpg"></h3>
</div>
</div>
<div class="row" style="background: transparent">
<div class="col-md-2" style="height:480px;">
<img src="firstP_img/left01.jpg" height="100%" width="100%">
</div>
<div class="col-md-10">
<div class="col-md-6" style="height: 240px;">
<img src="firstP_img/middle01.jpg" width="100%" height="80%">
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
<div class="col-md-2" style="height: 240px;">
<img src="firstP_img/small01.jpg" width="100%" height="80%">
<p style="text-align: center">微波炉</p>
<em style="color: red">$999</em>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="firstP_img/index.jpg" width="100%">
</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 class="adpart">
<div>
<a id="shutad" style="position: absolute;right: 10px;color: red">关闭</a>
</div>
<div id="ad" style="height: 250px;width: 350px">
<img src="firstP_img/ad1.jpg" width="100%" height="100%"></img>
</div>
</div>
</div> </div>
</body>
</html>
注册界面代码
<!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" onsubmit="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>
Web前端-网站首页和注册界面的实现的更多相关文章
- web前端网站收藏
参考 w3school:html,css,js等各种参考 W3schools:较之w3school界面更华丽 webplatform:学习最新的web技术 MDN:mozilla developer ...
- (转)雅虎WEB前端网站优化 -- 34条军规
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...
- 雅虎WEB前端网站优化 -- 34条军规
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...
- Yahoo34条军规——雅虎WEB前端网站优化
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). 1.Minimize HTTP Requests 减少HTTP请求 ...
- 关于web前端网站优化
不知道是哪位大牛的文章,转过来嘻嘻. 作者:斯迪链接:https://www.zhihu.com/question/21658448/answer/18903129来源:知乎著作权归作者所有.商业转载 ...
- 转雅虎web前端网站优化 34条军规
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文 1.Minimize HTTP Requests 减少HTTP请求 图片.css.sc ...
- 雅虎WEB前端网站优化—34条军规
Yslow工具 1.Minimize HTTP Requests 减少HTTP请求 图片.css.script.flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间.把多个JS ...
- Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...
- 整理六百篇web前端知识混总
9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...
随机推荐
- React Native & Android & iOS & APK
React Native & Android & iOS & APK https://play.google.com/apps/publish/signup/ $ 25 bui ...
- Vue.js 2.x笔记：组件（5）
1. 组件简介 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件:为了拆分Vue实例的代码量,以不同的组件来划分不同的功能模块,需要 ...
- sql中检查时间是否重叠
先画一个时间轴,方便理解. 设新的时间块,开始时间为@BeginDate,结束时间为@EndDate.数据库中的数据为BeginDate和EndDate 这样可以直观的看出来,新的时间块插入进来,只需 ...
- Microsoft Connect 2018 Summary
https://www.microsoft.com/en-us/connectevent/
- Git源码管理工具使用
注明:双击tap键为自动补全操作 1.视频地址:http://www.newbieol.com/course/index_102.html 2.sourcetree是一个拥有界面的git工具吧 下载官 ...
- Dlib Opencv cv2.fitEllipse用于人眼轮廓椭圆拟合
dlib库的安装以及人脸特征点的识别分布分别在前两篇博文里面 Dlib Python 检测人脸特征点 Face Landmark Detection Mac OSX下安装dlib (Python) 这 ...
- 如何用Electron Js创建第一个应用Hello World
什么是Electron Node.js和Chromium的结合品.允许只使用HTML,CSS和JavaScript来开发跨平台桌面应用. 编写第一个Electron程序(Hello World) 在开 ...
- ADC采样工作原理详解
如何利用单片机的ADC模块(或者独立的ADC芯片)得到接入ADC管脚上的实际电压值?这个问题,是第一次接触ADC时候,大家都会遇到的问题.会读到什么值单片机会读到什么值?需要看一个特性,就是几位的AD ...
- 【洛谷P1659】啦啦队排练
题目大意:给定一个长度为 N 的字符串,求前 K 个长度为奇数的回文子串的长度的乘积是多少. 题解:利用回文自动机,将所有长度的回文串和个数求出来,按照长度排序进行模拟即可. 代码如下 // luog ...
- 将gbk字符串转换成utf-8，存储到注册表中后，再次从注册表读取转换成gbk，有问题！！！
char *a = "新2新"; printf("gbk:'%s'\n", a); int ii; ; ii < strlen(a); ii++) { p ...