电竞公司排行榜前十名
專注于網站建設和搭建網絡營銷體系
商視互聯,北京做網站公司
北京做網站,商視互聯 您的位置:網站首頁 > 商視動態 > 網頁設計 > 正文
DIV+CSS網頁布局實用技巧
作者:商視互聯   來源:商視互聯   日期:2012/6/28 15:19:05   熱度:℃   [ 標簽:網站優化 ]

1、最小高度

min-height:100px;    /*高度最小值設置為:100px*/

height:auto !important; /*兼容FF,IE7也支持 !important標簽*/

height:100px; /*兼容ie6*/


2、<meta http-equiv="X-UA-Compatible" content="IE=7" />的意思:將IE8使用IE7進行渲染,使網站在IE8上顯示正常


(X-UA-Compatible是針對ie8新加的一個設置,對于ie8之外的瀏覽器是不識別的,這個區別與content="IE=7"在無論頁面是否包含<!DOCTYPE>指令,都像是使用了 Windows Internet Explorer 7的標準模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。對于多數網站來說,它是首選的兼容性模式。

目前IE8尚在測試版中,所以為了避免制作出的頁面在IE8下面出現錯誤,建議直接將IE8使用IE7進行渲染。也就是直接在頁面的header的meta標簽中加入如下代碼:<meta http-equiv="X-UA-Compatible" content="IE=7" />(如:淘寶網);

這樣我們才能使得頁面在IE8里面表現正常!


3、兼容FF與IE的透明度設置:

filter:Alpha(Opacity=50);

opacity:0.5;


4、使網頁變灰色,只需要一句 css 代碼。使用 css 的濾鏡:

view plaincopy to clipboardprint?

html { filter:Gray; }  

html { filter:Gray; }或 view plaincopy to clipboardprint?

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }  

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }注:樣式加在 body 不能使 Google Adsense 等用 script 輸出的內容變灰,加在 html 上則可以。


5、去掉鏈接(包括圖片鏈接)的虛線邊框

/* for IE */

a,area { blr:expression(this.onFocus=this.blur()) }

/* for Firefox */

:focus { outline: none; }

  

6、左右結構,一邊固定另一邊自適應

a、左邊固定,右邊自適應

<div>

    <div  style="float:right;margin:0 0 0 -30px; width:100%">

        <div  style="margin:0 0 0 30px; background:#e4e4e4">這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內這里是<Br />右邊的內容</div>

    </div>

    <div style="float:left;width:30px; background:#669999">這里左邊部分</div>

</div>


b、右邊固定,左邊自適應

<div>

<div  style="float:right;width:200px; background:#669999">這里右邊部分</div>

    <div  style="float:left;margin:0 -215px 0 0; width:100%">

    <div  style="margin:0 215px 0 0; background:#e4e4e4">這里是左邊的內容</div>

</div>

</div>


7、圖片背景與顏色背景同時起效技巧

background: url(Bg.gif) no-repeat;
background-position: center 0px;
background-color: #cfe4a3;


本文網址:
更多

电竞公司排行榜前十名 重庆时时龙虎和微信 北京pk10官网视频直播 九城娱乐平台怎么样 新会员送88彩金 快三压大小单双技巧 北京pk10怎么玩 美女裸体写真香 亿贝平台app下载安装 北京pk10玩法 拉萨沐足论坛那个好