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 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。

下面是一些彈性布局的基本語法：

兩部分：

1. 語法是添加到父容器上的
   
           display : flex;（彈性盒子的標志哦?。。。?br />
           flex-direction: row; 布局的排列方向 （主軸排列方向）
   
                row 默認值，顯示為行。方向為當前文檔水平流方向，默認情況下是從左往右。
   
                row-reverse  顯示為行。但方向和row屬性值是反的
   
                column  顯示為列
   
                column-reverse 顯示為列。但方向和column屬性值是反的
   
           flex-wrap : nowrap; 是否進行換行處理。
   
                nowrap; 默認值，不換行處理
   
                wrap; 換行處理
   
                wrap-reverse; 反向換行
   
           flex-flow : flex-direction flex-wrap 復合寫法 (是有順序的)。
   
           justify-content ; 屬性決定了主軸方向上子項的對齊和分布方式。  
   
               flex-start ： 子項都去起始位置對齊。
   
               flex-end ： 子項都去結束位置對齊。
   
               center ： 子項都去中心位置對齊。
   
               space-between : 表現為兩端對齊。多余的空白間距在元素中間區域分配，兩邊沒寬。 
   
               space-around : 邊緣兩側的空白只有中間空白寬度一半即每個塊都有左右間距。
   
               space-evenly :每個flex子項兩側空白間距完全相等。
   
           align-items : 每一行中的子元素上下對齊方式。
   
               stretch;默認值，flex子項拉伸
   
               flex-start;容器頂部對齊
   
               center;容器居中對齊
   
               flex-end;容器底部對齊
   
           align-content : 跟justify-content相反的操作。側軸的對齊方式。(最少需要兩行才能看出效果，因為他是多行的一個上下對齊方式)
   
               默認：多行下，有幾行就會把容器劃分為幾部分，默認就是stretch拉伸的。
   
               值跟justify-content取值是相同的。
   
   
   
2. 語法是添加到子容器上的？
   
           order : 排序(值越大越后)
   
               0：默認值      eg:1234
   
               1：放在后面    eg:1342
   
               -2：放在前面   eg:2134
   
           flex-grow : 擴展 ( 想看到擴展的效果，必須有空隙 )
   
               0 : 默認值 , 不去擴展
   
               0.5：占空隙的一半
   
               1 : 去擴展 , 會把空白區域全部沾滿
   
            （ 注：子元素會按照設置的比例值來分配空隙，如果比例值總和小于1，那么會有空隙，如果比例值總和大于等于1，那么就沒有空隙。）
   
           flex-shrink : 收縮
   
               正常默認值是1
   
               0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正?？s放1進行比較的）
   
           flex-basis : 跟flex-shrink/flex-grow很像。
   
               flex-shrink/flex-grow是設置一個比例值，flex-basis是設置一個具體值。
   
           flex : 一種復合寫法
   
               flex-grow  flex-shrink  flex-basis
   
               flex:1;
   
                   flex : 1 1 0    
   
               flex:0;
   
                   flex : 0 1 0
   
           algin-self: 跟align-items操作很像，區別就是只是針對某一個子項。
   
               
   
   
   
   注：默認情況下，在彈性盒子中的子元素的左右排列的。
   
   注：
   
       水平是主軸的時候：默認情況下，當寬高不寫的時候，寬度由內容決定，高度由父容器決定。
   
       垂直是主軸的時候：默認情況下，當寬高不寫的時候，寬度由父容器決定，高度由內容決定。
   
   
   
   注：當子項的總寬度大于父容器的時候，會自動收縮的（彈性的優先級是大于自身固定大小的）
   
   注：當子項的內容已經達到了父容器最小寬高的時候，就會出現溢出的現象。
   
   
   
   注：彈性布局中用的頻率比較多的語法：
   
       display : flex;
   
       flex-direction;
   
       justify-content;
   
       align-items;
   
       flex;
   
   
   
   注：彈性布局的優勢是做一維布局，網格布局的優勢是做二維布局。
   
   
   
   下面是彈性布局骰子案例代碼：
   
   
   
   <!DOCTYPE html>
   
   <html lang="en">
   
   <head>
   
       <meta charset="UTF-8">
   
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
       <title>Document</title>
   
       <style>
   
           *{margin: 0;padding: 0;}
   
           ul{list-style: none;}
   
           a{text-decoration: none;}
   
           img{display: block;}
   
   
   
           .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
   
           .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
   
           .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
   
           .box2 div:nth-of-type(1){align-self: flex-start;}
   
           .box2 div:nth-of-type(2){align-self: flex-end;}
   
   
   
           .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
   
           .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
   
           .box3 div:nth-of-type(1){align-self: flex-start;}
   
           .box3 div:nth-of-type(3){align-self: flex-end;}
   
   
   
           .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 
   
           perspective: 500px;perspective-origin: right top;}
   
           #box .main{position: relative;width: 150px;height: 150px;margin: 125px;
   
           transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
   
           #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;}
   
           #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
   
           #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
   
           #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
   
           #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
   
           #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
   
   
   
           #box:hover .main{transform:rotateY(360deg);}
   
       </style>
   
   </head>
   
   <body>
   
       <div id="box">
   
           <div class="main">
   
               <div class="box1">
   
                   <div></div>
   
               </div>
   
               <div class="box2">
   
                   <div></div>
   
                   <div></div>
   
               </div>
   
               <div class="box3">
   
                   <div></div>
   
                   <div></div>
   
                   <div></div>
   
               </div>
   
               <div class="box4">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
               <div class="box5">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
               <div class="box6">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
   </body>
   
   </html>
   
   
   
   
   

目錄

介紹

目錄

介紹

學習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}

})

環境搭建

首先在微信公眾平臺注冊一個我們自己的賬號：





根據注冊提示完成注冊

2. 用我們剛剛注冊好的賬號登錄，進入微信官方文檔界面，下載微信開發者工具
   
   
   
   
   
3. 根據提示安裝好就可以登錄創建工程了！
   
   
   
   開發工具的認識
   
   開發工具的界面詳解：
   
   
   
   
   
   MINA框架：
   
   js文件：頁面中的邏輯界面；用于功能編寫
   
   wxml文件：配置頁面元素及頁面布局
   
   wxss文件：樣式文件，對頁面進行美化【在文件夾中重寫時，覆蓋默認的頁面樣式】
   
   json文件：頁面的配置文件，例如tabBar的描述【在文件夾中重寫時，覆蓋默認的頁面結構】
   
   
   
   App文件：
   
   App.js文件：用于注冊一個小程序，并進行生命周期
   
   App.json負責整個App的配置：
   
   （1）pages：定義小程序的路由
   
   （2）window：定義小程序的頂部菜單
   
   （3）tabBar：定義小程序的底部Tab
   
   （4）networkTimeout：定義小程序的超時
   
   （5）debug：定義小程序的debug模式
   
   App.wxss樣式會被整個App的頁面引用，公用css可以寫在這里
   
   
   
   創建工程
   
   1.登錄微信開發者工具，進行工程創建的信息填寫
   
   
   
   -項目名稱必須與事先定好的路徑最后一個文件名相同，如果沒有，項目名稱將會自動修改為路徑里面最后一個文件名。若強行修改項目名稱，則會出現一下錯誤，導致無法創建。
   
   
   
4. 在微信公眾平臺找到我們的AppID，填在AppID的文本框內。也可以暫時使用測試號
   
   
   
   3.創建完成后，根據需要就可以自己修改代碼，完成自己的小程序編寫了！
   
   
   

閑著沒事兒寫了個小 demo ，獲取手機上已安裝應用信息，系統應用和 非系統應用

MD5 SHA1 SHA256 簽名信息 點擊簽名信息可復制到剪切板，

GitHub：https://github.com/sunan-n/GetAppInfo

如下圖：

<span style="white-space:pre;"> </span>主要就是這個方法，傳參數進來獲取相應的簽名類型 信息<br />
&nbsp; &nbsp; public static String getSignaturesInfo(Context context, String packageName, String tpye) {<br />
//&nbsp; &nbsp; &nbsp; &nbsp; //獲取包管理器<br />
&nbsp; &nbsp; &nbsp; &nbsp; PackageManager pm = context.getPackageManager();<br />
&nbsp; &nbsp; &nbsp; &nbsp; //返回包括在包中的簽名信息<br />
&nbsp; &nbsp; &nbsp; &nbsp; int flags = PackageManager.GET_SIGNATURES;<br />
&nbsp; &nbsp; &nbsp; &nbsp; PackageInfo packageInfo = null;<br />
&nbsp; &nbsp; &nbsp; &nbsp; try {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //獲得包的所有內容信息類<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; packageInfo = pm.getPackageInfo(packageName, flags);<br />
&nbsp; &nbsp; &nbsp; &nbsp; } catch (PackageManager.NameNotFoundException e) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.printStackTrace();<br />
&nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; //簽名信息<br />
&nbsp; &nbsp; &nbsp; &nbsp; Signature[] signatures = packageInfo.signatures;<br />
&nbsp; &nbsp; &nbsp; &nbsp; byte[] cert = signatures[0].toByteArray();<br />
&nbsp; &nbsp; &nbsp; &nbsp; //將簽名轉換為字節數組流<br />
&nbsp; &nbsp; &nbsp; &nbsp; InputStream input = new ByteArrayInputStream(cert);<br />
&nbsp; &nbsp; &nbsp; &nbsp; //證書工廠類，這個類實現了出廠合格證算法的功能<br />
&nbsp; &nbsp; &nbsp; &nbsp; CertificateFactory cf = null;<br />
&nbsp; &nbsp; &nbsp; &nbsp; try {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cf = CertificateFactory.getInstance("X509");<br />
&nbsp; &nbsp; &nbsp; &nbsp; } catch (CertificateException e) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.printStackTrace();<br />
&nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; //X509證書，X.509是一種非常通用的證書格式<br />
&nbsp; &nbsp; &nbsp; &nbsp; X509Certificate c = null;<br />
&nbsp; &nbsp; &nbsp; &nbsp; try {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c = (X509Certificate) cf.generateCertificate(input);<br />
&nbsp; &nbsp; &nbsp; &nbsp; } catch (CertificateException e) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.printStackTrace();<br />
&nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; String hexString = null;<br />
&nbsp; &nbsp; &nbsp; &nbsp; try {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //加密算法的類，這里的參數可以使MD4,MD5等加密算法<br />
//&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MessageDigest md = MessageDigest.getInstance("SHA1");<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MessageDigest md = MessageDigest.getInstance(tpye);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //獲得公鑰<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; byte[] publicKey = md.digest(c.getEncoded());<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //字節到十六進制的格式轉換<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hexString = byte2HexFormatted(publicKey);<br />
&nbsp; &nbsp; &nbsp; &nbsp; } catch (NoSuchAlgorithmException e1) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e1.printStackTrace();<br />
&nbsp; &nbsp; &nbsp; &nbsp; } catch (CertificateEncodingException e) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.printStackTrace();<br />
&nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; return hexString;<br />
&nbsp; &nbsp; }<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及其更低版本

• html {}
  
  IE7及其更低版本
  
  :first-child+html {} html {}
  
  僅針對IE7
  
  *:first-child+html {}
  
  IE7和當代瀏覽器
  
  html>body{}
  
  僅當代瀏覽器(IE7不適用)
  
  html>/*/body{}
  
  Opera9及其更低版本
  
  html:first-child {}
  
  Safari
  
  html[xmlns=""] body:last-child {}
  
  要使用這些選擇器,請將它們放在樣式之前. 例如:
  
  
  

  content-box { 
  

  width: 300px; 
  
  height: 150px; 
  
  }
  
  
  
   
  
  
  

• html #content-box { 
  
  width: 250px; 
  
  } 
  
  
  
  
  
  您也可以參考—CSS hacks：瀏覽器特定選擇器介紹
  
  
  
  二、讓IE6支持PNG透明
  
  
  
  一個IE6的Bug引起了大麻煩, 他不支持透明的PNG圖片。
  
  你需要使用一個css濾鏡
  
   
  
  
  
  *html #image-style { 
  
  background-image: none; 
  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 
  
  ename.png", sizingMethod="scale"); 
  
  }
  
  
  
  
  
  三、移除超鏈接的虛線
  
  
  
  FireFox下,當你點擊一個超鏈接時會在外圍出現一個虛線輪廓. 這很容易解決, 只需要在標簽樣式中加入：
  
   
  
  
  
  outline:none.
  
  a{ 
  
  outline: none; 
  
  }
  
  
  
  
  
  您也可以參考—除鏈接元素的虛線框（兼容IE7、IE6、FF）
  
  
  
  四、給行內元素定義寬度
  
  
  
  如果你給一個行內元素定義寬度,那么它只是在IE6下有效. 所有的HTML元素要么是行內元素要么就好是塊元素. 行內元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內元素的寬度, 為了解決這個問題你可以將行內元素轉變為塊元素.
  
   
  
  
  
  span { width: 150px; display: block }
  
  
  
  
  
  五、讓固定寬度的頁面居中
  
  
  
  為了讓頁面在瀏覽器居中顯示, 需要相對定位外層div, 然后把margin設置為auto.
  
   
  
  
  

  wrapper { 
  

  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大顯身手的時候了. 你需要包含如下的代碼:
  
   
  
  
  

• html .container { 
  
  border-right: 300px solid #FFF; 
  
  } 
  
• html .holder { 
  
  display: inline-block; 
  
  position: relative; 
  
  margin-right: -300px; 
  
  }
  
  
  
  
  
  As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
  
  
  
  十二、隱藏水平滾動條
  
  
  
  為了避免出現水平滾動條, 在body里加入 overflow-x:hidden .
  
   
  
  
  
  body { overflow-x: hidden; }
  
  
  
  
  
  當你決定使用一個比瀏覽器窗口大的圖片或者flash時, 這個技巧將非常有用
  
  
  

大多數文章中，我們并未特別注意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]

• body
  
        + Header / #header
  
        + Content / #content
  
              - Left column / #leftcolumn
  
              - Right column / #rightcolumn
  
              - Sidebar / #sidebar
  
              - RSS / #rss
  
              - Search / #search
  
              - Boxes / .box
  
              - Sideblog / #sideblog
  
        + Footer / #footer
  
  Navigation         #navbar
  
  Advertisements         .ads
  
  Content header         h2
  
  
  
  或者也可以這樣：
  
  
  
  [Contents]
  
        1. Body
  
        2. Header / #header
  
              2.1. Navigation / #navbar
  
        3. Content / #content
  
              3.1. Left column / #leftcolumn
  
              3.2. Right column / #rightcolumn
  
              3.3. Sidebar / #sidebar
  
                    3.3.1. RSS / #rss
  
                    3.3.2. Search / #search
  
                    3.3.3. Boxes / .box
  
                    3.3.4. Sideblog / #sideblog
  
                    3.3.5. Advertisements / .ads
  
        4. Footer / #footer
  
  
  
  新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
  
  
  
  另一種方式可以只是先簡單的將內容列舉出來，也不需要縮進。下面的一個例子中，如果你需要跳至RSS部分你只需要簡單的搜索。
  
  
  
  [Contents]
  
  1. Body
     
  2. Header / #header
     
  3. Navigation / #navbar
     
  4. Content / #content
     
  5. Left column / #leftcolumn
     
  6. Right column / #rightcolumn
     
  7. Sidebar / #sidebar
     
  8. RSS / #rss
     
  9. Search / #search
     
  10. Boxes / .box
      
  11. Sideblog / #sideblog
      
  12. Advertisements / .ads
      
  13. Footer / #footer
      
      /--[8. RSS / #rss]--/
      

      rss { ... }
      

      rss img { ... }
      

      
      
      定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的代碼變得容易。在制作大項目的時候，你也可以將檢索打印出來從而在你閱讀代碼的時候方便查閱。您還可以參考下面的文章。
      
      
      
      三、格式化CSS屬性
      
      
      
      當我們編寫代碼的時候，使用一些特殊的編碼風格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風格。一部分人習慣于將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動和定位的更“重要”的屬性放在前面。類似的，也可以將頁面元素按照它在布局中的結構進行排序：
      
      
      
          body,
      
                h1, h2, h3,
      
                p, ul, li,
      
                form {
      
                        margin: 0;
      
                        padding: 0;
      
                        border: 0;
      
                 }
      
      
      
      一些開發者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得注意的是，這樣一種方法可能對某些瀏覽器會產生問題。不管自己的格式如何，你要確保你已經清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時候將會感謝你的努力。您還可以參考下面的文章。
      
      
      
      四、合理的利用縮進
      
      
      
      為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當指定的選擇器里的屬性超過三個的時候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區分相同類的不同點。
      
      
      

      main-column { display: inline; float: left; width: 300px; }
      

          #main-column h1 { margin-bottom: 20px; }
      
          #main-column p { color: #333; }
      
      
      
      同時，樣式修改的維護也是個比較麻煩的問題。很多人修改樣式之后就忘記了，結果后來又發現修改的樣式導致了頁面出錯，不得不苦苦尋找。因此，為修改的樣式構建一個特殊的格式就很必要了。一種很簡單的方式是，給修改過的樣式縮進，同時，也可以使用一些注釋（比如"@new"）來做一個標識。
      
      
      

      sidebar ul li a {
      

             display: block;
      
             background-color: #ccc;
      
                  border-bottom: 1px solid #999; / @new /
      
             margin: 3px 0 3px 0;
      
                  padding: 3px; / @new /
      
      }
      
      
      
      總的來說，只有建立一個合適的樣式指南才會對樣式表的可讀性有所幫助。記住，移去每一個對你理解文件沒有幫助的樣式指南，避免對過多的元素使用過多的樣式指南。然后，為了一個可讀性可維護性良好的CSS文件而努力吧。不要忘記和webjx.com分享您的經驗，歡迎參與評論
      
      
      

在學習應用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡稱.

• CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執行(屬于瀏覽器解釋型語言).
  
  
  
• 在標準網頁設計中CSS負責網頁內容(XHTML)的表現.
  
  
  
• CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴.
  
  
  
• 可以通過簡單的更改CSS文件,改變網頁的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.
  
  
  
• CSS是由W3C的CSS工作組產生和維護的.
  
  
  
  新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
  
  
  
  了解了什么是css后我們就可以方便對其應用了，我們可以用以下兩種方式加入你的博客當中去，由于css的應用方式有就近原則。也就是說最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。
  
  
  
  鏈入外部樣式表文件 (Linking to a Style Sheet)
  
  
  
  你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下：
  
  
  
  <head>
  
  <title>文檔標題</title>
  
  <link rel=stylesheet href="http://www.123-seo,cn/dhtmlet.css" type="text/css">
  
  </head>
  
  
  
  而在XML中，你應該如下例所示在聲明區中加入：
  
  
  
  <? xml-stylesheet type="text/css" href="http://www.123-seo.cn/dhtmlet.css" ?>
  
  
  
  定義內部樣式塊對象 (Embedding a Style Block)
  
  
  
  你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。 定義方式請參閱樣式表語法。示例如下：
  
  
  
  <html>
  
  <head>
  
  <title>文檔標題</title>
  
  <style type="text/css">
  
  <!--
  
  body {font: 10pt "Arial"}
  
  h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
  
  h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
  
  p {font: 10pt/12pt "Arial"; color: black}
  
  -->
  
  </style>
  
  </head>
  
  <body>
  
  
  
  請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。