静态资源库CDN服务
最后更新于：2022-04-01 14:24:54
使用静态资源库可以访问线上资源文件，比如jquery库、bootstrap库。使用百度静态资源库的居多，但是发现百度暂时不支持https协议，bootcdn是一个不错的选择。
### 百度静态资源公共库
#### 优点：
- 稳定，快速
由百度遍布全国各地100+个CDN节点提供加速服务。
让开源库享受与百度首页静态资源同等待遇。
- 全面，开源
收录超过180+开源库，并且这个数字正在不断增加。
百度静态资源公共库服务不仅在Github开源库上接受任何人的提交请求，同时实时同步国外如CDNJS上优秀的开源库。
地址：[http://cdn.code.baidu.com/](http://cdn.code.baidu.com/)
### bootCDN
#### 优点
- 资源丰富，收录了 1600+个开源项目
- 支持https协议
地址：[http://www.bootcdn.cn/](http://www.bootcdn.cn/)
CSS Media Query
最后更新于：2022-04-01 14:24:51
通过设置media可以根据不同的屏幕尺寸展示不同的css样式。
### 用法
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@media screen and (max-width: 640px) {
body{
background-color:#008040;
}
}
@media screen and (min-width: 640px) {
body{
background-color:#FFCC66;
}
}
</style>
</head>
<body>
</body>
</html>
~~~
当屏幕尺寸大于640px时显示的背景颜色是：#FFCC66；当屏幕尺寸小于640px时显示的背景颜色是#008040.
Bootstrap图片轮播
最后更新于：2022-04-01 14:24:49
Bootstrap提供了carousel插件，实现图片轮播非常方便。
### 代码
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
img{
margin:0 auto;
}
</style>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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="images/lunbo1.jpg" height="266" width="800" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/lunbo2.jpg" height="266" width="800" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/lunbo3.jpg" height="266" width="800" 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>
</body>
</html>
~~~
### 效果
### 可选参数
- data-ride=”carousel”：加上可以自动播放，不加点击后才会播放。
- 添加标题
标题写在 `<div class="carousel-caption"></div>`之间
例如：
~~~
<div class="carousel-caption">
<h3>果壳推书正式上线</h3>
<p>好书分享、经验交流</p>
</div>
~~~
官网：[http://v3.bootcss.com/javascript/#carousel](http://v3.bootcss.com/javascript/#carousel)
Emmet语法(一)
最后更新于：2022-04-01 14:24:47
[Emmet](http://www.emmet.io/)是一个前端开发插件，可以快速生成html代码，提升开发效率.
#### 1.Sublime Text3安装emmet
> preference－>package control ->install package,输入emmet，安装即可.
#### 2.快速生成html结构文档
在新建的html中输入!或者html，生成html 5结构文档：
> ! 或者html:5
按tab键生成：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
~~~
html4结构文档
> html:tx
按tab键生成：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
~~~
### 3.生成带id的标签
> 元素名 #id名
如：
~~~
p#name
~~~
按tab键生成：
~~~
<p id="name"></p>
~~~
> #name
按tab键生成：
~~~
<div id="name"></div>
~~~
### 4.生成带class的标签
> div.classname
按tab键生成：
~~~
<div class="classname"></div>
~~~
混合：
> div#header+div.body+div#foot.classnam1.classname2.classname3
按tab键生成：
~~~
<div class="classname"></div>
<div id="header"></div>
<div class="body"></div>
<div id="foot" class="classnam1 classname2 classname3"></div>
~~~
### 5.生成子代：>
用符号”<”生成子代，示例：
> div >ul>li
按tab键生成：
~~~
<div>
<ul>
<li></li>
</ul>
</div>
~~~
### 6. 生成兄弟:+
使用”+”生成兄弟，示例：
> div+p+bq
按tab键生成：
~~~
<div></div>
<p></p>
<blockquote></blockquote>
~~~
### 7.生成父代：^
使用”^”生成父代节点，示例：
> div>p>h1^h2
按tab键生成：
~~~
<div>
<p>
<h1></h1>
</p>
<h2></h2>
</div>
~~~
### 8.重复元素：
任何元素后面加上*n就会被重复n次，比如生成一个包含4个li的ul：
> ul>(li.name)*4
按tab键生成：
~~~
<ul>
<li class="name"></li>
<li class="name"></li>
<li class="name"></li>
<li class="name"></li>
</ul>
~~~
### 9.生成分组：()
用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系，示例1：
> (div>dl>(dt+dd)*3)+footer>p
按tab键生成：
~~~
<h2></h2>
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
~~~
示例2：
> div>(header>ul>(li>a)*2)+footer>p
按tab键生成：
~~~
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
~~~
### 10. 设置属性:[]
属性写在[]内，属性当中采用等号赋值，多个属性用空格隔开.
示例
> a[href=”http://blog.csdn.net/napoay” title=”姚攀的博客”]
按tab键生成：
~~~
<a href="http://blog.csdn.net/napoay" title="姚攀的博客"></a>
~~~
### 11.对生成内容编号:$
可以使用美元符 $对项目编号，示例
> ul>li#item$*5
按tab键生成：
~~~
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
~~~
上面的例子是从小到大，从大到小可以在$后加@－：
> ul>li#item$@-*5
按tab键生成：
~~~
<ul>
<li id="item5"></li>
<li id="item4"></li>
<li id="item3"></li>
<li id="item2"></li>
<li id="item1"></li>
</ul>
~~~
从指定序号N开始：
> ul>li.item$@3*5
按tab键生成：
~~~
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
~~~
从指定序号N开始倒序,N是最小的编号：
> ul>li#item$@-4*5
按tab键生成：
~~~
<ul>
<li id="item8"></li>
<li id="item7"></li>
<li id="item6"></li>
<li id="item5"></li>
<li id="item4"></li>
</ul>
~~~
### 12.生成文本内容:{}
想要在生成的元素内插入内容，可以使用{},把文本内容放进去即可。示例：
> ul#id1>li.classname{生成文本内容}*5
按tab键生成：
~~~
<ul id="id1">
<li class="classname">生成文本内容</li>
<li class="classname">生成文本内容</li>
<li class="classname">生成文本内容</li>
<li class="classname">生成文本内容</li>
<li class="classname">生成文本内容</li>
</ul>
~~~
小结：上述内容总结了emmet生成html文档结构、类、id、属性、文本内容、父级节点、兄弟阶段、子节点、序号的方法。正确安装emmet插件，注意中英文切换和空格，熟练掌握以上命令可以快速提高开发效率.
CSS选择器
最后更新于：2022-04-01 14:24:45
### 基本规则
每CSS规则由两部分组成：选择器和声明块，声明由一个或多个声明组成，每个声明是一个属性－值对.
### 1.元素选择器
元素是最基本的选择器, h1，p，a都可以直接做为选择器，甚至是html本身.
~~~
h1{color:#66CCFF;}
h2{color:silver;}
p{font-size:20px;color:#cccccc;}
~~~
一个选择器可以有多个声明，声明之间用分号隔开；一个属性也可以有多个值，中间用空格隔开.给h1加上边框，边框颜色会灰色，边框样式为实线，可以这样写：
~~~
border:1px solid #cccccc;
~~~
选择器分组：如果想同时把不同元素设置相同对样式，可以使用分组同时使用, 选择器之间用逗号隔开。比如需要把h1 和p都设置为字体颜色为红色：
~~~
h1,p{color:red;}
~~~
### 2. 通配选择器
通配选择器用一个星号(*)表示，这个选择器可以和任何元素匹配。例如，要把一个文档中所有的元素颜色都设置成银色，可以这样写：
~~~
*{color:silver;}
~~~
### 3. ID选择器
使用元素选择器会把一个文档中所有都元素都设置为同一样式，以h1{color：red;} 为例，会把所有的h1标签设置为红色，如果只想对一个特定的h1设置样式，可以通过设置id的方式定义规则.
~~~
<p id="p1">test1</p>
<p id="p2">test2</p>
~~~
只对第二个p标签设置样式：
~~~
#p2{color:silver;}
~~~
### 4.类选择器
通过给元素设置标记，同一类的元素可以有相同多样式.
下面的h1和p元素属于同一类，类名为cal.
~~~
<h1 class="cla">Hello World</h1>
<h2>safe information</h2>
<p class="cla">Where there is a will,there is a way</p>
~~~
设置CSS样式：
~~~
.cal{color:color:#FF8000;}/*h1和p具有相同的颜色*/
~~~
也可以单独设置：
~~~
p.cal{ color:yellow;}/*对h1没有作用*/
~~~
- 多类选择器
下面对html代码中有2个p标签，第一个p标签有两个类标记，第二个p标签有一个类标记.
~~~
<p class="urgent warning"> When handling plutoium,care must be taken to ...</p>
<p> With plutoium,<span class="warning">The possibility...</span></p>
~~~
我们将类名为waring的标签字体颜色设为红色，类名为urgent的标签字体颜色设为绿色，那么类名为warning和urgent的标签应该是什么？
~~~
.warning{color:red;}
.urgent{color:green;}
~~~
这种情况只保留写在后面的类的属性，写在前面的会被覆盖掉. 对于多类名的也可以通过下面的方式设置：
~~~
.urgent.warning{background-color:blue;}
~~~
jQuery笔记
最后更新于：2022-04-01 14:24:42
### jQuery笔记
### 简介
jquery是一个优秀的javascript库.jquery能使用户方便的处理html、events、动画，并且能方便的提供ajax交互，核心理念是write less，do more.
### 官网
[http://jquery.com](http://jquery.com)
### 版本
- 1.x 支持ie6+
- 2.x 支持ie9+
### 功能
- HMTL元素选区
- HTML元素操作
- CSS操作
- HTML元素操纵
- CSS操作
- HTML函数事件
- javascript特效和动画
- htmldom遍历和修改
- AJAX
- …
### 引入
1. 从jQuery官网下载后引入
1.
从百度、谷歌、新浪等服务器上加载
百度静态资源库地址[http://cdn.code.baidu.com](http://cdn.code.baidu.com)
jquery 2.1.4版本地址地址[http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js](http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js)
3.html head中引入
~~~
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"> </script>
~~~
### 语法
> $(selector).action()
- $代表jquery
- selector是要操作的对象
- action对应元素的操作
- $(this).hide() –隐藏当前段落
- $(“p”).hide() –隐藏所有段落
### demo
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquey01</title>
</head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(event) {
/* Act on the event */
$(this).hide();
});
});
</script>
<body>
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>
<p>hello5</p>
</body>
</html>
~~~
JavaScript图片切换
最后更新于：2022-04-01 14:24:40
最近学前端感觉入门了，还在最最基础的阶段。今天打开一个网页看到非常常见的一个图片切换效果：在淘宝、JD等购物时，介绍产品的图片会有多张，一般是显示一张，底下有一排小图片，鼠标放到小图片上大图片会切换.参考[vivo X5M 移动4G手机 ](http://item.jd.com/1636144157.html).下面记录一下实现的过程.
### 1. getElementById()
该方法是操作dom非常常用的一个方法，比如有一p标签，id设为pid，通过getElementById(“pid”)就可以对该元素进行操作.
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function changeText(){
document.getElementById("pid").innerHTML
="It works!";
}
</script>
</head>
<body>
<p id="pid" onmouseover="changeText()">Hello word!</p>
</body>
</html>
~~~
上面代码中在body中写了一个p标签，id为pid，当鼠标放到p标签上方的时候触发onmouseover事件，执行changeText()方法，将p标签内的文档改变.
### 2. setAttribute()和getAttribute()
getAttribute()方法用于获取某一属性的值，setAttribute()方法用于给某一属性赋值。
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function changeUrl(){
var baiduurl=document.getElementById("aid");
baiduurl.getAttribute("href");
baiduurl.setAttribute("href",
"http://www.taobao.com");
baiduurl.innerHTML="淘宝";
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="aid" onmouseover="changeUrl()">百度首页</a>
</body>
</html>
~~~
上面代码中，body中有一个a标签，通过getElementById()获取a标签，baiduurl.getAttribute(“href”)的值为默认的href属性,通过baiduurl.setAttribute(“href”, “[http://www.taobao.com](http://www.taobao.com)“)设置以后，该属性值改变.完整代码：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on</title>
<style type="text/css" media="screen">
*{
padding: 0;
}
body{
font-family: 微软雅黑;
}
#imgbox{
width: 320px;
height: 490px;
padding: 10px;
box-shadow: 5px;
border: 1px solid #ccc;
border-radius: 10px;
}
#phoneimg{
padding: 10px;
border-color: 1px solid #cccccc;
}
</style>
</head>
<body>
<div id="imgbox">
<img src="images/phone1.jpg" height="400" width="320" alt="phone" id="phoneimg">
<p id="decimg">phone image1</p>
</div>
<table>
<tbody>
<tr>
<td width="50px">
<img src="images/phone2.jpg" height="100" width="80" title="phone image2" alt="" onmouseover="changeImg(this)" ></td>
<td width="50px">
<img src="images/phone3.jpg" height="100" width="80" title="phone image3" alt=""onmouseover="changeImg(this)" ></td>
<td width="50px">
<img src="images/phone4.jpg" height="100" width="80" title="phone image4" alt=""onmouseover="changeImg(this)" ></td>
<td width="50px">
<img src="images/phone5.jpg" height="100" width="80" title="phone image5" alt=""onmouseover="changeImg(this)" ></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function changeImg(whichpic){
var imgattr=whichpic.getAttribute("src");
var phoneimg=document.getElementById("phoneimg");
phoneimg.setAttribute("src",imgattr);
var dectext=whichpic.getAttribute("title");
document.getElementById("decimg").innerHTML=dectext;
}
</script>
</body>
</html>
~~~
下一步学习一下怎么实现局部放大.
JavaScript瀑布流
最后更新于：2022-04-01 14:24:38
学习了极客学院JavaScript瀑布流实例，实现鼠标下拉图片自动加载效果，和百度图片效果类似[http://image.baidu.com/channel/wallpaper](http://image.baidu.com/channel/wallpaper)。
[TOC]
- HTML
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img"> <img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/10.jpg" alt=""></div>
</div>
</div>
</body>
</html>
~~~
- CSS
~~~
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.box_img img{
width: 150px;
height:auto;
}
~~~
- js
~~~
window.onload=function(){
imgLocation("container","box");
var imgData={
"data":[
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"},
{"src":"7.jpg"},
{"src":"8.jpg"},
]
};
window.onscroll=function(){
if (checkFlag()) {
var cparent=document.getElementById("container");
for (var i = 0; i < imgData.data.length; i++) {
var ccontent=document.createElement("div");
ccontent.className="box";
cparent.appendChild(ccontent);
var boximg=document.createElement("div");
boximg.className="box_img";
ccontent.appendChild(boximg);
var img=document.createElement("img");
img.src="images/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("container");
var ccontent=getChildnode(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
if (lastContentHeight<scrollTop+pageHeight) {
return true;
}
}
function imgLocation(parent,content){
var cparent=document.getElementById(parent);
var ccontent=getChildnode(cparent,content);
var imgWidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgWidth);
cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";
//把第二排的左起第一张图片放到第一排高度最小的那张下面
var imgHeightArr=[];
for (var i = 0; i < ccontent.length; i++) {
if (i<cols) {
imgHeightArr[i]=ccontent[i].offsetHeight;
}else{
var minHeight=Math.min.apply(null,imgHeightArr);
var minHeightIndex=getMinHeightLoc(imgHeightArr,minHeight);
console.log("minHeightIndex"+minHeightIndex);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minHeightIndex].offsetLeft+"px";
imgHeightArr[minHeightIndex]=imgHeightArr[minHeightIndex]+ccontent[i].offsetHeight;
console.log(imgHeightArr[i]);
console.log("高度最低:"+minHeight);
}
}
}
function getChildnode(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName("*");
for (var i = 0; i < allcontent.length; i++) {
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
};
return contentArr;
}
function getMinHeightLoc(imgHeightArr,minHeight){
for(var i in imgHeightArr){
if (imgHeightArr[i]==minHeight) {
return i;
}
}
}
~~~
- 实现效果
JS时钟实例
最后更新于：2022-04-01 14:24:36
学习了JS日期类和时钟实例.
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function startTime () {
var today=new Date();
var y=today.getFullYear();
var mon=today.getMonth()+1;
mon=changNum(mon);
var d=today.getDay();
d=changNum(d);
var h=today.getHours();
var m=today.getMinutes();
m=changNum(m);
var s=today.getSeconds();
s=changNum(s);
document.getElementById("timeid").innerHTML=y+"年"+mon+"月"+d+"日"+h+":"+m+":"+s;
t=setTimeout(function(){
startTime();
},500);
}
function changNum(i){ //月、日、秒如果小于10数字前加0
if(i<10){
return "0"+i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<h1 id="timeid"></h1>
</body>
</html>
~~~
网页中使用自定义字体
最后更新于：2022-04-01 14:24:33
### 1.浏览器对字体格式的支持
| 浏览器类型 | 支持格式 |
|-----|-----|
| IE6 | 仅支持.eot格式 |
| IE7 | 仅支持.eot格式 |
| IE8 | 仅支持.eot格式 |
| Firefox 3.5 | 支持.ttf、.otf格式 |
| Firefox 3.6 | 支持.ttf、otf、WOFF格式 |
| Chrome | 支持.ttf、.otf、.svg格式 |
| Sagari | 支持.ttf、.otf、.svg格式 |
| Opera | 支持.ttf、.otf、.svg格式 |
### 2.Windows自带字体
windows自带字体在C:\Windows\Fonts目录下,字体格式为.ttf.
### 3.字体格式转换
- 第一步: [https://onlinefontconverter.com/](https://onlinefontconverter.com/)
- 第二步：勾选font-face
- 第三步：上传.ttf(或者其他格式字体文件)
- 第四步：转换，完成后下载.
- 比如上传毛泽东字体的.ttf文件,转换完成后生成以下字体：
### 4.嵌入自定义字体方法
打开font.css可以大致是这个样子：
~~~
@font-face {
font-family: 'mzd';
src: url('mzd.eot');
src: url('mzd.eot?#iefix') format('embedded-opentype'),
url('mzd.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
~~~
在HTML中导入该font.css文件，同时把生成的字体文件复制过去，保证路径正确.
### 实例及代码
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体转换</title>
<link rel="stylesheet" type="text/css" href="font.css">
<style type="text/css">
body{ font-family: mzd;}
p{font-size: 32px;}
h2{color:red;}
</style>
</head>
<body>
<h1> 沁园春•长沙</h1>
<h2>毛泽东 </h2>
<p>独立寒秋,湘江北去，橘子洲头.</p>
<p>看万山红遍，层林尽染;漫江碧透,百舸争流。</p>
<p>鹰击长空，鱼翔浅底，万类霜天竞自由.</p>
<p>问苍茫大地,谁主沉浮?</p>
</body>
</html>
~~~
jekyll+markdown+github搭建个人博客
最后更新于：2022-04-01 14:24:31
> 机器环境:Win7 64位
-
**安装rubyinstaller.**
1.
到[http://rubyinstaller.org/downloads/](http://rubyinstaller.org/downloads/ "http://rubyinstaller.org/downloads/")下载ruby安装文件，这里下载**rubyinstaller-2.2.3-x64.exe**，按照提示安装，勾选Add Ruby executables to your PATH.
1.
Win7 64位默认安装位置：C:\Ruby22-x64.
1. 验证ruby是否安装成功：cmd中`ruby -v`显示ruby版本号说明ruby安装成功.
-
**安装rubygems.**
1. 官网下载安装包[https://rubygems.org/pages/download](https://rubygems.org/pages/download "https://rubygems.org/pages/download")
1. 解压rubygems-2.4.8.zip到指定目录，为了方便管理解压后放到C:\Ruby22-x64\目录下.
1. cmd进入rubygems-2.4.8目录下(快捷键：打开C:\Ruby22-x64\rubygems-2.4.8目录，shift+鼠标右键，点击”在此处打开命令行窗口”),运行`ruby setup.rb` .cmd 中 `gem -v` 显示版本号则说明正常.
-
**安装DevKit-mingw64**
1. 下载相应版本[http://rubyinstaller.org/downloads/](http://rubyinstaller.org/downloads/ "http://rubyinstaller.org/downloads/"),在C:\Ruby22-x64\目录下新建DevKit文件夹，运行**DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe**后会提示解压目录，选择C:\Ruby22-x64\DevKit.
1.
在C:\Ruby22-x64\DevKit中打开cmd，运行`ruby dk.rb init`，会提示配置config.yml.
1.
打开C:\Ruby22-x64\DevKit目录下的config.yml，将ruby根目录加入到配置文件中，这里是C:/Ruby22-x64.如果有了就不需要再加.注意格式.
1.
执行ruby dk.rb install.
-
**替换rubyGem库地址（相当重要，因为国内访问外网有线路问题，不仅更新速度慢，而且还会导致更新失败）**
1. gem sources –remove [https://rubygems.org/](https://rubygems.org/)
1. gem sources -a [https://ruby.taobao.org/](https://ruby.taobao.org/) (注意：一定是https，淘宝已暂停http的ruby服务)
1. gem sources -l验证一下.
-
**安装rails**
1. cmd运行gem install rails.
1. cmd运行rails -v显示rails版本号说明安装成功.
- **安装jekyll**
1. cmd运行gem install jekyll
1. cmd运行jekyll -v验证，显示版本号说明安装成功.
环境配置完整之后，下面进入正题，如何新建博客:
-
运行命令:jekyll new 文件夹名，比如jekyll new blog，会在当前目录生成blog文件夹.
-
在生成的blog文件夹根目录下运行命令:jekyll serve –watch
-
浏览器中打开localhost:4000，命令运行过程中没有错误提示，浏览器中显示默认页面说明安装成功.
-
使用markdown发布博客
1.
markdown是什么？ 参考淘宝UED关于markdown的介绍[http://ued.taobao.org/blog/2012/07/getting-started-with-markdown/](http://ued.taobao.org/blog/2012/07/getting-started-with-markdown/ "http://ued.taobao.org/blog/2012/07/getting-started-with-markdown/"). 锤子手机发布会上罗永浩介绍了锤子科技出品的app**锤子便签**支持markdown功能，下载地址：[http://bbs.smartisan.com/forum-92-1.html](http://bbs.smartisan.com/forum-92-1.html "锤子便签app")，非常好用，建议下载体验一番.
1.
将markdown、html格式的文件以”YY-MM-DD-finename.filetype”命名放到_post文件夹下：如2015-09-10-firstpost.markdown.
-
发布到github
1. 首先注册一个[github](https://github.com/)账号.
1. 新建repository,以username.github.io的形式命名.
1. git提交本地代码到github.
1. git提交命令
- git init
- git add .
- git commit -m “update”
- git remote add origin [https://github.com/cseryp/cseryp.github.io.git](https://github.com/cseryp/cseryp.github.io.git)
- git push -u origin master
-
参考文章
1. [每个人都应该有一个Jekyll博客](http://www.cellier.me/2015/01/04/jekyll%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/)
1. [git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)
-
`jekyll 2.5.3 | Error: Permission denied - bind(2) for 127.0.0.1:4000` 出现这个错误说明端口被占有，打开_config.yml，加入一行：port:5001(没有被占用的端口均可)即可解决.
表格隔行换色和细线边框实例
最后更新于：2022-04-01 14:24:29
- 隔行换色
当表格行数较多的时候，每一行都是同一种颜色不方便阅读。通常的解决方法是采用隔行变色，使得奇数行和偶数行的颜色背景不一样，方便阅读。这种效果非常常见，实现起来也非常简单，给奇数行和偶数行分别设置不同的选择器，css设置不同的背景颜色即可.
-
细线边框
表格默认边框比较粗，可以给表格设置一个背景颜色，cellspacing设为1像素，td颜色设为白色覆盖掉背景颜色，cellspacing空出1像素实现细线边框样式.
-
代码
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表格隔行换色实例</title>
<style type="text/css">
body{
width: 960px;
margin:0 auto;
text-align: center;
font-family: 微软雅黑;
}
.even{
background-color: #8DEEEE;
}
.tb_td{
background-color:#ffffff;
}
</style>
</head>
<body>
<H1>HTML表格隔行换色实例</H1>
<table width="90%" cellspacing="1px" cellpadding="5px">
<tr class="tb_head" >
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>性别</th>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
</table>
<H1>细线表格样式</H1>
<table bgcolor="#cccccc" width="90%" cellpadding="10" cellspacing="1px" id="table2" >
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr><tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
</table>
</body>
</html>
~~~
前言
最后更新于：2022-04-01 14:24:27
> 原文出处：[前端学习笔记](http://blog.csdn.net/column/details/fontend.html)
> 作者：[napoay](http://blog.csdn.net/napoay)
**本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！**
# 前端学习笔记
> 前端学习笔记