前言
找实习的时候，每天都对自己说一句：我很棒！
这是对自己做的一个个人博客Web项目的整理。不知道内容要写些什么……就直接放源码吧……希望面试的时候问起项目来我都能记得……
<!DOCTYPE html>
<html>
<!--网页中的 head 标签：它的内容不会在网页中显示，作用是存储网页的一些元数据-->
<head>
<meta charset="utf-8" />
<!--使用bootstrap的必需操作，加入viewport的meta。
width=device-width：表示宽度是设备宽度；
width：可以指定一个具体的值，如1200，控制layout viewport的大小；
initial-scale=1：表示初始的缩放比例
maximum-scale=1：表示最大放大比例
user-scalable=no：表示用户不能调整缩放比例-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<!--"X-UA-Compatible"：定义了浏览器的渲染方式，具体可以搜一搜博客
"IE=edge"：使用IE来访问，会渲染成IE浏览器的最高版本-->
<meta http-equiv="X-UA-Compatible" content ="IE=edge">
<!--网页名称-->
<title>博客</title>
<!--rel：relation的意思，在这里是关联到一个样式表单，表示这个文档初始化的时候将被使用
href：这里放该样式表单的链接。我这里使用的是资源地址，没有互联网就不能使用的。你也可以把bootstrap包下载到本地，然后这里就是本地的bootstrap.min.css相对路径-->
<link rel="stylesheet" href=“https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css”>
<!--使用jQuery。首页中会有博客的粗略信息可供点击浏览。这里使用jQuery的append方法进行动态加载-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script>
<style type="text/css">
/*margin:0;padding:0;：全局样式，重置浏览器默认样式*/
*{
margin:0;padding:0;
}
/*begin::页面头部样式*/
.webHeader{
width:100%; //宽度和浏览器宽度一样
background:#fff;//背景色白色
margin-bottom:20px;//底部外边距20px
}
.header{
background:#fff;
line-height:70px;
}
.header .nav-item{
padding:8px;
font-size:18px;
}
.header .search {
margin-top: 20px;
}
.hot-article {
box-sizing: border-box;
background: #fff;
padding: 0 20px;
line-height: 60px;
border-bottom: 1px solid #eee;
}
.hot-article .hot-item {
padding: 0 10px;
}
</style>
</head>
<!--body标签：网页显示的内容都在body标签中-->
<body>
<!--首页头部-->
<div class="webHeader">
<!--container：使用bootstrap中的container布局容器
还有一种是.container-fluid ：类用于 100% 宽度，占据全部视口（viewport）的容器。二者不可兼容
-->
<div class="container">
<!--row：bootstrap提供的row，定义一行的样式
header：自定义的css样式-->
<div class="row header"> <!--logo部分::栅格系统-大屏幕占1格，中等占2格，小屏幕占3格，超小占3格，下面相似-->
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
<a href="#">
<!--src：图片路径，可以写http路径，也可以使用本地相对路径
alt：img无法显示时的替代文本
style：行内样式-->
<img src="https://data.educoder.net/attachments/download/204880" alt="logo" style="width:80px" />
</a>
</div>
<!--首页资源部分::手机屏幕隐藏，中等屏幕占4格-->
<div class="hidden-sm hiiden-xs col-md-4">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">代码</a>
<a href="#" class="nav-item">问答</a>
<a href="#" class="nav-item">资源</a>
</div>
<!--首页下拉列表::手机屏幕可见-->
<div class="visible-sm-block visible-xs-block col-sm-3 col-xs-4">
<!--class="dropdown"：bootstrap的下拉菜单插件 data-toggle="dropdown"：bootstrap中设置js动作为下拉 aria-haspopup="true"：表示点击的时候会出现菜单或是浮动元素 aria-expanded="true"：表示当前展开状态为展开-->
<div class="dropdown">
<a data-target="#" class="nav-item" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">首页</a>
<!--class="caret"：实现一个下拉箭头-->
<span class="caret"></span>
<!--aria-labelledby="dropdownMenu1"：当首页这个下拉菜单获取到焦点时（就是你鼠标点击了它），label里面显示的内容将是“首页”-->
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!--下面是下拉菜单的每一项-->
<li>
<a href="#" class="nav-item">代码库</a>
</li>
<li>
<a href="#" class="nav-item">问答</a>
</li>
<li>
<a href="#" class="nav-item">资源</a>
</li>
</ul>
</div>
</div>
<!--搜索框部分
hidden-sm 、hidden-xs：手机屏幕隐藏
col-md-3：中等屏幕占三格-->
<div class=" hidden-sm hidden-xs col-md-3">
<!--search：自定义样式-->
<form class="search">
<!--class="form-group has-feedback"：bootstrap提供的表单组件。-->
<div class="form-group has-feedback">
<input type="text" class="form-control" id="search" aria-describedby="searchStatus" placeholder="搜索"/>
<!--搜索时右侧的放大镜图片-->
<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
</form>
</div>
</div>
<!--登陆注册部分-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-2">
<a href="login.html" class="nav-item">登录</a>
<a href="#" class="nav-item">注册</a>
</div>
</div>
</div>
</div>
</div>
<!--博客列表-->
<div class="bloglist">
<div class="container">
<div class="col-lg-9 col-md-9" id="box">
<!--hot-article、hot-item：自定义样式-->
<div class="row hot-article">
<div class="col-lg-3 col-md-3 col-sm-7 col-xs-5">
<span>热门文章</span>
</div>
<div class="col-lg-4 col-lg-offset-5 col-md-5 col-sm-5 col-xs-6 col-md-offset-4">
<a href="#" class="hot-item">推荐</a>
<a href="#" class="hot-item">前端</a>
<a href="#" class="hot-item">后端</a>
<a href="#" class="hot-item">Android</a>
</div>
</div>
</div>
</div>
</div>
</body>
<!--接下来是script的部分
这里是写死的数据，如果要从后端拿数据的话，要用jQuery的.ajax方法-->
<script>
var flag = true; //flag:在滚动条滚动到底部时，为了防止loading效果出现多次，但是数据还没有加载完这种情况。
var count = 0; //
//往页面中加载数据
var loadData = function(x){
var dom = ''; //定义dom节点来存储一篇博客的信息
for(var i=0;i<x;i++){
count++; //加载一个dom，计数器就加一
dom += '<div class="row article-item">'+
'<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">'+
'<h4>'+
'<a href="#">Vue.js实现可配置的登录表单Vue.js实现可配置的登录表单</a>'+ '</h4>'+
'<p>'+
'<button class="btn btn-success btn-xs">前端</button>'+ '<span> rccoder · 1天前 · 45646次阅读 </span>'+
'</p>'+
'</div>'+
'<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">'+
parseInt(count) +
'</div>'+
'</div>'
}
$("#box").append(dom); //使用jQuery的append()方法，将dom加入“box”中
}
$(document).ready(function(){
loadData(3);
})//jquery提供的ready方法：dom加载完，页面也都呈现完了，就开始执行ready（显示博客列表）
//上拉触发加载事件
//jquery事件：当用户滚动指定的元素时，会发生scroll事件
//$(window).height()表示当前可视区域的高度，随着浏览器的高度变化。
//$(document).height()表示整个页面的高度。
//$(window).scrollTop()表示当前滚动的地方的窗口顶端到整个页面顶端的距离。
/*当 scroll >= scrollHeight 时，滚动条就到底部了。
**但是一般会在到达底部之前提前加载，这里只需要
**scroll + 60 >= scrollHeight就可以了，表示到达底部还有60px时就会加载。
*/
$(window).scroll(function(){
var scroll = $(window).scrollTop() + 60;
var scrollHeight = $(document).height() - $(window).height();
if( scroll >= scrollHeight &&flag){
loadMore();//加载更多
}
})
//class="loading"：自定义的loading样式
function loadMore(){
flag = false;
var loading = '<div class="loading">加载中..</div>';
$("#box").append(loading);
setTimeout(function(){
loadData(2);
flag = true;
$(".loading").remove();
},1500)
}
</script>
</html>
最近在为实习的事情苦恼。倒不是因为没有面试机会，而是自己感到了迷茫。一方面因为各大公司的烧脑笔试题感到智力方面严重不足，一方面又觉得面试过程中展现的人际交往能力不太行（明明在生活中我好像也不是那么差劲啊！）最要紧的是，找实习的时间拖得越久就越焦虑。我想我应该要好好选定一个方向然后沉下心来往肚子里装点墨水了。
咱们明天见！
|