华衫科技-实训课程-小滴服务（Html-Css-Javascript）

前端时间的两周的校内实训课程上学习了关于前端的一些知识，课上也跟着做了基础项目并进行了完善和整理，具体如下。

项目结构

1.DropleService.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><style>ul {height: 80px;background-color: white;margin-top: -4px;margin-bottom: 10px;}</style>
</head><body><!-- XML：放置数据的，可以自定义标签名称 --><!-- p：paragraph 语义化标签 - 见名知意 - 特点：标签本身自带很多特性语义化好处：代码结构清晰的，易于阅读的，为后期的维护和开发提供便捷条件方便解析，根据语义化展示页面 - 提高渲染速度利于搜索引擎优化。搜索引擎的爬虫会根据不同的标签赋予标签不同的权重--><!-- 第一部分 --><!-- 头部 --><header><p>小滴服务</p></header><!-- image source --><!-- 第二部分 --><section class="second_section"><img src="./Resource//banner1.png" alt=""></section><!-- 第三部分 --><section><ul><li><img src="./Resource/index1.png" alt=""><p>企业项目</p></li><li><img src="./Resource/index2.png" alt=""><p>平台风采</p></li><li><img src="./Resource/index3.png" alt=""><p>报名流程</p></li></ul><ul><li><img src="./Resource/index4.png" alt=""><p>客户管理</p></li><li><img src="./Resource/index5.png" alt=""><p>服务管理</p></li><li><img src="./Resource/index6.png" alt=""><p>新闻公告</p></li></ul><ul><li><img src="./Resource/index7.png" alt=""><p>工程案例</p></li><li><img src="./Resource/index8.png" alt=""><p>修改密码</p></li><li><img src="./Resource/index9.png" alt=""><p>会员注册</p></li></ul><ul><li><img src="./Resource/index7.png" alt=""><p>工程案例</p></li><li><img src="./Resource/index8.png" alt=""><p>修改密码</p></li><li><img src="./Resource/index9.png" alt=""><p>会员注册</p></li></ul></section><!-- 第四部分 --><footer><a href="./DropleService.html"><img src="./Resource/nav11.png" alt><p style="color: red;">小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>

2.BusinessProject.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><link rel="stylesheet" href="./CSSFile/BusinessStyle.css"><style>.BP_section {height: 50px;}.BP_a {text-decoration: none;font-size: 20px;}.main_section {margin-top: -4px;}</style>
</head><body><header><p>创业项目</p></header><!-- 页面导航部分 --><section class="BP_section"><a class="BP_a" href="./BusinessProject.html" style="background-color: white; color: #458CCD;"><p>钻石创业者</p></a><a class="BP_a" href="./GoldBusiness.html"><p>金牌创业者</p></a><a class="BP_a" href="./SilverBusiness.html"><p>银牌创业者</p></a></section><section class="second_section"><img src="./Resource//banner2.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><div style="background-color:white;"><p>服务内容</p><img src="./Resource/50w_1.png" alt=""><p class="first_main_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p></div><div><p>创业者享受的回报收益</p><img src="./Resource/50w_2.png" alt=""><p class="main_p">x：渠道可享有的股份额度；</p><p class="main_p">y：渠道个人业绩流水总额累计；</p><p class="main_p">z：历年渠道全部各方业绩流水总额统计；</p><p class="main_p">b：宏鑫互联网集团所拥有的上市或者充足公司纵谷本数；</p><p class="main_p">q：宏鑫互联网集团上市总股本数的20%；</p></div><div class="main_div" style="background-color:white;"><p>获得收益的条件</p><p class="main_p">①N≥10人；<br>②业绩流水≥1.2亿<br>当满足以上两个条件时，钻石创业者才能取得期权。<br>注：上面的y，z为财务数据，由财务部门按期提供，录入即可。</p></div></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav21.png" alt><p style="color: red;">企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>

3.GoldBusiness.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><link rel="stylesheet" href="./CSSFile/BusinessStyle.css"><style>.BP_section {height: 50px;}.BP_a {text-decoration: none;font-size: 20px;}.main_section {margin-top: -4px;}</style>
</head><body><header><p>创业项目</p></header><!-- 页面导航部分 --><section class="BP_section"><a class="BP_a" href="./BusinessProject.html"><p>钻石创业者</p></a><a class="BP_a" href="./GoldBusiness.html" style="background-color: white; color: #458CCD;"><p>金牌创业者</p></a><a class="BP_a" href="./SilverBusiness.html"><p>银牌创业者</p></a></section><section class="second_section"><img src="./Resource//banner21.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><div style="background-color:white;"><p>服务内容</p><img src="./Resource/50w_1.png" alt=""><p class="first_main_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p></div><div><p>创业者享受的回报收益</p><img src="./Resource/30w_2.png" alt=""><p class="main_p">x：渠道可享有的股份额度；</p><p class="main_p">y：渠道个人业绩流水总额累计；</p><p class="main_p">z：历年渠道全部各方业绩流水总额统计；</p><p class="main_p">b：宏鑫互联网集团所拥有的上市或者充足公司纵谷本数；</p><p class="main_p">q：宏鑫互联网集团上市总股本数的20%；</p></div><div class="main_div" style="background-color:white;"><p>获得收益的条件</p><p class="main_p">①N≥10人；<br>②业绩流水≥1.2亿<br>当满足以上两个条件时，钻石创业者才能取得期权。<br>注：上面的y，z为财务数据，由财务部门按期提供，录入即可。</p></div></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav21.png" alt><p style="color: red;">企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>

4.SilverBusiness.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><link rel="stylesheet" href="./CSSFile/BusinessStyle.css"><style>.BP_section {height: 50px;}.BP_a {text-decoration: none;font-size: 20px;}.main_section {margin-top: -4px;}</style>
</head><body><header><p>创业项目</p></header><!-- 页面导航部分 --><section class="BP_section"><a class="BP_a" href="./BusinessProject.html"><p>钻石创业者</p></a><a class="BP_a" href="./GoldBusiness.html"><p>金牌创业者</p></a><a class="BP_a" href="./SilverBusiness.html" style="background-color: white; color: #458CCD;"><p>银牌创业者</p></a></section><section class="second_section"><img src="./Resource//banner21.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><div style="background-color:white;"><p>服务内容</p><img src="./Resource/10w_1.png" alt=""><p class="first_main_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p></div><div><p>创业者享受的回报收益</p><img src="./Resource/10w_2.png" alt="" style="margin-bottom: 38px ;"></div></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav21.png" alt><p style="color: red;">企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>

5.ServiceProcedure.html

这个页面的效果图只是最开始的最终的图片是通过js代码来进行插入的，由于我在编写文章的时候华衫科技那边给的这个接口文档已经关了，所以展示不了最终效果。如果不需要js来进行图片插入你们可以自行把这段代码最后的js代码给去了。

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><script src="./CommonJS.js"></script><style>.main_section div {margin: 20px;margin-bottom: 150px;}</style>
</head>
<body><header><p>服务流程</p></header><section class="second_section"><img id="img_process" src="./Resource//banner3.png" alt=""></section><section class="main_section"><img style="margin: 10px 20px; margin-bottom: 65px;" width="90%" src="Resource/process.png"></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav31.png" alt><p style="color: red;">服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>
<script>requestData("get", "getimg", "",function (res) {console.log(res.data);// ? img 通过属性src来设置动态图片var img = document.getElementById("img_process");console.log(img);img.src = res.data;})
</script>

6.Platform.html

注意这个页面的文字也是通过js代码获取的，

js文件PlatformJS.js

var a = 10;
function add(num1, num2, callback) {var sum = num1 + num2;callback(sum)
}
function con(number) {console.log(number);
}
add(3, 2, con)
var xhr = new XMLHttpRequest();
xhr.open("get", "https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus?username=xxx&psw=xxxx");
xhr.send();
xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.response);var res = JSON.parse(xhr.responseText)var h1 = document.getElementById("main_h1");var h3 = document.getElementById("main_h3");var p = document.getElementById("main_p");h1.innerText = res.data.title;h3.innerHTML = res.data.subTitle;p.innerHTML = res.data.info;}
}

Platform.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><script type="text/javascript" src="./PlatformJS.js"></script><style>.main_section {margin-top: -4px;}#main_h1 {font-size: 20px;color: red;line-height: 40px;}#main_h3 {font-size: 18px;/* border-top: 1px solid rgb(150, 146, 146); */}#main_p {text-indent: 2rem;line-height: 30px;font-weight: 520;font-size: 14px;}</style>
</head><body><header><p>平台风采</p></header><section class="second_section"><img src="./Resource//banner4.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><!-- h1 - h6 语义含义表示不同的标题类型 --><h1 id="main_h1">公司简介</h1><hr><h3 id="main_h3"></h3><p id="main_p"></p></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav41.png" alt><p style="color: red;">平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>

7.My.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><style>.second_section {position: relative;/* 必须设置父类为相对定位 */}.second_section div {position: absolute;left: 50%;top: 50%;margin-left: -35px;margin-top: -60px;text-align: center;line-height: 25px;}.main_section {/* 设置边框 宽度 */border: 1px solid rgb(221, 221, 221);background-color: white;border-radius: 5px;/* 定宽居中布局方式 */width: 90%;margin: 10px auto;line-height: 50px;}.left_img {float: left;margin: 0 15px;margin-top: 15px;}.right_img {float: right;margin-right: 15px;margin-top: 20px;}</style>
</head><body><!-- XML：放置数据的，可以自定义标签名称 --><!-- p：paragraph 语义化标签 - 见名知意 - 特点：标签本身自带很多特性语义化好处：代码结构清晰的，易于阅读的，为后期的维护和开发提供便捷条件方便解析，根据语义化展示页面 - 提高渲染速度利于搜索引擎优化。搜索引擎的爬虫会根据不同的标签赋予标签不同的权重--><!-- 第一部分 --><!-- 头部 --><header><p>我的小滴</p></header><section class="second_section"><img src="./Resource//banner5.png" alt=""><div><img src="./Resource/head.png" alt=""><p>华杉科技</p><button style="background-color: #1C6DC0;">退出登录</button></div></section><!-- 主内容区域 --><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav51.png" alt><p style="color: red;">我的小滴</p></a></footer></body></html>

8.Login.html

登录页面也是使用js代码进行校验登录，如果华衫科技那边接口没关掉的话可以按照如下接口文档，可以使用账号admin 密码 admin 来进行校验登录即可跳转到首页


基本接口baseurl:  http://106.75.16.42:8082--------------------------------------------------------------------获取图片url: /getimgmethods: get参数：无响应：json{"code": 1,   // 1成功"msg":"获取数据成功","data":"http://www.huashankeji.com/public/static/fwlc.png"   // 图片信息}-----------------------------------------------------关于我们url: /aboutusmethod:get参数：无响应：json{"code": 1,   // 0失败   1成功"msg":"获取数据成功","data":{...}   // 公司信息数据}----------------------------------------------------登录接口url: /loginmethods: postform-data参数：username   pwd     响应：json{"code": 1,   // 0失败   1成功"msg":"登录成功"   }登录成功的操作 默认用户名用户名:admin   密码:admin用户名:hskj    密码:123456用户名:test    密码:123456----------------------------------------------------------------------

Login.html

<!-- html5标准网页声明，这是简写方式，支持html5标准的主流浏览器都认识，放置 在页面文档的最前面-->
<!DOCTYPE html>
<!-- 网页的第一个标签，以下的标签都是超文本标记lang：languag en表示：english
-->
<html lang="en"><head><!-- meta：不会显示在页面中 表示文档的关键字，对整个网页文档的描述，设置网页的过期时间举例:当我们设置网页的关键字/描述信息后，搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说：例如使用IE9，那么就算兼容模式下切换适应IE7，仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link：链接，外部资源 - 小图标资源 --><!-- 标签组成：属性 值 键值对 描述标签（标签）的自身特点 --><!-- href：资源路径相对路径：相对于目标位置,./表示：同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径：D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><script src = "./CommonJS.js"  type = "text/javascript"></script><style>.main_section {border: 1px solid #dddddd;background-color: white;height: 100px;width: 80%;margin: 20px auto;border-radius: 10px;}.input_user,.input_psw {height: 50px;line-height: 50px;}.input_user {border-bottom: 1px solid #dddddd;}input {border: none;outline: none;margin-left: 10px;}.main_section span {margin-left: 15px;}.login_div{background-color: #1C6DC0;border-radius: 10px;height: 50px;text-align: center;line-height: 50px;margin-top: 40px;}.login_div button{width: 100%;height: 100%;color: white;background: transparent;border: none;}</style>
</head><body><header><p>登录</p></header><section style="text-align: center;"><img style="margin-top: 60px;" src="./Resource/head.png" alt=""></section><section class="main_section"><div class="input_user"><span>账号名:</span><input type="text" id="user"></div><div class="input_psw"><span>密&#12288码:</span><input type="password" id="pwd"></div><div class="login_div"><button id="btn">登录</button></div></section></body></html>
<script>// 1.当用户点击登录页面后，js部分需要知道用户的点击行为发生(点击事件)// 进行接下的处理var btn = document.getElementById("btn");console.log(btn);// 给元素添加点击事件btn.onclick = function(){// 信息提交 确认登陆// 首先：获取用户信息 - DOMvar user = document.getElementById("user").value;var pwd = document.getElementById("pwd").value// 将用户信息提交给后台 - 后台从数据库中查询到注册的信息// 之后通过代码比较是否正确/有无注册 - 之后将对应信息返回给前端// 前端根据后端信息做出对应的正确的操作+ "&pwd="var par = "username=" + user + "&pwd="+ pwd;requestData("post","login",par,function(res){// 拿到登陆状态码var code = res.code;// 如何为1，证明成功if(code == 1){// 跳转到首页 - href// BOMlocation.href = "DropleService.html"} else {// 提示用户账号/密码出错 - 查到信息(请先注册,直接跳转注册)// BOM - 浏览器alert("账号密码错误，请重新输入！");}})}
</script>

CommonJS.js

    function requestData(par1,par2,par3,callback){var xhr = new XMLHttpRequest();// 2.配置请求信息xhr.open(par1, "http://106.75.16.42:8082/" + par2)// 配置请求头，告诉后端前端以表格的形式传递过去参数xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");// 3.发送xhr.send(par3);// 后端收到请求，处理 - 返回对应的数据 // 前端得到想要的内容，怎么拿？xhr.onreadystatechange = function() {// 4：代表服务器正常// 200：OKif (xhr.readyState == 4 && xhr.status == 200) {// 所有的一切正常，拿到后台数据,在哪里？console.log(xhr.response);// 将服务器的json数据转换成为 JavaScript 对象var res = JSON.parse(xhr.responseText)// ************* 数据如何回去?callback(res)}}}

BusinessStyle.css

.main_section div p{text-align: center;padding-top: 10px;font-size: 18px;font-weight:600
}
.main_section div img{width: 100%;
}
.main_section div .main_p{color: #8D8D8D;font-size: 10px;padding: 0 15px;text-align: left;line-height: 30px;
}
.main_section div .first_main_p{color: #8D8D8D;font-size: 10px;text-align: center;}

CommonStyle.css


header{background-color: #1C6DC0;color: white;text-align: center;line-height: 44px;font-size: 18px;top: 0;position: sticky;z-index: 1;}
.second_section img{width: 100%;
}
a{text-decoration: none;
}
footer {display: table;width: 100%;text-align: center;background-color: black;height: 66px;bottom: 0px;position: sticky;
}footer a {display: table-cell;vertical-align: middle;}footer a p {color:white;font-size: 10px;
}footer a img {width: 20px;
}

ExtemalStyle.css

*{margin: 0;padding: 0;
}
body{background-color: #F1F1F4;
}

RowStyle.css

ul,.BP_section {display: table;width: 100%;
}ul li,.BP_a {display: table-cell;text-align: center;vertical-align: middle;
}

到这里就是项目的全部了，需要代码到我主页自提，后续还发布了关于党建项目的作业，稍后会进行编写，可以进小编主页进行查看。

华衫科技-实训课程-小滴服务（Html-Css-Javascript）相关推荐

实验室建设案例 | 哈工大人工智能实验室建设及实训课程完美收官
近日,华清远见研发中心成功实施哈尔滨工业大学(威海校区)计算机学院,人工智能专业实验室建设,顺利的完成了实验室建设的验收工作,并快速投入了教学实训使用. 此次实验室设备选用的是一批华清远见研发中心自主 ...
对计算机会计上机课的心得,浅谈高职会计电算化实训课程|会计电算化心得2000字...
[摘要]当代职业教育培养技能型人才,电算化会计人才所需要具备能力特点有计算机应用技术和会计数据输入.处理.输出的过程.会计电算化课程应当在完成会计基础类课程,清楚掌握会计业务流程之后进行学习.高职院 ...
《大客户销售实训课程》
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> <大 ...
会议通知|2019暑期全国高校Python数据分析与实训课程高级研修班
全国高校Python数据分析与实训课程高级研修班通知各高校教务处.各相关院系负责人: 依据<教育部高等学校教学指导委员会章程>规定,教育部高等学校教学指导委员会的任务之 ...
计算机实训存在的问题和解决方法,中职学校计算机专业实训课程存在问题及的对策.doc...
中职学校计算机专业实训课程存在问题及的对策中职学校计算机专业实训课程存在问题及的对策 [摘要] 计算机专业实训课程是中职学校计算机类专业学生步入社会之前,完善提高计算机专业操作技能的一个重要教学环节 ...
使用计算机写作与手工写作的异同,会计模拟论文,关于中等职业学校会计模拟实训课程存在相关参考文献资料-免费论文范文...
导读:本论文是一篇免费优秀的关于会计模拟论文范文资料. 摘要:当前的会计模拟实训主要是通过写.算.做三项基本功的独立操作进行的,但存在着诸多问题,就中职学校会计模拟实训课程的完善建议进行了探讨. 关 ...
educoder实训平台python顺序结构答案_传智播客升级实训课程，打造高分项目实战网课助力高校在线实训...
疫情期间,全国高校泛IT类计算机专业的实训课程由原先的线下实训临时转到线上教学,有些高校因对直播授课模式中控场.应变.学习过程反馈.以及学生吸收程度等经验不足,导致实训结果达不到学校最佳预期.为辅助全 ...
计算机网络技术主要课程阐述,计算机网络技术专业实训课程体系研究
计算机网络技术专业实训课程体系研究本文关键词:实训,课程体系,计算机网络技术,研究,专业计算机网络技术专业实训课程体系研究本文简介:摘要:实践教学本身就在职业教育中发挥着重要的作用.只有不断地加 ...
码云联合实训邦推出高校软件工程视频实训课程
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> 随着软件工程类课程在各大高校如火如荼地开展,如何有效地系统化地开展教学成为这类课程任课教师的关注问题. 目前大多数 ...

华衫科技-实训课程-小滴服务（Html-Css-Javascript）

华衫科技-实训课程-小滴服务（Html-Css-Javascript）相关推荐

最新文章

热门文章