互聯網 - 大數據

文章出處

顧名思義“text-fill-color”就是文字填充顏色而“text-stroke”就是文字描邊。還別說，兩個屬性可以制作出各種炫酷的文字效果，不過IE系列都不支持，不過好在webkit都支持良好。

text-fill-color:color;
<style>
h1{
-webkit-text-fill-color:red;
}
</style>
<h1>博客園</h1>
話說倒有點像color了，這種情況下倒是和color真的是一樣的。

得注意一下：如果同時設置了text-fill-color和color那么color不會起作用。

h1{
-webkit-text-fill-color:red;
color:green;
}
text-stroke:width color;
<style>
h1{
-webkit-text-stroke:1px red;
}
</style>
<h1>博客園</h1>
好像這兩個單獨使用沒有啥亮點，但如果結合起來使用那就不一樣了。
text-stroke + text-fill-color制作文字鏤空效果
<style>
body{
background-color:#000;
}
h1{
font-size:60px;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px #fff;
}
</style>
<h1>博客園</h1>
原來就是設置邊框為白色然后然文字顏色透明，背景顏色黑色，也就是黑白對比，自然文字就只能看見邊框了。
如果再結合一下“background-clip”那就更強大了。
background-clip:text結合text-fill-color制作文字漸變效果
h1{
font-size:60px;
background: linear-gradient(to bottom,#FCF,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

注意:background-clip必須放在background后面不然不起作用，之所以要用background是因為text-fill-color不能使用linear所以只好借助background了。

background-clip:text會將背景作為文字區域裁剪。
<style>
h1{
font-size:60px;
background: url(bg.jpg) repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
</style>
<h1>博客園</h1>
利用animation制作文字遮罩動畫效果
<style>
h1{
font-size:60px;
background: url(bg.jpg) repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:fn 5s alternate infinite;
}
@keyframes fn{
0%{
background-position:0px 0px;
}
20%{
background-position:30% 0px;
}
50%{
background-position:50% 0px;
}
70%{
background-position:70% 0px;
}
100%{
background-position:100% 0px;
}
}
</style>
<h1>博客園</h1>

待續...

文章出處
box-reflect一共有以下幾個屬性：
above：
指定倒影在對象的上邊
below：
指定倒影在對象的下邊
left：
指定倒影在對象的左邊
right：
指定倒影在對象的右邊
offset：倒影與對象之間的間隔，可以為負值。
另外還可以使用漸變以及圖片。
above
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:above;
}
below
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:below;
}
left
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:left;
}
right
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:right;
}
offset偏移量
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:right 10px;
}
利用offset我們就可以給圖片創建一個副本。
利用漸變制作圖片倒影
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}

注意：如果同時指定方向以及漸變必須把偏移量也加上就算是0px也得寫，不然不生效。

制作文字倒影
<style>
h1{
-webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}
</style>
<h1>這是一段文字</h1>
話說本想結合裁剪制作一些東西，結果發現倒影被裁剪了。
<style>
img{
width:50px;
height:50px;
margin:100px;
-webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
-webkit-clip-path:polygon(0px 100%,50% 0px,100% 100%,0px 100%);
}
</style>
倒也不是說倒影沒了，只是被裁剪了，有些圖形還是會在的，結果發現真是意想不到啊。
img{
width:50px;
height:50px;
margin:100px;
-webkit-clip-path:polygon(0px 200%,50% 0px,100% 200%,0px 200%);
-webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}
看來結合裁剪也是一種學問啊。

文章出處
2016.10.29更新 本文存在大量的錯誤，僅供參考。

不知不覺在前端領域馬上一個年頭就要過去了，然而再看看自己的代碼，果然夠爛，那么為什么代碼一直沒有用面向對象的思維去寫CSS呢？首先有兩點：一點就是感覺沒必要，還有一點就是難控制。為什么這么說呢？作為剛入門的人來說，第一寫的代碼就少，平時也不會感覺到代碼有什么問題，等開發多了，雖然感覺到問題了，但是你還是很難去按照面向對象的思維去寫，因為按照面向對象去思維寫需要你把握全局觀，更是面向未來編程，把握不好，越寫越亂。所以很多新手一直都還是按照面向過程來寫。今天我主要用一些實際的例子講解面向對象的CSS以及JS讓你寫更少的代碼，讓你越來越懶。這篇文章絕對不是侃侃而談，這些例子都是我實際開發中的問題，寫這篇文章的目的就是讓自己以后寫更好的代碼，同時分享給大家一起共勉。

CSS懶人篇
寫頁面的時候發現好幾處的按鈕都是這種樣式，于是把這個按鈕的樣式單獨提取出來放著全局css文件中
.base-btn {
display: block;
width: 90%;
height: 54px;
line-height: 54px;
text-align: center;
background-color: #14B5A9;
color: #fff;
font-size: 1.4rem;
margin: 0 auto;
}
但這絕對是個不正確的做法，還不如不提取，因為寫的太死，這也就是新手為什么不喜歡用面向對象的方式寫代碼的原因，因為新手很難考慮周全，最后反而還不如直接寫的好。看看這個頁面的按鈕。
這里不應該寫width:90%，margin:0 auto因為這些都是不固定的因素，因此有些是不能共用的。
.base-btn {
display: block;
height: 54px;
line-height: 54px;
text-align: center;
background-color: #14B5A9;
color: #fff;
font-size: 1.4rem;
}
這樣就好很多了，但還是很有問題的，尤其是命名，嚴重的問題，因為不只是有這一種按鈕，看上面的圖片，是有兩種按鈕樣式的，因此我們命名也得改一下。
.btn{
display: block;
height: 54px;
line-height: 54px;
text-align: center;
font-size: 1.4rem;
}
.btn-14B5A9{
background-color: #14B5A9;
color: #fff;
}

我的習慣是用背景顏色命名，主要原因是顏色叫不出名字T_T，當然這種方式還是不同好的，用的時候還得試顏色，如果你有好的命名顏色方法還望能夠分享一下。這里定義了兩個類是很有必要的，一個是基礎樣式，就是說90%以上的按鈕都會有這個樣式就叫它基礎樣式，而下面的.btn-14B5A9是某個特定的按鈕才有的樣式，因此得單獨寫，另外還有寬度和高度，如果頁面大部分都一樣的話，還是可以提取出來寫一個class的，但注意關于寬度和高度是易變的所以千萬不要寫在.btn里面，除非你有一萬份把握。
.btn-w45-h140{
width: 140px;
height: 45px;
line-height: 45px;
}
雖然這樣寫下來還算有那么一點面向對象的樣子，但還是有太多的問題，尤其在命名上，因此我建議還是通過組件化來寫。對于基本樣式還是提取出來，然后寫組件。
如這一塊我們可以把它寫成一個組件。

話說雖然市面上有很多寫組件的框架或者庫，但我還是不太滿意，因為往往項目都沒有必要使用那么大的框架，只是一點點東西而已，但苦于HTML沒有導入另外一個HTML的功能，這句話擱在以前是對的，但HTML5已經支持導入另外一個頁面了，詳情可以搜索link import html但可惜的大部分瀏覽器都不支持，安卓的微信倒是支持，不過IOS不支持，UC也不支持，好吧，還是不能用。于是想起了ES6里面的模板字符串，于是有了下文。

我想把這個tab做成組件，下次用的時候直接導入就可以使用，先來看看怎么使用吧。
<div id="tab"></div>
<script src="tab.js"></script>
<script>
tab({
title:[
'CSS',
'Javascript',
'HTML5&&CSS3'
],
content:[
'這是一篇CSS文章',
'這是一篇Javascript文章',
'這是一篇HTML5和CSS3文章'
]
})
</script>
定義一個id，這個id和tab組件名字一樣。然后引入組件文件，最后傳遞數據。
效果如下：
組件代碼：
function tab(obj){
var html = `
<nav class="title">
<a href="#a">${obj.title[0]}</a>
<a href="#b">${obj.title[1]}</a>
<a href="#c">${obj.title[2]}</a>
</nav>
<ul class="content">
<li id="a">${obj.content[0]}</li>
<li id="b">${obj.content[1]}</li>
<li id="c">${obj.content[2]}</li>
</ul>
`;
var sty = `
<style>
body,div,nav,ul,li{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#tab{
width:300px;
margin:100px auto;
}
#tab .title a{
float:left;
width:33.333333333%;
height:35px;
line-height:35px;
text-align:center;
border:1px solid #dedede;
box-sizing:border-box;
text-decoration:none;
}
#tab .title a:nth-last-of-type(-n+2){
border-left:none;
}
#tab .content{
clear:both;
position:relative;
}
#tab .content li{
width:100%;
height:300px;
outline:1px solid #dedede;
background-color:#fff;
position:absolute;
left:0;
top:0;
z-index:-999;
}
#tab .content li:first-of-type{
z-index:2;
}
#tab .content li:target{
z-index:3;
}
</style>
`;
document.getElementById('tab').innerHTML = html;
document.getElementsByTagName('head')[0].innerHTML += sty;
}
其實原理和字符串拼接一樣，只不過用了ES6的語法，這樣看起來更加方便，之所以還有傳遞一個數據過去是因為名稱啥的可能不一樣，如果說這個組件的內容什么的都是固定的，那就沒有必要留接口了。不過這雖然解決了一下小問題，但還是不足的，可擴展性不怎么好。
document.getElementById('tab').innerHTML = html;
var oHead = document.getElementsByTagName('head')[0];
oHead.innerHTML = sty + oHead.innerHTML;

把style放在最上面，這樣下面就可以去修改里面的代碼。
還有一些細節的問題，就是組件命名，比如說tab，可能有多種樣式的，就是有不同的tab組件，那究竟是都放在一個文件里面，還是另外再創建一個文件？如果是都放在一個js文件里面，那么命名應該如何去名？既然都是tab就不能名字都一樣，所以這也是我們得解決的問題，我的想法就是按照一個順序，或者說按照效果，或者功能去命名。
這種方式顯然也不太好，命名確實也是一個頭疼的問題，實際上我最不滿意的是HTML代碼結構是寫死了的，如果有些地方和這個組件只是相差一點點，可能我們都得重新寫過，想想這段代碼。
你敢保證都是三條數據？這樣的組件還不如不要，寧愿用字符串拼接。看來這種方式還是不太行，不過有一種情況是可行的，就是對于不太可能改動的組件，可以使用這種方式，對于改動較大的還是別用這種方式寫。
先說一下這里用了ES6的語法所以有些瀏覽器不支持，我們還得借助一些工具將ES6轉換成兼容的代碼。轉換教程看這里將ES6轉換成ES5
2016.09.28更新
經過這兩天的研究，最終的結果很遺憾，目前的組件化還是存在著太多的問題，其中最嚴重的問題就是可擴展性，市面上大部分組件化的結構都是寫死的，如果我需要在里面增加一個元素或者刪除一個元素，都是比較麻煩的。雖然有很多不錯的框架，但它們和我想要的結果還是不太一樣，我需要的是簡單，對于不變的組件，直接引入就行。
對于需要傳遞數據的應該這樣。
但盡管這樣，一旦HTML，CSS，JS混合一起必然組件化可擴展性就不可能完美，類似這一個
我們有必要把這個做成組件嗎？最終考慮是沒有必要，其一如果組件了那么究竟用什么標簽？如果這不是問題，那么這個組件了使用方便嗎？引入一個JS？可擴展性呢？你會發現如果用組件化那么會越來越亂，我的想法是用CSS面向對象的方式寫，至少在可擴展性上比較好，這里一再強調可擴展性是因為，我們之所以想要組件化就是為了方便，不需要重復的寫代碼，但如果說事情不是這樣，那么就沒有必要組件化了。
這種頭部啥的都是一模一樣，也不怎么需要改動的，還是建議用組件化的，也不要引什么框架了，就這么個東西還引的話反而麻煩了。記住組件目的就是：簡單，實用，可擴展。

這篇文章會不斷的更新，有好的想法有補充上來，也希望如果你有不錯的建議，也能分享出來。

JS可擴展性
一個時間格式化組件引出的學問,后臺給返回一個總毫秒數，我得格式化成這個樣子。
Vue.filter('timeFormat',function(value,select,split){
var date = new Date(value);
var time = {
y:date.getFullYear(),
d:toS(date.getDate()),
m:toS(date.getMonth()+1)
};
function toS(value){
return value>10?value:'0' + value;
}
var txt = '';
for(var i=0,len=select.length;i<len;i+=1){
if(i==len-1){
txt+= time[select[i]];
}else{
txt+= time[select[i]] + split;
}
}
return txt;
})
這里用了Vue.js，你如果不了解不要緊，因為重點不在這，而是思路。
使用：
<time class="base-gray">時間：{{ item.time | timeFormat 'ymd' '-'}}</time>
這里主要的優點就是它根據你輸入的y,m,d而進行輸出，重點還在于如果你需要新增一個字段，也不必改變代碼，只需要在time里面加一個就好了，其他的都不用動，之所以有這種好處就是因為這里沒有用判斷，而是用了time[select[i]]根據用戶的選擇來輸出，當然這段代碼也并不是完美的，多少還是有些問題，但至少會比你直接寫死的好。
2016.09.28更新
上面說了組件化的缺與失，主要原因就是，沒有完美的東西，但如果不考慮整體組件化，那么情況就會好很多，下面通過一個例子演示。
我想頁面中有很多這種單選效果吧，但注意千萬不要把整個功能當做一個組件，那樣會有很多問題，我只能要它的一部分，也就是功能！我們把它的單選功能封裝起來。
<style>
span{
float:left;
width:100px;
height:35px;
line-height:35px;
text-align:center;
border:1px solid #ccc;
cursor:pointer;
}
</style>
<span id="radius1">111</span>
<span id="radius2">222</span>
<script>
function Radiu(radius1,radius2){
this.n1 = document.querySelector(radius1);
this.n2 = document.querySelector(radius2);
}
Radiu.prototype = {
init:function(callback){
this.click(callback);
},
click:function(callback){
this.n1.onclick = function(){
callback(1,this.n1,this.n2);
}.bind(this);
this.n2.onclick = function(){
callback(2,this.n2,this.n1);
}.bind(this);
}
};
new Radiu('#radius1','#radius2').init(function(num,currentEl,siblingEl){
currentEl.style.color = 'red';
siblingEl.style.color = '#000';
});
</script>
這里一個很簡單的封裝，但可擴展性很好，因為只提供一個callback，給一個當前單擊的元素，和一個兄弟元素，以及一個num表示第幾個（可能會有需要），這種封裝可比你直接把所有功能都封裝起來好，直接把所以的都封裝，可擴展性必然就很差。
<div class="method" data-method="2">
<a href="javascript:;" class="claimMethod_select"><span></span><em>郵寄</em>
</a>
<a href="javascript:;" class="claimMethod_selected"><span></span><em>自取</
em></a>
</div>
<script>
function Radiu(radius1,radius2){
this.n1 = document.querySelector(radius1);
this.n2 = document.querySelector(radius2);
}
Radiu.prototype = {
init:function(callback){
this.click(callback);
},
click:function(callback){
this.n1.onclick = function(){
callback(1,this.n1,this.n2);
}.bind(this);
this.n2.onclick = function(){
callback(2,this.n2,this.n1);
}.bind(this);
}
};
new Radiu('.method>a:nth-of-type(1)','.method>a:nth-of-type(2)').init(
function(num,currentEl,siblingEl){
currentEl.className = 'claimMethod_selected';
siblingEl.className = 'claimMethod_select';
});
</script>
完全不必在乎結構長什么樣子，這就是可擴展性的好處。
寫完后發現，組件化還是有很長一段路要走，因為有太多的不足，雖然有太多不足，但并不代表不重要，不需要，也希望你看完這篇文章有一點小小的啟發。

待更新...

文章出處

除了上一篇說到的創建自定義元素方法以外，還可以通過原生JS來創建，當你需要動態的創建元素時可以通過這種方式。

template.html
<link rel="import" href="../polymer-1.7.0/polymer.html">
<script>
MyElement = Polymer({
is: 'my-element',
created: function() {
this.textContent = 'My element!';
}
});
var el1 = document.createElement('my-element');
var el2 = new MyElement();
document.getElementById('box').appendChild(el2);
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 這是一個基礎版的兼容庫 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 將rel修改為import可以引入另外一個HTML，它將會被執行 -->
<link rel="import" href="./template/template.html">
</head>
<body>
<div id="box"></div>
</body>
</html>
created: function() {
``this.textContent = 'My element!';
}
當創建這個元素的時候，created會被執行，關于更多這方面的信息我們會在生命周期篇詳細說明。
var el1 = document.createElement('my-element');
var el2 = new MyElement();
var el3 = new MyElement();
document.getElementById('box').appendChild(el2);
document.getElementById('box').appendChild(el3);
用new創建MyElement實例,createElement只是創建并不會被添加
如果在實例化的時候你想傳遞參數可以通過添加一個factoryImpl方法。
<script>
MyElement = Polymer({
is: 'my-element',
factoryImpl: function(foo, bar) {
this.textContent = 'Hello num is ' + foo + ' you ' + bar;
}
});
var e = document.createElement('my-element');
var el = new MyElement(42, 'octopus');
document.getElementById('box').appendChild(el);
</script>
當MyElement被實例化的時候factoryImpl會接受這些參數，并且執行。另外如果你想自定義方法，可以這樣。
<script>
MyElement = Polymer({
is: 'my-element',
factoryImpl: function(foo, bar) {
this.textContent = 'Hello num is ' + foo + ' you ' + bar;
foo===42&&this.msg();
},
msg:function(){
alert('你好！');
}
});
var e = document.createElement('my-element');
var el = new MyElement(42, 'octopus');
document.getElementById('box').appendChild(el);
</script>

默認情況下msg是不會執行的，需要我們手動調用。

擴展原生HTML元素
template.html
<script>
Polymer({
is: 'my-input',
extends: 'input',
created: function() {
this.style.border = '1px solid red';
}
});
</script>
extends需要擴展的元素，created被創建的時候，通過js的createElement創建或者HTML添加都會執行這個方法。
index.html
<input is="my-input">
<input type="text">
在需要被擴展的元素上添加一個is屬性。
以上是直接通過HTML的方式添加的，如果需要通過js來操作可以通過下面的方法。
template.html
<script>
MyInput = Polymer({
is: 'my-input',
extends: 'input',
created: function() {
this.style.border = '1px solid red';
}
});
var el1 = document.createElement('input','my-input');
document.body.appendChild(el1);
</script>

注意：目前只支持擴展input或button，其他元素或許以后會支持。

如果你想在頁面加載完畢以后再執行可以這樣寫。
template.html
<link rel="import" href="../polymer-1.7.0/polymer.html">
<dom-module id="main-document-element">
<template>
<p>
Hi! I'm a Polymer element that was defined in the
main document!
</p>
</template>
</dom-module>
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 這是一個基礎版的兼容庫 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 將rel修改為import可以引入另外一個HTML，它將會被執行 -->
<link rel="import" href="./template/template.html">
</head>
<body>
<main-document-element></main-document-element>
<script>
HTMLImports.whenReady(function () {
console.log(1);
Polymer({
is: 'main-document-element'
});
});
console.log(0);
</script>
</body>
</html>
當文檔中的所有輸入都已完成加載時才會調用HTMLImports.whenReady函數。
整篇文章下來，發現創建元素時沒有用new有時也可以，目前這個問題還得研究一下，后面再更新。
恭喜你看完了。

文章出處

所謂內容占位技術，意思是說在內容比較多，數據量大的情況下，可以事先將一些標簽替代它們的位置，等到加載完畢的時候再將其隱藏。注意這和以前的圖片懶加載不是一個意思，兩個不起沖突，圖片懶加載的原理就是事先用一個較小的loading圖片，等用戶到達這個位置的高度時再去獲取相應的數據。內容占位技術就是模擬它可能會顯示出來的樣子。

比如下面這個頁面，不好意思打了馬賽克
再還沒有加載內容出來時，我們可以這樣。
因為是gif的圖片，效果并不是特別好，直接把上面代碼拷貝到你的文件里面打開。這里只做了一部分（量寬高太麻煩了）
其中代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dome</title>
<style>
body{
width:640px;
margin:0 auto;
background-color:#fff;
}
@keyframes placeHolderShimmer{
0%{
background-position: -640px 0
}
100%{
background-position: 640px 0
}
}
.box {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
position: relative;
height:100vh;
}
[class^="box-"]{
position:absolute;
background-color:#fff;
}
.box-bar-0{
left:60px;
top:0;
width:10px;
height:50px;
}
.box-bar-1{
left:60px;
top:0;
width:calc(100% - 50px);
height:20px;
}
.box-bar-2{
left:60px;
top:calc(60px - 25px);
width:calc(100% - 50px);
height:20px;
}
.box-bar-3{
right: 0;
top: 20px;
width: 25%;
height: 16px;
}
.box-bar-4{
left: 0;
top: 50px;
width: 100%;
height: 16px;
}
.box-bar-5{
left: 110px;
top: 66px;
width: 20px;
height: 132px;
}
.box-bar-6{
left: 110px;
top: 86px;
width: calc(100% - 110px);
height: 10px;
}
.box-bar-7{
left: 220px;
top: 98px;
width: 300px;
height: 10px;
}
.box-bar-8{
left: 110px;
top: 110px;
width: calc(100% - 110px);
height: 48px;
}
.box-bar-9{
left: 272px;
top: 166px;
width: calc(100% - 110px);
height: 12px;
}
.box-bar-10{
left: 272px;
top: 184px;
width: calc(100% - 110px);
height: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-bar-0"></div>
<div class="box-bar-1"></div>
<div class="box-bar-2"></div>
<div class="box-bar-3"></div>
<div class="box-bar-4"></div>
<div class="box-bar-5"></div>
<div class="box-bar-6"></div>
<div class="box-bar-7"></div>
<div class="box-bar-8"></div>
<div class="box-bar-9"></div>
<div class="box-bar-10"></div>
</div>
</body>
</html>
代碼的原理其實很簡單，就是用一個大盒子把里面的子盒子包起來，這個大盒子的作用就是那個閃爍效果以及默認背景顏色，其他子標簽的作用就是把不是內容的用白色蓋住默認背景。
恭喜你看完了，能看下來也是不錯的。

文章出處

無聊寫了一個JS下拉加載插件，有需要的可以下載。

// 使用
// new ManDownLoad("#ul","json/load.json",function(data,obj){
// var str = "";
// data.data.forEach(function(item,index){
// str += "<li>" + item.title + "</li>";
// });
// return str;
// },{
// type:"POST",
// data:{
// "hello":"world",
// "fa":"bbb"
// }
// });
;function ManDownLoad(element,url,callback,obj){
this.element = element;
if((typeof element)==="string"){
this.element = document.querySelector(element);
}
this.url = url;
this.callback = callback;
var options = {
type:"GET",
distance:0,
dataType:"json",
data:{}
};
this.config = this.extend(options,obj);
this.init();
};
ManDownLoad.prototype = {
init:function(){
var _this = this;
this.isBottom();
window.addEventListener("scroll",this.isBottom);
},
// 判斷是否到達底部
isBottom:function(){
var _this = this;
var scrollH = null,
clientHeight = null,
scrollTop = null,
h = 0;
scrollH = document.body.scrollHeight||document.documentElement.scrollHeight;
clientHeight = window.innerHeight;
scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
h = clientHeight + scrollTop;
if(h>=scrollH-_this.config.distance){
_this.ajax();
}
},
// 發送AJAX請求
ajax:function(){
var _this = this;
var xhr = new XMLHttpRequest();
var data = null;
xhr.open(this.config.type,this.url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
if(_this.config.dataType==="json"){
data = _this.callback(JSON.parse(xhr.responseText),_this);
}else{
data = _this.callback(xhr.responseText,_this);
}
if(data===false){
window.removeEventListener("scroll",_this.isBottom);
}
_this.addHTML(data,function(){
_this.isBottom();
});
}
}
xhr.send(_this.toFormStr(_this.config.data));
},
addHTML:function(data,callback){
if(!data)return;
if((typeof data)==="string"){
this.element.innerHTML += data;
}else{
this.element.appendChild(data);
}
callback&&callback();
},
toFormStr:function(obj){
var str = "";
for(var k in obj){
str += k + "=" + obj[k] + "&";
}
return str.slice(0,-1);
},
extend:function(obj,obj2){
if(!obj)return obj2;
for(var k in obj2){
obj[k] = obj2[k];
}
return obj;
}
};


文章出處

網上有很多這方面的教程，但不是苦澀難懂就是從哪copy過來的，反正很長一段時間我是沒看懂，時間長了也沒打算去研究了，主要原因是，基本上很少會遇到那些問題（所以說啊，要是沒有研究精神的才懶得管它）。但自從開始研究CSS以后就一發不可收拾，所以打算把CSS一系列的東西都給研究一遍，當然能研究懂自然是好的，不能就當自娛自樂了。話說這個層疊順序和堆棧上下文沒啥用對吧，你看我就是不學它，平時也沒出什么問題。 …… 想讓它出問題也很簡單，不過既然你都說沒用了，也就不打算告訴你了。

本篇屬于短話長說型，前半部分比較簡單，但不看會影響后面你是否有勇氣看下去，建議全看，但如只是想了解一下，可以只看總結部分，但都看你自己。

層疊順序和層疊上下文是兩個概念，但它們又有著密不可分的關系，層疊順序很簡單^_^，認真思考即可，而堆棧上下文更是不值一提，我只需要遷根紅線你就懂了，所有說，都太簡單。第一段說難懂，主要是有了這篇文章，才化解位移。廢話少說，看劍。
在考慮到兩個元素可能重合的情況下，W3C提出了層疊這個概念，層疊是指如何去層疊另一個元素，比如兩個元素重合的時候應該讓誰在前面，誰在后面。那它們的規則又是什么？先來試水。
層疊順序篇
當兩個元素都是塊級元素時，默認情況越后面的元素層級越高
<style>
div{
width:100px;
height:100px;
}
.item1{
color:red;
background-color:pink;
}
.item2{
margin-top:-100px;
background-color:orange;
}
</style>
<div class="item1">item11111</div>
<div class="item2">item22222</div>
可以看到item2把item1給蓋住了，說明越后面的元素層級越高，另外item1的文字還是隱隱約約的可以看到，這說明了背景的層級比文字小。
另外我們可以這樣
<style>
div{
width:100px;
height:100px;
}
.item1{
color:red;
}
.item2{
margin-top:-100px;
}
</style>
<div class="item1">item11111</div>
<div class="item2"></div>
可以看到好像沒有item2這個元素一樣，主要原因是，在沒有設置背景的情況下，元素的背景是透明的(transparent)，并且允許后面的元素透上來。
在這種條件下，你會發現一個很搞笑的事，如下：
<style>
div{
width:100px;
height:100px;
}
.item1{
color:red;
}
.item2{
background-color:orange;
margin-top:-100px;
}
</style>
<div class="item1">我是item2</div>
<div class="item2"></div>
如果不看代碼，就好像這段代碼真的是item2的。
當兩個元素為行內塊時
<style>
div{
display:inline-block;
width:100px;
height:100px;
}
.item1{
background-color:pink;
}
.item2{
background-color:orange;
margin-left:-108px;
}
</style>
<div class="item1">item1111</div>
<div class="item2">item2</div>
也是后一個元素的層級比前一個元素的層級高，不過和兩個塊級元素不同的是行內塊元素的背景層級比文字高。
當兩個元素為行內元素時
<style>
div{
display:inline;
width:100px;
height:100px;
}
.item1{
background-color:pink;
}
.item2{
margin-left:-48px;
background-color:orange;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
和行內塊的行為一樣，背景層級比文字高，并且也是后一個元素比前一個元素層級高。
小總結

當兩個元素為正常流時，默認情況下后一個元素比前一個元素層級高，并且允許后面的元素透上來。

如果兩個元素是塊級元素，文字比背景層級高（因此不管是否設置背景文字始終會透上來）。

如果是行內或行內塊，背景比文字層級高（因此只要設置背景，后一個元素將透不上來）。

當一個元素為塊級元素，另一個為行內塊時
<style>
div{
width:100px;
height:100px;
}
.item1{
display:inline-block;
background-color:pink;
}
.item2{
margin-top:-100px;
background-color:orange;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
行內塊比塊級元素層級高，依然是文字比背景層級高。
如果另外一個元素是行內元素和這個效果也是一樣的，代碼如下：
<style>
div{
width:100px;
height:100px;
}
.item1{
display:inline;
background-color:pink;
}
.item2{
margin-top:-30px;
background-color:orange;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
當一個元素是行內塊另一個是行內元素時
<style>
div{
width:100px;
height:100px;
}
.item1{
display:inline-block;
background-color:pink;
}
.item2{
display:inline;
margin-left:-100px;
background-color:orange;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
行內元素層級比行內塊元素高，背景比文字層級高。
浮動系列

浮動和浮動，后一個比前一個層級高。

浮動和塊元素，浮動層級高。

浮動和行內塊，行內塊層級高。

浮動和行內，行內層級高。

效果如下：
定位系列

絕對定位和絕對定位，后一個比前一個層級高。

絕對定位和相對定位，后一個比前一個層級高。

絕對定位和固定定位，后一個比前一個層級高。

固定定位和相對定位，后一個比前一個層級高。

絕對定位和塊元素，絕對定位層級高。

決定定位和行內塊，絕對定位層級高。

絕對定位和行內元素，絕對定位層級高。

絕對定位和浮動，絕對定位層級高。

其他定位和絕對定位效果一樣。

層疊順序總結

當兩個元素類型一樣時，默認情況下后一個元素層級比前一個元素層級高。

在沒有設置背景的情況下，元素的背景是透明的，并且允許后面的元素透上來。

塊元素和其他任意除定位元素以外，文字層級比背景層級高。

浮動和塊元素，浮動層級高。

浮動和行內塊，行內塊層級高。

浮動和行內，行內層級高。

定位和定位，后一個元素層級高。

定位比所有元素層級高。

它們的前后順序：小于0的z-index < 塊 < 浮動 < 行內塊 < 行內 < 定位 < 大于0的z-index
層疊上下文

如果你認真看完上一節，會不會奇怪一個問題，那就是在無特殊情況下為什么定位元素總是比普通元素層級高，另外一點就是，大部分情況下為什么總是后一個元素比前一個元素層級高，而罪魁禍首就是層疊上下文。

在HTML中有一個三維概念，也就是我們面向電腦屏幕的這一端為Z軸。
而凡是擁有層疊上下文的元素，將離用戶最近，也就是越靠在Z軸前面。默認情況下只有根元素HTML會產生一個層疊上下文，并且元素一旦使用了一些屬性也將會產生一個層疊上下文，如我們常用的定位屬性。如兩個層疊上下文相遇時，總是后一個層疊前一個，除非使用z-index來改變。如下：
<style>
.box1{
width:100px;
height:100px;
background-color:red;
}
.box1 .item{
position:relative;
height:100px;
}
.box2{
margin-top:-50px;
width:100px;
height:100px;
background-color:orange;
}
</style>
<div class="box1">box1
<div class="item"></div>
</div>
<div class="box2">box2</div>
雖然item產生了一個層疊上下文，但并不影響它父元素。它的父元素依然被box2層疊了。另外上面還說只要是產生層疊上下文的元素總是比其他元素層高，如下：
只需要給item加上一個背景即可，上一個案例只所以沒看到item元素是因為背景默認是透明的，并且允許后面的元素透上來。
除了定位元素可以創建層疊上下文以外，還有如下幾個屬性也可以做到。以下來自MDN

根元素 (HTML),

z-index 值不為 "auto"的 絕對/相對定位，

一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小于 1 的元素

transform 屬性值不為 "none"的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設置為 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值

-webkit-overflow-scrolling 屬性被設置 "touch"的元素

這里再拿opacity試水。
代碼如下：
<style>
.box1{
opacity:.9;
width:100px;
height:100px;
background-color:red;
}
.box2{
margin-top:-50px;
width:100px;
height:100px;
background-color:orange;
}
</style>
<div class="box1">opacity</div>
<div class="box2">box2</div>
原本應該是box2層疊box1的，但因為box1創建了一個層疊上下文，所以把box2層疊了。
知道層疊上下文有什么用？

最大的好處就是當你想要改變元素的層級又不想用定位時，你還可以用很多其他的方法。如下：

原本浮動比塊元素層級高，但當使用了opacity之后，塊元素層級比浮動層級高，代碼如下：
<style>
.box1{
float:left;
width:100px;
height:100px;
margin-right:-20px;
background-color:red;
}
.box2{
overflow:hidden;
width:100px;
height:100px;
background-color:orange;
opacity:.99;
}
</style>
<div class="box1">float</div>
<div class="box2">opacity</div>
總結

創建了層疊上下文的元素比其他元素層級高。

兩個層疊上下文相遇時，后一個層級高。如果想改變層級可以使用z-index

文章出處
距上篇前端這條路，我們該何去何從發布已有將近兩個月時間，寫那篇文章時我是很糾結的，因為一個月就要過去了，但我的工作卻一直沒有著落，想起剛來北京時，那段時間除了學習什么也不想，也沒有煩惱只想一心的學，現在想想那時真好，有幾個年齡比我大的朋友很是羨慕，因為他們總有很多煩心的事，而那時我是體會不到的，對于一個剛踏上社會的人來說，但也正是因為那時什么都不想只想學好前端，所有那時進步很快，但也走了不少彎路，這都是后話了。
本來不想把自己真實的事寫出來，但想想也不是見不得人的事情，而那也是一個成長的過程，幾年后說不定還是一個不錯的紀念，本文不會按照特定的順序來寫，想到哪寫哪，希望本文能給你帶來幫助。
那是我離開上一個公司的半個月里，那段時間里每天早上一起來就看個大網站投的簡歷，一開始是在智聯，51job，后來發現這些網站在一兩個月前就徹底埋沒了，因為投了將近2000多份，竟然只有幾個打電話的，后來索性都在拉勾上投了，雖然成功率也不高，但真實性稍微還好點。
那段時間每天都是是在希望和絕望中度過，一個月對我來說太長，但好的是自己還懂得時間的珍貴，雖然沒有面試，但也得學習啊，于是把JS的面向對象等東西重新研究了一下，也是在那一個月里面把面向對象拿下的。雖然精通說不上，但至少自己在實際開發中知道如何運用了。有一句話真的不可不信，“沒有什么是拿不下的，只是看你愿意不愿意花時間”。
離開上一家公司的理由想起來就可笑，因為公司是個創業型的，我剛去時，公司只有幾個人，而里面的幾個技術屬于兼職，因為他們在百度，淘寶等公司上班，而公司也還處于創業初期，老板也和他們是朋友，總之讓他們離職是不太可能。另外因為他們不再北京這邊，所以平時上班也就我和老板兩個人。一開始也沒想多，反正干好自己的工作就行了，在那公司還挺忙的，因為公司的項目網站需要整體改版，很多得重新寫，公司用的是Angularjs，雖然我也用過一些，但之前也沒有實際用它開發過，另外因為之前對改版并不熟悉，以至于當時連HTML都不知道怎么寫了。別笑，這是大實話，在一個別人寫好的頁面中去改東西，可不是那么簡單的，而且還沒有幾條注釋的情況下。于是只好請教公司里面的大牛了，他遠程試著寫了一段給我看，過了幾天感覺好多了，可以自己寫了，但時不時的也還是有些問題，有時請教他，有時通過搜索引擎。
一過就是半個月，對公司的開發流程也大多熟悉了，后來感覺公司開發速度太慢了，因為其他幾個后端技術都不在北京，而且還在其他公司上班，當有需求時，總得好長時間才回復過來，所有我覺得太浪費時間了，這也是導致我離職的重要原因，另外一點就是感覺在這公司不踏實，因為老板把太多心思發在技術上了，而我認為最重要的是怎么推廣，后來和朋友一起去吃飯時也談到這個話題，為什么說是推廣呢？要是你產品夠好，別人也不會太在乎你網站界面，除非特別丑的那種，另外一點就是創業公司，沒事老改版也解決不了流量的問題，當然作為一個技術人員說這些都是多余的，這里不是我對技術有偏見，而是我覺得一個老板掌握著公司的生死，他應該把更多的時間花在正確的事情上。當然老板有些方面我還是很認同的，記得剛去公司時，我問他公司為什么不自己弄一個網站，而放在微信公眾平臺里面。他說你一個新站點能有多少流量，你還得自己推廣，吃力不討好的事，放在公眾平臺里面大家都有微信推廣也方便，人流量也大，何必做一些沒有意義的事呢。這句話我很是贊同，以前我一直想自己弄個，個人博客，但發現根本沒多少人來，因為是新站點，更何況也沒幾個人認識，又有誰會去搜索呢，所有后來索性不自己建博客了，干脆用第三方平臺，也不需要自己去推廣，安心寫自己的東西。因為他的這句話，我很是看好公司，但后來發現始終沒有像他說的那樣。他還有一句話我也很喜歡，他說一個人要想在團隊里面值得大家的信賴，那什么是值得信賴，當有問題時，說出問題，但這還不夠，知道問題的人很多，所以你得有個解決方案，如果是做的更好點的，不但說出問題還自己解決問題，這才是值得團隊的信賴。
在離職的前一天，一個技術（當時是我師父）找我說，為什么想離職，是公司的問題，還是說找到更好的了，如果說是因為公司的一些問題而逃避，那到下一家，你就能解決嗎？不管你到哪都會遇到這些問題，遇到一點挫折很正常，但也不能一直逃避。
那些天我想了很多，當時離職的原因可能就是因為覺得公司沒有發展前景，絕望了吧，另外一點就是覺得和其他后端配合太麻煩，還有一點就是感覺老板發不起工資了.但后來確實發了工資，可能想多了吧，其實不想的時候還好，不知道是從哪天開始有離職的想法的，我只知道一旦有了這個想法，它就像魔鬼一樣，難以逃脫。
雖然在公司每天都忙的不可開交，但除了前面幾天有學到一點東西以外，基本上每天都是重復著之前的工作，后來才知道，想要提高技術不只是每天寫代碼就可以解決的，更多的是思考，這都是后話。
講講當時的幾次面試，一開始面試很虛，因為覺得自己技術不是太好，但面試次數多了以后也就沒感覺了，有些公司需要筆試，有些公司直接面試，大部分筆試的公司一般都是小公司，筆試寫的感覺很不爽，不是因為難，而是大部分單詞忘了怎么寫，我認為筆試很難看出一個人的水平，而且要是在一個屋子里，別人還可以通過手機搜索答案（對于一些公司的筆試題都是網上扒下來的），我認為直接面談比較合適，其實想看出別人是不是有工作經驗很簡單，隨便問幾個實際項目中可能出現的問題，就可以難倒一大片了。大部分公司是先人事面，主要問一些你的一些經歷什么的，在上一家公司干了什么之類的，最惱火的是有些公司根本不問技術。后來發現找工作，大部分都是靠運氣，那么工資呢？就看你膽子有多大了，前幾天和朋友出來吃飯時，說到這個問題，他說之前他的一個朋友去新浪，當時實習期要了好像是19K，在實習期過后，他的上司問他當時為什么只要了19K，他的上司說他是他那部門要的最少的。他要19K也是心虛，覺得要的夠高了，但除了第一次開口談工資后，將來想升就不是那么簡單了。所有說工資的高低大部分看你自己敢要多少，可能你會說面試的時候我工資是要的高啊，但沒人要啊，關鍵你的底氣就在那，誰看不出來呢，另外就是你投的公司他本身覺得技術人員不值那個價錢（很多創業老板就有那種想法）。這個得看你運氣了，另外一點就是你技術比較好，而且是本科畢業之類的，或者里面有認識的人，讓人內推。不然就算你技術厲害，誰知道你技術真好還是假好，你得讓人知道啊，如果你是后者建議您開始寫博客吧，把自己技術分享出去，擴大知名度，至少將來成大牛了，還有人知道，不然你找別人說，我技術很厲害招了我吧，誰理你啊。
你可能會說學歷不代表技術，是不代表技術，但至少說明人家以前比你努力，雖然說我也何嘗不是這樣想，因為我也沒啥學歷，但知道曾經犯下的錯，始終是得還的，另外一點就是你無法改變這個事實，我們只能靠現在的每天去彌補，相信有一天，它不會再是你的一道坎。
對于找公司，談談我的體會，首先你想長期在公司待下去還是只是說去混個經驗，如果只是混個流程什么的，就不要太在乎公司的發展什么的，因為和你沒有任何關系。還有一點我認為最重要，就是看你對這個公司是否有興趣，如果都覺得沒意思，干的不爽，那就算公司前景再好，也是空一場。自己覺得有意思，做起事來也有干勁。其實對于很多人來說公司的發展真的不重要，大部分人離職率還是很高的，反正自己綜合考慮吧。
對于大公司還是小公司，以前我沒有經驗沒法說，但現在也是多少有那么一些的，雖然沒去過大公司，但沒見過豬跑還沒吃過豬肉嗎，從全面的角度上來講肯定是小公司比較合適，如果從專業的角度來說那肯定是大公司，那究竟是大公司能學到東西還是小公司能學到東西，這就不一定了，如果你是一個愛學習的人，不管到哪都能學到東西，但對于大部分人來說，其實這個根本不需要考慮，首先你得進的了大公司啊，在你既沒有能力也沒有學歷的情況下還是別想那么多了，另外一點就是別想著去了哪個公司就能學到技術，這個真不一定，千萬不要有這種心態，如果說你一直找不到一個好的公司呢？那就從此墮落了？想學還得靠自己，我現在這個公司還不是很清閑，那又怎么樣呢，我還不是學到了很多，所有說啊別指望公司了，自己的路自己把握。當然如果能去大公司建議還是去大公司吧，不是說小公司不好，而是大公司對技術的要求高，因此有些東西你得做的比較好，另外一點就是技術氣氛好點，氣氛這東西是很有用的，在大公司的缺點就是你對項目的整體可能不是特別清楚，個人感覺吧，也不多說，畢竟自己沒去過，那小公司呢，可能就是個個方面都會了解一些吧，那到底去選擇哪個？坦然說不管去哪，只要你自己覺得值那就行了，至于在哪能學到東西，這的看你自己，你想學在哪都能學，另外一點不是你在公司做的項目多就一定能成大牛，做的項目多，最多就是你發現的問題比別人多一些罷了，發現問題雖然很重要，但最終目的是要解決問題的。還有你真想靠著公司那點項目提升自己啊，勸你打消這個念頭，一個項目做下來能發現幾個問題？后面的項目都是同一套東西吧？所有說光指望這個是不行的，平時還是自己多研究多思考，才能走的更快。
公司沒什么事是否要接單？之前我也有想過這個問題，但實際上是不值得的，有那個時間多去提升一下自己技術水平不好嗎，難道接單就不能提升嗎，不是說不可以，而是那樣太慢了，一個項目下來就有你受的，左改右改，老板要是不懂技術，你還得誒個解釋，白花花的時間就過去了。另外一點呢就是有時間也不一定得看技術方面的，我們還有很多得學習的，畢竟我們不是一輩子程序員啊，以后怎么樣誰說的定呢，程序只是我們的一部分，有時間多看看關于生活方面的，提升一下自己，或者有空多出去爬爬山啥的，擴充一下自己的視野。多為以后想想吧，20年以后你還是程序員嗎？我不知道，或許早已離去吧，又或者堅挺著，但那時回過頭來想想或許又是另外一回事。
講了這么多，說一下我的最近狀況吧，因為公司比較清閑，所以有很多時間去思考問題，這段時間主要在研究CSS，話說國內研究CSS比較少，從我發布博客的文章就可以看出來，關于CSS的文章明顯比別的瀏覽量少，我想應該是都在研究JS和各種框架吧。如果你看過我博客可以發現在之前很長一段時間里，都是關于JS的，而CSS的文章卻寥寥無幾，主要那時我覺得CSS太簡單，而且沒有研究也可以寫，但直到最近才發現自己錯了，因為我發現項目的大部分時間都是在寫CSS，JS反而比較少，如果自己對CSS再熟悉一點，是不是開發效率就更高了，所以就打算花一段時間徹底的研究一下CSS，在研究的這段時間里面收獲很大，并且把很多研究出來的用來了項目中，確實減少了很多開發時間，代碼也更加規范，從這以后我懂了，不是工作的時間長技術就越好，往往很多人一種技術用了半輩子。說到工作經驗，不得不提，我最近思考的一個想法，那就是為什么工作經驗很重要？因為工作時間時間長的人碰到的問題也多，自然解決的思路也更多。首先分為兩點，一點就是他們碰到的問題多，第二知道的東西也多。我想這就是工作經驗的大部分吧。那么如果我平時就去了解很多開發中的問題，以及解決他們，那么不就可以說是我用一年時間完成了別人的兩年甚至三年，理論確實是這樣的。只不過剩下的是堅持罷了。
對于新手來說，還有一個最大的問題是雖然看過了很多教程，但在項目中該怎么寫還是怎么寫，早把那些教程上的東西拋到腦后了，導致這個問題的原因可能就是你只是學了一點皮毛，只是看了一下語法，和相關介紹，而沒有研究他們的實際運用場景，這也是工作經驗帶來的，但如果你是個愛研究的人，絕大部分這和工作經驗沒有半毛錢關系，因為事先你就知道它可以在什么地方用了。另外一點就是，別人的東西再好，到了你手上也只剩下3/1了，人本來就是不喜歡別人講授的，更喜歡自己琢磨出來的。
還有一點就是你會發現，每天都在學習，然后前面的很快就忘了，這也屬于正常現象，你可能會說，那學習還有意義嗎？肯定是有意義的，你會發現雖然我們忘記了一部分，而一些重要的核心的總是記下來了，而一些無關緊要的，比如單詞這些都忘了，但依然不影響我們編程，或許這是大腦的機制，我們不去探討。不過我想說的是每天的學習是很有必要的，雖然每天都在遺忘，甚至我已經忘了前面寫的是什么，但那不重要，我只要知道此刻在做什么。
對于框架的學習暫時不做打算，我的計劃是先把CSS基礎打扎實，然后把JS重新過一遍，當然這次的重新不會是一筆帶過，而是對它們做深入的理解，直到自己覺得沒有問題了，接著看一些框架和庫，然后自己模仿著寫寫，平時關注一下最新的動態。
基礎是一切，它決定著你未來是否可以在這個行業待下去，前端變化很大，北京現在前端找工作已經比較難了。一切順其自然吧，本來每個行業就是這樣的，從缺到多，然后到專，沒有哪個行業可以擺脫這個自然定律。
以前還看好搜索引擎，現在感覺它越來越不重要了，很多人上網都是到特定的網站上，比如一說網上購物，你可能想到的就是淘寶，JD。我想互聯網會越來越專業化，甚至我都懷疑淘寶還能堅持多少年，因為將來必定是追求品質的，看看那些曾經走過來的，從社區，到微博，再到微信，以后會怎樣誰知道呢，但我相信會越來越專業化。
說說項目架構方面的事，如果是一個新項目，另外你是一個新手的話，結構目錄最好參考一下一些大牛的，網上可以搜索到，這個非常重要，如果目錄有問題，將來改版會有你受的，另外很多新手會覺得類似面向對象之類的，不但感覺麻煩而且也沒省多少事，其實倒真不是說它有多方便，而是防止在你出錯了的時候少改一點代碼，而且人也是很懶的，我想很多代碼都是臨時補起來的吧，這種會有很大的后果，那就是以后項目有改動，你就得改非常多的地方，另外千萬別瞎寫公共代碼，不然你想改都不敢改，這里面牽扯到多少頁面，你是無法確定的，所以很多代碼都會爛在那。想扔，扔不了，如果這個頁面是你上一個同事寫的，那這種情況會更糟糕，甚至我覺得大部分互聯網公司都存在這種問題，而且很難解決，除非重新寫。
很多人說前端這么多東西，看著就頭疼該怎么學啊，對于這種問題，我只想問你一句話，你是想在前端待下去還是選擇其他，如果選擇待下去那就啥都別說，要么離開前端，就像你又想和她在一起，又要在乎她的缺點，有意思嗎？要么和她在一起，要么和她分手，哪有那么多廢話。
這篇文章不會再更新了，因為我覺得這篇文章已經說出了它的所有，沒有更好的了，幾年后再回過頭來看這篇文章或許又會是另一種感覺吧，生活還在繼續，我也該繼續走我的路，到這就結束了，如果對你有幫助請分享給你的好朋友，謝謝。忘了說了，最近可能出一本關于CSS的書籍，也有可能會開源，如果你感興趣可以關注一下本人博客。

文章出處

最近又有些天沒寫博客了，主要寫一篇下來，太浪費時間了，其實這不是根本，根本是最近比較忙，忙什么呢？最近發現一個問題覺得學習速度太慢了，時間倒是花的很多，但大部分時間都花在無意義的事情上，所有打算改變政策，目前已經整理出一套規范，正在測試中，好了不扯那么多，看正題。

為什么要寫篇呢，主要是因為之前覺得自己已經理解了nth-of-type但后來發現好像和自己之前理解的不太一樣，于是打算寫下來。
nth-child倒很好理解就是選擇第幾個，代碼如下：
<style>
p:nth-child(2),p:nth-child(7){
color:red;
}
</style>
<h1>標題</h1>
<p>這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span>這是span</span>
<span>這是span</span>
<p>這是鍛若</p>
效果如下：
可以看出nth-child是根據元素的個數來計算的，盡管我們在:nth-child前面加了p。這個沒啥好說的，但nth-of-type要是不研究一下還真容易理解錯，它說的是按照類型來選擇，看下面這個例子。
<style>
p:nth-of-type(1),p:nth-of-type(3){
color:red;
}
</style>
<h1>標題</h1>
<p>這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span>這是span</span>
<span>這是span</span>
<p>這是鍛若</p>
效果如下：
這個也不難理解就是按照類型來計算，碰到一個同類型就加1，那你肯定會說既然如此那有什么好說的，關鍵如果像下面這樣呢，如下：
.item:nth-of-type{color:red}
這種情況又是怎么個案類型法？所以今天主要是探討這個問題。
<style>
.item:nth-of-type(3){
color:red;
}
</style>
<h1>標題</h1>
<p class="item">這是鍛若</p>
<p>這是鍛若</p>
<span>這是span</span>
<span class="item">這是span</span>
<span class="item">這是span</span>
<p class="item">這是鍛若</p>
<p class="item">這是鍛若</p>
<p class="item">這是鍛若</p>
效果如下：
可以看到這里是選中了兩個的，不同類型會被當作多類，只要符合選擇器規范都會選中，額，好像有點簡單哈，主要是這個例子寫的太好了。就這樣。還是總結一下吧。
總結

nth-child
按照個數來算。

nth-of-type
按照類型來計算，如果是class那么碰到不同類型的，單獨一類，符合條件的選中。

文章出處
沖沖火火，改來改去花了一天左右時間，最終能這樣還算滿意，下面這張圖是一開始的想法。
果然夠丑，原本的想法是將導航欄放到右邊，但發現結構不太好改，雖然現在已經知道怎么弄了。來看最終效果
官方的導航條我覺得用戶體驗太差了，如下：
這個導航條都是什么跟什么啊，于是導航條的改版也是重點對象，至于怎么改的，自有妙計。還有右邊的列表太丑了，也得改，我覺得最難受的就是列表，找起東西來太麻煩了，于是為了干凈整潔，列表的第一篇或者置頂的文章給顯示摘要，其他的只顯示標題，還有內容頁的評論也得改，嚴重的用戶體驗太不好了，如下：
評論框應該放在評論列表的上面才對，不然用戶還得拉到最下面。接下來講一些細節。
在沒有改版之前是這樣的：
首先想改版得到博客后臺修改一些東西，如下：
把“禁用模板默認CSS”勾上，這樣就不會影響我們寫的樣式。接下來重點了我們會發現我們的導航長這樣
如果想調整這個樣式，打開瀏覽器的審查元素，如下：
既然我們知道了它的結構和ID以及Class，那就好辦了，在審查元素上調唄，如下
調好了就可以把這些樣式復制到這里面，如下
然后點保存，就OK了，當然這還只是剛剛開始，又如如首頁列表的第一條顯示詳情和內容，我們只需要這樣。
找到對應的結構，把它們隱藏。實際上這些都還好辦，但如果碰到結構復制的，就需要動點腦筋了，還是說導航條吧，你會發現官方根本沒有提供給我們修改導航列表的地方，于是來想來想去也就只有JS能夠勝任這項工作了。于是我打算重寫列表項，將原有的內容給替換掉，代碼如下：
(function(){
var navList = document.getElementById('navList');
var navListStr = '';
var navListTitle = [
{
'title':'首頁',
'href':'http://www.cnblogs.com/pssp/'
},
{
'title':'CSS指南',
'href':'http://www.cnblogs.com/pssp/category/788821.html'
},
{
'title':'HTML5',
'href':'http://www.cnblogs.com/pssp/category/792058.html'
},
{
'title':'Javascript',
'href':'http://www.cnblogs.com/pssp/category/786428.html'
},
{
'title':'學會生活',
'href':'http://www.cnblogs.com/pssp/category/786458.html'
},
{
'title':'我有話說',
'href':'http://www.cnblogs.com/pssp/p/5995901.html'
}
];
for(var i=0;i<6;i+=1){
navListStr += '<li><a href="'+ navListTitle[i].href +'" title="' + navListTitle[i].title + '">' + navListTitle[i].title + '</a></li>';
}
navList.innerHTML = navListStr;
}())
這樣就完美了，里面的鏈接就是這個
反正自己也是瞎想出來的，不過默認博客園是不允許你使用JS的，所有還得申請，具體看這個
如果沒有這個，你就得申請一下。其他地方的修改和這個也差不多，不能使用的就用JS來操作，其他地方有什么不懂的可以留言哈。