轉:整理收集的div+css製作網頁的一些小執行個體技巧

來源:互聯網
上載者:User

1.滑鼠移上去是出現一個window的儲存收藏列印的那個小框框,能不能限制它的出現?

在HEAD中加入

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

2. 圖片上用新屬性galleryimg

<img width=500 height=500 src=a.gif galleryimg="no">

3.div實現捲軸 (某些情況下可以替代iframe)

<style>
.gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
</style>
<div class="gb"></div>

其中高度height和overflow是必須設定的!

ps:在IE下有的時候水平捲軸會出來,但是事實上,水平捲軸不沒有實際的用途,貌似這個是IE的bug,解決方案:overflow-x: hidden

 加上這個.把水平捲軸隱藏掉~

4.用css來實現三角形

 HTML代碼

<style>
.t{
  width:50px;
  border-style:solid;
  border-color:#a6a2f7 #fff;
  border-width:0 50px 50px 50px;
}
</style>
<span class="t"></span>

5. 用vml來畫圓角...

 HTML代碼

<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
#lone {
 width:200;
 height:70px;
}
</style>
</head>
<body>
<v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
<!--arcsize 弧度值 fillcolor 圓的填充色 strokecolor 圓的邊框色 strokeweight 邊框大小-->
</body>
</html>

6 . IE下,當使用了FLOAT之後.用margin-left和margin-right 會變成用雙倍的數值,例子:

margin-left:10px; 實際的效果是20PX;

解決的方法:(1),用display:inline;(2)用clear:float

方法1適應的範圍比較廣一些,(2)的話.只適合那些可以清除浮動的元素.不能清除的,不能用~

7.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方案:

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反,據阿捷的說法!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:
div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行,所以不可以唯寫margin:XXpx!important;

8.IE5和IE6的BOX解釋不一致IE5下

div{width:300px;margin:0 10px 0 10px;}

div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px,而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改:

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

這個/**/是IE5和firefox都支援但IE6不支援.

9.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義

ul{margin:0;padding:0;}

10.關於指令碼,在xhtml1.1中不支援language屬性,只需要把代碼改為

<script type="text/javascript">

11.JS 的頁面跳轉指令碼

 HTML代碼

<script language="javascript">
location.assign ("<a href="HTTP://www.jzxue.com" target="_blank">HTTP://www.jzxue.com</a>")
</script>
 
12. IE下用JS去掉所有連結和圖片的焦點(因點擊而產生的虛線框)

function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>

13. 屏蔽右鍵類的代碼

<body oncontextmenu="return false">

14。div+css布局用了float之後背景不能延伸的解決方案

<div style="clear: both; font-size: 0;"></div>

原因:背景的自適應高度並不繼承float的高度,背景會繼承float底線所在容器中的位置高度,所以背景一定會找到最後一個標籤去測定,這樣我們在如上的標籤,這個標籤中什麼也不放。也就是一個沒有高度的空容器,這樣它就可以把背影拉下來了。

15.用JS來處理圖片變形的問題,等比例縮放圖片,還能防止圖片在載入過程中因為圖片太大而引起的變形

<script language="JavaScript" type="text/javascript">
<!--
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
//-->
</script>

應用:

<img src="XXXX" alt="自動縮放後的效果" width="200" height="200" onload="javascript:DrawImage(this,"200","200");" />

這裡給圖片設定了固定的大小。用了JS函數之後,不影響效果:)

16.用 CSS 實現 Firefox 和 IE 都支援的 Alpha 透明效果

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支援CSS3的瀏覽器(FF 1.5也支援)*/

IE使用私人屬性filter:alpha(opacity),Moz Family使用私人屬性-moz-opacity,而標準的屬性是opacity(CSS 3, Moz Family部分支援CSS3)。後面的數值是透明度,使用百分比或者小數。

17.未知大小的圖片在一個已知大小容器中的水平和垂直置中

這個水平和垂直置中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,為IE和非IE分別寫了二套簡單的樣式。

IE使用inline-blocks,非IE使用table-cell and vertical-align。

CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}

18 .在IE裡面元素浮動之後.原來的邊距(margin)會加倍,但是FF等就不會.解決方案
在浮動的元素的代碼中加入:display: inline;,可使浮動被忽略,IE中不至於產生雙倍距離.

19. 首頁下沉的效果:

.post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷體_GB2312"; font-weight:bold; color:#b00;}

20.半透明的效果

 HTML代碼

<div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支援CSS3的瀏覽器(FF 1.5也支援)*/">我在任何瀏覽器裡都是半透明的
</div>

轉:http://mb.5151doc.com/wzsj/ShowArticle.asp?ArticleID=103

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.