顯示具有 軟體撰寫-DIV 標籤的文章。 顯示所有文章
顯示具有 軟體撰寫-DIV 標籤的文章。 顯示所有文章

2015年2月10日 星期二

CSS DIV 置中

如果你習慣採用 DIV 來做網頁的排版，那就難免會碰到需要讓 DIV 置中的時候，在大部分主流的瀏覽器中，想要要讓 DIV 置中，僅需要用到 margin 就能夠達成，但在 IE 瀏覽器可就不是這麼一回事囉！這篇分享幾種不同的情況。

一、適用於大部分瀏覽器的 DIV 置中語法
margin:0px auto;

這樣的寫法基本上適用於 FireFox、Google Chrome、Opera 等常見主流瀏覽器。

二、適用於 IE8 的 DIV 置中語法

<div style="text-align:center;background-color:#FFAC55;width:500px;height:50px;">
　<div style="background-color:#FFAFFE;width:300px;height:20px;margin:0 auto;"></div>
</div>

示意圖


這個技巧是使用兩個 <DIV> 來配合，父層的 <DIV> 設定 text-align:center 的意思是區塊內置中對齊。範例中使用到的 background-color 是背景顏色，主要目的僅是讓範例更容易呈現，另外 width 與 height 分別是 div 的寬度與高度。

三、適用於 IE6 與 IE7 的 DIV 置中語法
_margin:0px auto;　//適用於 IE6　*margin:0px auto;　//適用於 IE7

以上的 DIV 置中方式主要是讓整個 DIV 區塊置中，而不是 DIV 內的元素置中，如果你想要讓 DIV 內的文字、圖片或其他元素能夠置中，請參考 CSS text-align 與 CSS 文字垂直置中。
================================
參考文獻
http://www.wibibi.com/info.php?tid=147
張貼者： 於 沒有留言:
標籤：

DIV 隱藏技巧

DIV 隱藏技巧

在某些時候會需要隱藏 DIV 區塊，例如網頁剛開啟的時候不顯示，當網友使用了某些選項再開啟 DIV 區塊之類的應用，而 DIV 隱藏有兩種常見的技巧，分別是 JavaScript 語法或是 CSS隱藏，本篇要介紹的是 CSS 隱藏技巧，你可以透過以下兩種方式達成。

CSS DIV 隱藏技巧一<div style="display:none">區塊中的內容</div>

CSS DIV 隱藏技巧二<div style="visibility:hidden">區塊中的內容</div>

這兩種用法有什麼樣的差異呢？簡單來說 display:none 的意思是隱藏包含 <div> 標籤整個元素，而 visibility:hidden 只會隱藏區塊中的內容，並保留 <div> 標籤的屬性，換句話說 <div> 標籤所佔的區塊還是存在，只是沒有顯示內容而已。
張貼者： 於 沒有留言:
標籤：

2014年9月10日 星期三

跟著滑鼠跑的div圖層 --javascript

 
 
 
 
 
程式語法   詳細內容  請連結  http://wly.e717.net/modules/newbb/viewtopic.php?topic_id=27
 
怕被刪掉  先放著
 
<script type="text/javascript">
/*
程式作者：風痕影（hit1205@m70.url.com.tw）
作者網站：風痕水影（http://hit1205.blogdns.org/）
IE可以用event.y和event.x取游標座標值，而FireFox則需使用event.pageY。可是我一試之下，卻發現FireFox說event錯誤的！結果用Google查詢之後，得到FireFox不能直接在JavaScript中取用event的結論，不過可以用另一種方式，也就是變數的方式代入。
製作日期：2004年12月21日
v2.1 2005年12月26日：米亞提到加上DTD後document.body.scrollTop失效的問題
這是因為IE在加上DTD之後，隸屬<BODY>的捲軸屬性會改歸在<HTML>之下；本版已修正這個問題
版權資訊：可以在非營利用途內自由使用或修改，但請保留以上資訊
　　　　　如果你覺得這個程式不錯，歡迎連結且（或）放上我網站的LOGO
　　　　　LOGO取得 -- http://hit1205.blogdns.org/teach?unit=lnk
*/
function DivDraw(e){
x_out=32; // 與游標座標之水平距離
y_out=32; // 與游標座標之垂直距離
if(document.body.scrollTop && document.body.scrollTop !=0){
dbst=document.body.scrollTop;
dbsl=document.body.scrollLeft;
}
else{
dbst=document.getElementsByTagName("html")[0].scrollTop;
dbsl=document.getElementsByTagName("html")[0].scrollLeft;
}
dgs=document.getElementById("DivId").style // 請將DivId取代為你網頁中<DIV ID="">之值
y=e.clientY;x=e.clientX;
dgs.top=y+dbst+y_out+"px";
dgs.left=x+dbsl+x_out+"px";
}
</script> 

---------------------------------------------------------
<html onmousemove="DivDraw(event)" >
<div id="DivId" style="position:absolute;width:300px;background-color:black;color:white;padding:10px;font-size:10pt;">跟著滑鼠跑的div</div>

張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)