如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
XML 不是 HTML 的替代。
XML 和 HTML 為不同的目的而設計：
HTML 旨在顯示信息，而 XML 旨在傳輸信息
xml的用途:
XML 簡化數據共享
XML 簡化數據傳輸
<?xml version="1.0" encoding="UTF-8"?> 聲明
以及根元素 子元素 以及定義根元素結尾
如例
聲明
<?xml version="1.0" encoding="UTF-8"?>
根元素
<note>
子元素
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
定義根元素結尾
命名的規范
在 Windows 應用程序中，換行通常以一對字符來存儲：回車符（CR）和換行符（LF）。
在 Unix 和 Mac OSX 中，使用 LF 來存儲新行。
在舊的 Mac 系統中，使用 CR 來存儲新行。
XML 以 LF 存儲換行。
什么是xml, xml有什么作用？
XML 是獨立于軟件和硬件的信息傳輸工具
XML 和 HTML 之間的差異
XML 把數據從 HTML 分離
XML 簡化平臺變更
XML 使您的數據更有用
XML 用于創建新的互聯網語言
所有的 XML 元素都必須有一個關閉標簽
XML 標簽對大小寫敏感、
XML 必須正確嵌套
XML 屬性值必須加引號
實體引用
XML 以 LF 存儲換行
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
下載地址：https://v3.bootcss.com/
1. 下載Bootstrap
進入后下載這個標題的Bootstrap
下載完成后，將所需的css,js復制到工程中即可
2. 拷貝官方的模塊文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 頁面添加組件
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后將二者結合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的結果如下：
Left Middle Right
至此你就可以簡單的用前端框架做出美觀的界面了！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
彈性布局（Flexbox）確實為我們構建復雜、靈活的布局帶來了很大的便利，但是它的兼容性確實讓人很頭痛，下面是我遇到的一個問題：
理想效果：
IE11效果：
html大概結構：
這里大致說一下css，input-container寬高沒設死，由input決定，并設置position: relative;相對定位，并采用display: flex;彈性布局。tooltip設置絕對定位，通過top調整垂直位置，由input-container的彈性布局屬性設置水平居中（是不是覺得我很作死，為什么不直接用絕對定位就把垂直水平都搞定了。哈哈，一切源于一顆裝B+傻B的心，不過，能實際體會一下flexbox帶來的問題，我覺得也挺好的）。
結果在chrome下正常，IE11下就成上圖那樣了，我上MDN Web看了一下，說彈性布局是支持IE11的（下圖），但是從上圖來看，IE下垂直方向是對的，但是水平方向卻不對，說明flexbox還是沒被支持，我也嘗試著添加了各種前綴，還是不行。
[html] view plain copy
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
浮動是什么？
浮動元素會脫離文檔流進行左浮或者右浮，直到碰到父級元素或者其他的浮動元素。
為什么清除浮動：浮動會導致父元素高度坍塌，因為浮動脫離文檔流，浮動以后不占文檔流的位置，撐開的父元素高度肯定會坍塌。
清除浮動的八種方法：
1、父級div給出固定的高度。手動定義height，這樣就解決了父級元素獲取不到高度的問題。
優點：代碼量少，簡單容易掌握。
缺點：只適合高度固定的布局，如果高度和父級div不同會出現問題。
2、overflow，設置overflow：hidden。
優點：代碼少，瀏覽器支持。
缺點：會把超出的部分隱藏起來，而且不能配合position使用
3、額外標簽，添加一個新的標簽，如div，或者br，并且設置標簽的屬性clear：both；清除浮動，讓父級能自動獲得高度。
優點：代碼少，瀏覽器支持，不會各種問題。
缺點：會有很多空的div或者br。
4、使用單偽類after和zoom，使用方法：
.clearfloat:after{
content:"";//設置內容為空
height:0;//高度為0
line-height:0;//行高為0
display:block;//將文本轉為塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
}
.clearfloat{
zoom:1;為了兼容IE
}
優點：瀏覽器支持好，大型的瀏覽器都在使用，建議使用。
缺點：代碼多，需要after和zoom都要使用才能兼容主流的瀏覽器。
5、雙偽類清除浮動。使用方法：
.clearfloat:before,.clearfloatafter {
content: "";
display: block;
clear: both;
}
.clearfloat {
zoom: 1;
}
缺點：不嚴謹不建議使用
6、父級div跟著浮動，所有代碼一起浮動就會形成一個整體，
缺點：會產生新的問題，不建議使用。
7、父級定義display：table；將div屬性變成的表格。
缺點：產生新的問題，而且影響布局。
8、overflow：auto；需要設置width，不設置height，瀏覽器會自動檢測浮動區的高度。
缺點：容易生成滾動條。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.vue的生命周期，主要的介紹官網（https://cn.vuejs.org/v2/api/）上都有。
主要說的是created和mounted。之前在寫項目的過程中，需要對DOM節點進行操作（但是在vue里面盡量不要獲取節點進行操作。vue主要是對數據進行操作），在created里面這些操作并不能實現，但是在mounted里面是可以的。
主要原因就是：created是vm實例已經創建但是未完成掛載，而mounted已經部分完成掛載，這么說的原因是，mounted不承諾所有的子組件都會被掛載，如果你希望等到的是整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉mounted.
$nextTick是下次DOM更新循環結束之后執行的回調函數。
2.vue里點擊按鈕，彈框的實現。
通過在父組件上綁定一個show，type為boolean，在子組件用props接收傳過來的show值，show值為true時彈出框顯示，false時不顯示。
父組件：
子組件：
3.v-show與v-if的區別？
v-if與v-show都屬于條件渲染，意思就是根據不同的條件使用不同的模板。
在vue中，v-show只是簡單的修改了樣式，DOM節點是真實存在的，只是隱藏了。
v-if是真實的條件渲染，值為false是不編譯不渲染，當值為true時，才開始編譯。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
下載地址：https://v3.bootcss.com/
1. 下載Bootstrap
進入后下載這個標題的Bootstrap
下載完成后，將所需的css,js復制到工程中即可
2. 拷貝官方的模塊文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 頁面添加組件
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后將二者結合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的結果如下：
Left Middle Right
至此你就可以簡單的用前端框架做出美觀的界面了！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
摘要： LINK[rel=import]其實有點類似于IFRAME，它引用的對象也是一個完整的文檔，而不是文檔片段，而且里面的SCRIPT也會執行，對跨域的資源訪問同樣有同源策略的限制
首先制作一個頭部文件head.asp，或者一個底部文件foot.asp。如主頁是index.asp，調用頭部代碼是在index.asp文件代碼的開始位置（第一個標記后面，
以前人們常常使用靜態frame框架來做首尾(一般不是iframe)?，F在越來越少見了。主要因為設計網頁相對比較困難，而且還增加了連接數,占用線程較多，速度慢，而且也不利于搜索引擎的對頭尾的收錄
建立一個head.js的文件，找一個html轉js的網站，然后把你頭部的html代碼轉化成js代碼，并放在head.js文件里面。然后在需要調用head文件代碼的地方添加
這個地方src="js/head.js"的路徑是你head.js文件的路徑
以后無論在哪個頁面，想調用該頭部文件，直接插入head.js文件即可
這種方式的優點是方便，便于修改。缺點是由于搜索引擎讀不懂javascript文件，頭部文件和尾部文件搜索引擎無法收錄，而且js文件過大會加重訪問者的瀏覽器負擔，影響訪問速度
最好能有一種方法，就像asp頁面包含其他頁面時那樣，用一小段包含語句就可以實現，不要將需要包含的內容出現在本頁面內，而是分割出去到另外一個自己的頁面
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
asp語言和PHP語言
使用框架來實現
使用.js腳本來實現
Behavior的download方式
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天寫css時發現，圖片加起來剛好是900px的三張圖片，不能在一個900px寬容器放下，因為圖片之間有間隔，我猜是瀏覽器把兩個img標簽之間的空格當成了空白節點。
在網上找到了幾個不錯的解決方法：
1.多個img標簽寫在一行
效果前：
效果后：
2.在img標簽的父級上寫：font-size:0;//這個在解決display：inline-block出現的問題也有幫助
效果：
3.使用display：block(img是內聯元素)//要float一下才行
效果:
4.使用letter-spacing屬性
效果:
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<div style="font-size:0"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>
<div style="letter-spacing:-800px"><!--letter-spacing的值無論是負多少都不會產生重疊--> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>
藍藍設計的小編 http://www.syprn.cn
