一、你能學到什么？
①如何使用css變量 ②實現圣杯布局和雙飛翼的簡單思路 ③了解浮動和margin的特性
css變量設置(兩個布局都有的部分)
:root{
/ 左邊欄寬度 /
--lw:300px;
/負左邊欄寬度/
--lwf:-300px;
/ 右邊欄寬度 /
--rw:400px;
/負左邊欄寬度/
--rwf:-400px;
/ 高度 /
--height:300px;
}
二、圣杯布局的html和css代碼
html部分
<div class="holyGrail">
<div class="hg_main">main</div>
<div class="hg_left">left</div>
<div class="hg_right">right</div>
</div>
css 實現對應的四個class
.holyGrail {
height: var(--height);
/ 留出左右兩欄的布局 為了字體不被覆蓋/
padding-left: var(--lw);
padding-right: var(--rw);
}
.hg_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.hg_left{
position: relative;
left: var(--lwf);
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.hg_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
height: var(--height);
background-color: brown;
}
三、雙飛翼布局的html和css代碼
html部分
<div class="doubleWing">
<div class="dw_main">
<div class="dw_con">main</div>
</div>
<div class="dw_left">left</div>
<div class="dw_right">right</div>
</div>
css 實現對應的五個class
.doubleWing{
padding-right: var(--rw);
}
.dw_left{
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.dw_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
background-color: brown;
height: var(--height);
}
四、學會兩個布局的注意點
圣杯布局
在最外邊的類（holyGrail）左右要留出左欄和右欄的寬度（使用padding-left，padding-right)
中間的div.hg_main放在最上面，優先渲染，中間div自適應，width為100%
左中右欄的div都設置浮動，左欄通過margin-left:-100%移動到和中間的div同一起點，然后通過position: relative;
left: -（左欄的寬度）；會移動到最外層div的左內邊距的區域（中間div的左邊）
右欄可以通過margin-right:-(右欄的寬度)；移動到最外層div的右內邊距的區域（中間div的右邊）
雙飛翼布局
在中欄的div再加一個div,設置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動
最外層的div可以不用預留左欄的位置了
五、兩個布局的對比的優缺點
布局 優點 缺點
圣杯 無多余dom 當中間的寬度小于左右的寬度時，結構混亂
雙飛翼 可以支持各種寬度，通用性強較強 需要多加一層dom
代碼下載地址
記得一定要自己去實現一下
javascript中window.open()與window.location.href的區別
window.open(‘index.html’) 表示新增一個窗口打開 index.html 這個頁面，并不刷新
location.href(‘index.html’) 表示在當前窗口重定向到新頁面，打開并刷新 index.html 這個頁面
window.location 是 window 對象的屬性，用來替換當前頁，也就是重新定位當前頁
而window.open 是 window 對象的方法，是用來打開一個新窗口的函數
// 打開新頁面
// 注意：有些瀏覽器的安全設置會將window.open()屏蔽，例如避免彈出廣告窗
window.open('./index.html');
// 在原窗口打開新頁面
window.location.href＝"./index.html";
window.open()詳解
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
參數解釋： 三個參數
window.open 彈出新窗口的命令；
‘page.html’ 彈出窗口的文件名；
‘newPage’ 彈出窗口的名字（不是文件名），非必須，可用空’'代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar=no 是否顯示菜單欄，yes為顯示；
scrollbars=no 是否顯示滾動欄，yes為顯示；
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
常用的js返回與刷新頁面
在此用a標簽舉例
<a href="javascript: history.back(-1)">返回上一頁</a>
<a href="javascript:history.go(-1)">返回上一頁</a>
<a href="javascript:history.go(-2)">返回前兩頁</a>
<a href="javascript:location.reload()">刷新當前頁面</a>
<a href="javascript:" onclick="self.location=document.referrer;">返回上一頁并刷新</a>
js
// 刷新當前頁面
window.location.Reload();
self.location.reload();
window.location.href = window.location.href;
彈性布局（Flex）
隨著移動互聯網的發展，對于網頁布局來說要求越來越高，而傳統的布局方案對于實現特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。
下面是一些彈性布局的基本語法：
兩部分：
目錄
介紹
目錄
介紹
學習vue-router做的一些總結筆記，內容會持續更新！
目錄
1、HTML和JS中使用router
2、動態路由
3、嵌套路由
4、編程式導航
5、命名路由、命名視圖
6、重定向、別名
7、路由組件傳參
8、導航守衛
9、路由元信息
10、過度動效
11、數據獲取
12、滾動條位置
使用 vue-cli 創建 vue 項目：
cd 到指定的目錄下 命令行輸入：
vue init webpack-simple <項目名稱>
根據提示設置Project name
設置Project description
設置Author
設置License
設置Use sass?
cd到剛剛創建的項目名稱目錄
命令行輸入：npm install
等待安裝完成后 執行 npm run dev 命令
注：以下部分練習是在https://jsfiddle.net 中進行
創建組件：（創建全局組件）
Html 部分：
<div id="app">
<div>練習</div>
<!-- 這里的 inline-template 取代組件函數中的 template:'' -->
<my-cmp inline-template>
<p>{{ status }}</p>
</my-cmp>
<hr>
<my-cmp inline-template>
<p>第二次使用{{ status }}</p>
</my-cmp>
</div>
Js 部分：
Vue.component('my-cmp',{
data: function () {
return {
status:'Critical'
}
},
methods: {}
});
var vm = new Vue({
el: "#app"
})
如果將data提取成公共的部分，則多次使用同一個組件則這部分數據在內存中使用的是同一塊存儲 如下演示：
html部分：
<div id="app">
<div>練習</div>
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
Js 部分
var data = {status:'Critical'};
Vue.component('my-cmp',{
data: function () {
return data
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
});
var vm = new Vue({
el: "#app"
})
上面的js代碼當點擊按鈕的時候兩個組件引用的數據均會發生變化
局部注冊組件：
html部分：
<div id="app">
<div>局部注冊組件練習</div>
<local-cmp></local-cmp>
<hr>
<local-cmp></local-cmp>
</div>
Js 部分：
var cmp = {
data: function () {
return {
status:'Critical'
}
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
};
var vm = new Vue({
el: "#app",
components:{'local-cmp':cmp}
})
環境搭建
首先在微信公眾平臺注冊一個我們自己的賬號：
根據注冊提示完成注冊
閑著沒事兒寫了個小 demo ，獲取手機上已安裝應用信息，系統應用和 非系統應用
MD5 SHA1 SHA256 簽名信息 點擊簽名信息可復制到剪切板，
GitHub：https://github.com/sunan-n/GetAppInfo
如下圖：
<span style="white-space:pre;"> </span>主要就是這個方法，傳參數進來獲取相應的簽名類型 信息<br />
public static String getSignaturesInfo(Context context, String packageName, String tpye) {<br />
// //獲取包管理器<br />
PackageManager pm = context.getPackageManager();<br />
//返回包括在包中的簽名信息<br />
int flags = PackageManager.GET_SIGNATURES;<br />
PackageInfo packageInfo = null;<br />
try {<br />
//獲得包的所有內容信息類<br />
packageInfo = pm.getPackageInfo(packageName, flags);<br />
} catch (PackageManager.NameNotFoundException e) {<br />
e.printStackTrace();<br />
}<br />
//簽名信息<br />
Signature[] signatures = packageInfo.signatures;<br />
byte[] cert = signatures[0].toByteArray();<br />
//將簽名轉換為字節數組流<br />
InputStream input = new ByteArrayInputStream(cert);<br />
//證書工廠類，這個類實現了出廠合格證算法的功能<br />
CertificateFactory cf = null;<br />
try {<br />
cf = CertificateFactory.getInstance("X509");<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
//X509證書，X.509是一種非常通用的證書格式<br />
X509Certificate c = null;<br />
try {<br />
c = (X509Certificate) cf.generateCertificate(input);<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
String hexString = null;<br />
try {<br />
//加密算法的類，這里的參數可以使MD4,MD5等加密算法<br />
// MessageDigest md = MessageDigest.getInstance("SHA1");<br />
MessageDigest md = MessageDigest.getInstance(tpye);<br />
//獲得公鑰<br />
byte[] publicKey = md.digest(c.getEncoded());<br />
//字節到十六進制的格式轉換<br />
hexString = byte2HexFormatted(publicKey);<br />
} catch (NoSuchAlgorithmException e1) {<br />
e1.printStackTrace();<br />
} catch (CertificateEncodingException e) {<br />
e.printStackTrace();<br />
}<br />
return hexString;<br />
}<br />
<br />1.集成高德地圖發布版和調試版的sha獲取的問題
調試版，進入 ~/.android
執行
keytool -list -v -keystore debug.keystore
可以獲得sha
2.發布版的sha獲取需要找到發布版的key文件，例如
/Users/aboc/keys/phpec/key.jks
然后執行keytool -list -v -keystore /Users/aboc/keys/phpec/key.jks
會需要輸入密碼，密碼在項目
android/key.properties 這個文件夾中，但密碼是在創建的時候生成的
3.安卓打包的簽名就是上面文件里面顯示的md5
可以使用 一.查詢keystore的MD5
可以在運行窗口，定位到keystore所在的路徑，(以android默認keystore為例)執行cd /Users/aboc/.android定位到.android下
執行下面這條語句后就能顯示Key的所有信息
keytool -list -v -keystore phpec.jks
這個方法獲取到md5
或者用這里的這個工具
https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html
CSS bug是布局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與IE7在很多問題上也存在著很大的差別。在webjx.com大量的技術文檔中，也包含了這方面的內容。輕松的解決CSS bug是我們必須掌握的技能?，F在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。希望對您的學習、工作有所幫助新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
一、 針對瀏覽器的選擇器
這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用.
IE6及其更低版本
width: 300px;
height: 150px;
}
margin: auto;
position: relative;
}
六、IE6雙倍邊距的bug
給此對象加上display:inline即可解決問題。具體介紹：
七、Box Model 盒模型bug的一般解決辦法
八、兩個層之間的3px間隙
傳說中的“IE 3px bug”，解決的辦法：
九、在IE中的HTML注釋引起文字奇怪的復制
Duplicate Characters Bug很神奇。
十、圖片替換技術
用文字總比用圖片做標題好一些. 文字對屏幕閱讀機和SEO都是非常友好的.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我們對標題使用了標準的<h1>作為標簽并且用css來將文本替換為圖片. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對于瀏覽者來說就看不見了.
關掉css,然后看看頭部會是什么樣子的.本文由webjx.com整理，轉載請注明出處！
十一、 最小寬度
IE6另外一個bug就是它不支持 min-width 屬性. min-width又是相當有用的, 特別是對于彈性模板來說, 它們有一個100%的寬度,min-width 可以告訴瀏覽器何時就不要再壓縮寬度了.
除IE6以外所有的瀏覽器你只需要一個 min-width: Xpx; 例如:
.container {
min-width:300px;
}
為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時候我們需要創建兩個div, 一個包含另一個:
<div class="container">
<div class="holder">Content</div>
</div>
然后你需要定義外層div的min-width屬性，本文由webjx.com整理，轉載請注明出處！
.container {
min-width:300px;
}
這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼:
大多數文章中，我們并未特別注意CSS文件的可維護與可讀性的問題，當完成一項前端的工作之后，許多人都會忘記該項目的結構與細節。然而代碼并不是馬上就能完全定型，在余下的時間里還有不斷的維護工作，而這些工作也許不會是你自己完成。所以，結構優良的代碼能很大程度上優化它的可維護性。下面列出四則技巧提高CSS文件可維護性的方法，以此作為指南，以一種較好的CSS樣式組織習慣來進行WEB前端開發。
一、CSS樣式文件分解
對于小項目，在寫代碼之前，按頁面結構或頁面內容將代碼分為幾塊并給予注釋。例如，可以分別將 全局樣式、布局、字體樣式、表單、評論和其他分為幾個不同的塊來繼續工作。
而對于較大的工程，這樣顯然不會有什么效果。此時，就需要將樣式分解到幾個不同的樣式表文件。下面的master stylesheet 就是這一方法的例子，它的工作主要是導入其他樣式文件。使用這一方法不僅能優化樣式結構，而且有利于減少一些不必要的服務器請求。而分解文件的方法就有許多種，master stylesheet 使用了最常見的一種。
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/ @import "debugging.css"; /
同時對于大型項目，你也可以加上CSS文件的升級標志或者一些診斷等其他措施，這里不再詳述。大家注意在實現工作中總結與思考，也歡迎多參考webjx.com的相關文章。
二、為CSS文件建立索引
為了能夠迅速的了解整個CSS文件的結構，在文件開頭建立文件索引是一個不錯的選擇。
一種可行的方法是建立樹形的索引，結構上的id 和 class 都可以成為該樹的一個分支。
[Layout]
定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的代碼變得容易。在制作大項目的時候，你也可以將檢索打印出來從而在你閱讀代碼的時候方便查閱。您還可以參考下面的文章。
三、格式化CSS屬性
當我們編寫代碼的時候，使用一些特殊的編碼風格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風格。一部分人習慣于將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動和定位的更“重要”的屬性放在前面。類似的，也可以將頁面元素按照它在布局中的結構進行排序：
body,
h1, h2, h3,
p, ul, li,
form {
margin: 0;
padding: 0;
border: 0;
}
一些開發者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得注意的是，這樣一種方法可能對某些瀏覽器會產生問題。不管自己的格式如何，你要確保你已經清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時候將會感謝你的努力。您還可以參考下面的文章。
四、合理的利用縮進
為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當指定的選擇器里的屬性超過三個的時候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區分相同類的不同點。
#main-column h1 { margin-bottom: 20px; }
#main-column p { color: #333; }
同時，樣式修改的維護也是個比較麻煩的問題。很多人修改樣式之后就忘記了，結果后來又發現修改的樣式導致了頁面出錯，不得不苦苦尋找。因此，為修改的樣式構建一個特殊的格式就很必要了。一種很簡單的方式是，給修改過的樣式縮進，同時，也可以使用一些注釋（比如"@new"）來做一個標識。
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; / @new /
margin: 3px 0 3px 0;
padding: 3px; / @new /
}
總的來說，只有建立一個合適的樣式指南才會對樣式表的可讀性有所幫助。記住，移去每一個對你理解文件沒有幫助的樣式指南，避免對過多的元素使用過多的樣式指南。然后，為了一個可讀性可維護性良好的CSS文件而努力吧。不要忘記和webjx.com分享您的經驗，歡迎參與評論
藍藍設計的小編 http://www.syprn.cn