網頁技巧收集

紋路貓發表於2012-10-27
網頁
.header{
 text-indent:-9999px;
 background:url('someimage.jpg') no-repeat;
 height: 100px; /*dimensions equal to image size*/
 width:500px;
}

這是一個很好的SEO技巧，讓你看到一個不錯的花哨的影象，而不是簡單枯燥的文字，但搜尋引擎將只能看到文字。

不知道這算不算是一個作弊的行為。text-indent為正值意為文字塊向右縮排長度，為複製意為文字塊向左縮排長度。上面的效果是，將文字移出了瀏覽器的視野之內，但是搜尋引擎會找得到。


#container{
 height:auto !important;/*all browsers except ie6 will respect the !important flag*/
 min-height:500px;
 height:500px;/*Should have the same value as the min height above*/
}
Internet Explorer不理解min-height屬性，但這裡的CSS技巧來完成，在IE瀏覽器。跨瀏覽器的最低高度（讓IE支援min-height）

transparent_class {
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}
雖然CSS3標準包括Opacity屬性，但不是每個瀏覽器都支援它跨瀏覽器的透明度，這裡的CSS技巧。跨瀏覽器支援不透明度

line-height:30px;
height:30px;
如果您使用的是固定高度容器和垂直居中的文字，使用line-height屬性，line-height畫素和高度一致，完美地做到這一點。

body{
 width:980px;
 margin:0 auto;
}
讓body篤定寬度並且居中。

text-transform: capitalize;
讓每個單詞的首字母大寫。

font-variant:small-caps;
讓所有字母都大寫。

a img{ border:none; }
圖片超連結通常會得到一個醜陋的藍色邊框，使您的影象超連結看起來可怕。下面程式碼就可去掉。

@font-face {
	font-family: Blackout;
	src: url("assests/blackout.ttf") format("truetype");
}
@font-face 能夠載入伺服器端的字型檔案，讓客戶端顯示客戶端所沒有安裝的字型。

input[type="text"] {
    width: 200px;
}
定義文字框樣式。

onerror="javascript:this.src='../indexImages/daex03.jpg'"
在圖片標籤上加上這個，就可以在圖片丟失或者其他原因不顯示的時候顯示預設圖片

在控制元件的同一行讓文字垂直居中
#divSearch input {
vertical-align: middle;
}

js獲取url引數的方法
//獲取傳過來的引數值
    function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
    }





















相關文章