2019.06暑期学习记录前传
作者：互联网
暑假学习记录前传
目前是大三下暑假，就我而言算是个重要的转折点或者是个过渡期。我的学习方向是前端，也就是这个博客就是记录我的前端学习(渣渣要走的路还很长)。
自身情况分析
目前已经掌握html，css和简单的js的编写，但深层次的原理理解不透彻，复杂的js页面无法独立完成。
学习过bootstrap框架的一部分内容，并完成了以此为基础的学科大作业（也就是下面要记录的）
了解过vue.js（嗯，就是跟过教程写了一个极其简单的购物车）。
注册过git账号，上传过几个单页面的代码（等同于没有实质内容）。
学习过使用webpack，但是我几乎用不到它（实际上是能力太垃圾没到用它的时候）。
学习过jsp，servlet，mysql（简单jsp可以完成，关于java的servlet不会）。
java和c语言是硬伤（这就是为什么我想学前端的最大的理由）。
嗯，这些其实都是我对照招聘要求的自省。
近期学习任务
因为暑假已经过去10多天了，跟过html/css/js教程复习过一遍了，所以在此基础上更深层次的学习。
1.学习photoshop切图，根据UI图写几个页面，巩固基础，对代码完成限时保质。
2.学习独立编写javscript实例，遇到问题先思考再借助搜索引擎实在不行再参考别人的代码（7个左右）。
3.学习用git本地上传项目代码。
4.学会vue.js并完成几个实例。
5.学习webpack打包。
上传一个自己独立完成的项目，为了和未来自己的水平作比较
H5期末大作业
下面贴下h5代码，js和css就省略了
<!DOCTYPE html>
<html lang="en">
<head>
<!--指明当前页面的字符编码格式 是 utf-8 -->
<meta charset="utf-8">
<!--指明当前的页面在IE浏览器渲染的时候使用最新的渲染引擎来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--标准的视口设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>顺丰</title>
<!-- Bootstrap -->
<!--bootstrap 核心css文件 -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--
在IE8以下都不支持 html5标签和媒体查询 引入两js插件
html5shiv 支持HTML5标签
respond 支持媒体查询 必须在http形式下访问才有用
-->
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<nav class="navbar sf_nav">
<div class="container">
<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="#">
<img src="images/index.png" alt="顺丰首页">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">物流</a></li>
<li><a href="#">金融</a></li>
<li><a>商业</a></li>
<li><a href="#">成功案例</a></li>
<li><a>服务支持</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
<!--轮播图
<div id="slidershow" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="#">
<img src="images/banner1.jpg" style="height:400px;margin:0 auto;">
</a>
</div>
<div class="item">
<a href="#">
<img src="images/banner2.png" style="height:400px;margin:0 auto;">
</a>
</div>
<div class="item">
<a href="#">
<img src="images/banner3.jpg" style="height:400px;margin:0 auto;">
</a>
</div>
</div>
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
-->
<!--轮播图-->
<div class="sf_banner ">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner" role="listbox"></div>
<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>
<!--轮播计数器-->
<script type="text/template" id="template_point">
<%$.each(model,function(i,item){%>
<li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
<%});%>
</script>
<!--轮播图-->
<script type="text/template" id="template_image">
<%_.each(model,function(item,i){%>
<div class="item <%=i==0?'active':''%>">
<%if(isMobile){%>
<a class="m_imageBox" href="#">
<img src="<%=item.mb%>" alt=""/>
</a>
<%}else{%>
<a class="pc_imageBox" style="background-image: url(<%=item.pc%>)"
href="#"></a>
<%}%>
</div>
<%});%>
</script>
<!--信息-->
<div class="sf_info">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-6">
<a href="#">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="media-body">
<h4 class="media-heading">运单追踪</h4>
</div>
</div>
</a>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<a href="#">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="media-body">
<h4 class="media-heading">我要寄件</h4>
</div>
</div>
</a>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<a href="#">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-yen"></span>
</div>
<div class="media-body">
<h4 class="media-heading">运费时效查询</h4>
</div>
</div>
</a>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<a href="#">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-map-marker"></span>
</div>
<div class="media-body">
<h4 class="media-heading">服务网点查询</h4>
</div>
</div>
</a>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<a href="#">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-globe"></span>
</div>
<div class="media-body">
<h4 class="media-heading">收寄范围查询</h4>
</div>
</div>
</a>
</div>
<div class="col-md-2 col-sm-6 col-xs-6">
<a href="#">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-comment"></span>
</div>
<div class="media-body">
<h4 class="media-heading">在线客服</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="sf_product">
<h2>顺丰全业务介绍</h2>
<p>基于物流，融通金融，流通商业</p>
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#logistics" data-toggle="pill" role="tab">物流</a></li>
<li role="presentation"><a href="#finance" data-toggle="pill" role="tab">金融</a></li>
<li role="presentation"><a href="#business" data-toggle="pill" role="tab">商业</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="logistics">
<div class="inline-div col-xs-12 col-md-6">
<div><img src="images/kuaidifuwu.jpg" alt=""></div>
<div >
<span>快递服务</span>
<p>顺丰依托自有丰富运力资源，通过多项不同的快递产品和增值服务，来满足客户多样化、个性化的寄件需求。</p>
</div>
</div>
<div class="inline-div col-xs-12 col-md-6">
<div><img src="images/lengyunfuwu.jpg" alt=""></div>
<div >
<span>冷运服务</span>
<p>顺丰依托强大的冷链运输网和温控管理系统，为食品&医药冷链客户提供专业的冷运服务。</p>
</div>
</div>
</div>
<div class="tab-pane" id="finance">
<div class="inline-div col-xs-12 col-md-6">
<div><img src="images/xindaiyewu.jpg" alt=""></div>
<div >
<span>信贷业务</span>
<p>基于顺丰的物流、仓储、速运、冷运、商业、支付结算等多元业务场景，促进物流、信息流、资金流“三流合一”，建立产业链金融服务体系，提供“物流+金融”综合解决方案。</p>
</div>
</div>
<div class="inline-div col-xs-12 col-md-6">
<div><img src="images/zongehezhifu.png" alt=""></div>
<div>
<span>综合支付</span>
<p>顺丰金融作为第三方支付牌照拥有者，资金流服务包括钱包支付、POS收单、聚合支付、代收付、认证支付、预付费卡（速运通卡），服务范围覆盖中国境内所有地区。</p>
</div>
</div>
</div>
<div class="tab-pane" id="business">
<div class="inline-div col-xs-12 col-md-6">
<div><img src="images/wangshangshangcheng.jpg" alt=""></div>
<div>
<span>顺丰优选网上商城</span>
<p>甄选全球优质美食，依托顺丰物流，成为生鲜食品配送范围最广的电商平台</p>
</div>
</div>
<div class="inline-div col-xs-12 col-md-6">
<div><img src="images/mendian.jpg" alt=""></div>
<div>
<span>顺丰优选门店</span>
<p>立足社区，提供居民日常所需的优质美食及一小时送货上门、快递收发等服务。</p>
</div>
</div>
</div>
</div>
</div>
<div class="share">
<div class="s1">
<h2 >成功案例</h2>
<p>每一时刻，都有无数的客户托付与期待被成功交付，顺丰与前瞻者同行，与成就者共成就</p>
<a href="#" class="reviewall">查看全部 ></a>
</div>
<div class="s2">
<div class="re col-md-3 col-xs-6">
<a href="#" class="swiper-a-1">
<div class="t-img">
<img src="images/red-t-img-1.png" alt="" class="red">
</div>
<p>3C电子行业</p>
</a>
</div>
<div class="re col-md-3 col-xs-6">
<a href="#" class="swiper-a-2">
<div class="t-img">
<img src="images/red-t-img-2.png" alt="" class="red">
</div>
<p>医疗行业</p>
</a>
</div>
<div class="re col-md-3 col-xs-6">
<a href="#" class="swiper-a-3">
<div class="t-img">
<img src="images/red-t-img-3.png" alt="" class="red">
</div>
<p>生鲜行业</p>
</a>
</div>
<div class="re col-md-3 col-xs-6">
<a href="#" class="swiper-a-4">
<div class="t-img">
<img src="images/red-t-img-4.png" alt="" class="red">
</div>
<p>快消行业</p>
</a>
</div>
</div>
</div>
<div class="fenge">
</div>
<div class="footer">
<div class="fcontainer">
<div class="leftf">
<table>
<tr>
<td style="color: white">
<p class="title"><a>物流</a></p>
<ul class="list">
<li> <a href="#">快递服务</a></li>
<li> <a href="#">冷运服务</a></li>
<li> <a href="#">仓储服务</a></li>
</ul>
</td>
<td>
<p class="title"><a>金融</a></p>
<ul class="list">
<li><a href="#">财富管理</a></li>
<li><a href="#">资产管理</a></li>
<li><a href="#">综合支付</a></li>
</ul>
</td>
<td>
<p class="title"><a>商业</a></p>
<ul class="list">
<li><a href="#">顺丰优选网上商城</a></li>
<li><a href="#">顺丰优选门店</a></li>
</ul>
</td>
<td>
<p class="title"><a>成功案例</a></p>
<ul class="list">
<li><a href="#">3C电子行业</a></li>
<li><a href="#">医疗行业</a></li>
<li><a href="#">生鲜行业</a></li>
<li><a href="#">快消行业</a></li>
</ul>
</td>
<td>
<p class="title"><a>服务支持</a></p>
<ul class="list">
<li><a href="#">我要寄件</a></li>
<li><a href="#">运单追踪</a></li>
<li><a href="#">运费时效查询</a></li>
<li><a href="#">收寄范围查询</a></li>
<li><a href="#">服务网点查询</a></li>
<li><a href="#">收寄标准查询</a></li>
<li><a href="#">更多内容查询</a></li>
</ul>
</td>
<td>
<p class="title"><a>联系我们</a></p>
<ul class="list">
<li><a>客服专线95338 </a></li>
<li><a>客户服务热线</a></li>
<li><a>合作咨询</a></li>
<li><a>在线客服</a></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="rightf">
<table class="chat">
<tr>
<td colspan="6">马上联系我们</td>
</tr>
<tr>
<td colspan="2">新浪微博</td>
<td colspan="2">微信</td>
<td colspan="2">在线客服</td>
</tr>
</table>
</div>
</div>
<div class="clearfix">
<div class="f1">
<table class="policy">
<tr>
<td><a href="">使用条款</a></td>
<td><a href="">服务网络</a></td>
<td><a href="">丰桥平台</a></td>
<td><a href="">隐私政策</a></td>
</tr>
</table>
</div>
<div class="f2">
<table class="copyright">
<tr>
<td><a>© 2017 顺丰速运 版权所有 </a></td>
<td><a>粤 ICP 备08034243号</a></td>
</tr>
</table>
</div>
</div>
</div>
<!--bootstrap是依赖jquery的-->
<script src="lib/jquery/jquery.min.js"></script>
<!--bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!--underscore-->
<script src="lib/underscore/underscore-min.js"></script>
<!--自己的js-->
<script src="js/swipe.js"></script>
<script src="js/index.js"></script>
</body>
</html>
标签：服务,前传,查询,暑期,2019.06,学习,nbsp,js,顺丰 来源： https://blog.csdn.net/baidu_41607142/article/details/93893788