CSS Design - IDIS資訊網部落格

文章分類

Javascript (18)
CSS Design (13)
PHP Code (28)
Windows (6)
Software (2)
Firefox (4)
Web Design (10)
Share Archives (11)
Icon & Image (4)
TV Game (1)
MyWeb Project (9)

管理功能

登入管理者：

分類：CSS Design < | 1 | 2 | >

預覽模式: 普通 | 列表

DIV + CSS 浮動閉合問題解決方法作者:管理者日期:2008-10-16 15:50:04

在使用 div 做整個版型的 layout 時 , 最頭痛的不外呼就是跨瀏覽器的支援問題 , 尤其是在使用浮動( float )來達成分欄時 , 不同的版本瀏覽器對其 CSS 樣式的支援度及預設值都有所差異 , 因此就特別整理一下當處理區塊閉合( clearing float )的 CSS 語法.

1. 在父區塊加上 float 屬性

此方法十分消極 , 對於整體版面會變成不容易控制 , 因此不建議使用.

2. 在父區塊加上 overflow:auto 屬性

此原理是指父區塊在瀏覽器的解譯下並未預設 overflow 屬性(如 firefox) , 而 overflow 就是指此區塊大小是否會依照其內包容的資料而延伸 , 因此十分建議使用此方法.

3. 在父區塊加上 clear:both 屬性

此原理是指父區塊在處於浮動的同時 , 將不允許左右邊也有浮動的區塊 , 而產生閉合此區塊的效果 , 因此也是十分建議使用此方法.

範例：(在要閉合的 DIV 加上此 CLASS)

/* Clear Fix */

Tags: div css float 浮動

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:481

CSS 滑鼠指標 cursor 作者:管理者日期:2008-09-24 15:28:00

hand：手形
crosshair：精確定位「十」字形
text：文本「I」形
wait：等待，「沙漏」形
default：預設箭頭
help：幫助，帶尾箭頭
e-resize：箭頭朝右方
ne-resize：箭頭朝右上方
n-resize：箭頭朝上方
nw-resize：箭頭朝左上方
w-resize：箭頭朝左方
sw-resize：箭頭朝左下方
s-resize：箭頭朝下方
se-resize：箭頭朝右下方
auto：自動，鼠標按照默認的狀態根據頁面上的元素自行改變樣式
no-drop：出現帶有「禁止標示」的手形游標。原本是用來表示被拖曳的對象不容許在游標目前的位置被放下。
not-allowed：出現「禁止標示」的游標。原本是用來表示請求的作業不容許被執行。
pointer：與 hand 相同。

Tags: CSS 滑鼠指標 cursor

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:577

CSS 換行控制作者:管理者日期:2008-09-17 21:38:06

■ 遇空白也不換行

white-space:nowrap;

■ 自動換行

word-wrap: break-word;
word-break: normal;

■ 英文單字斷行

word-break: break-all;

Tags: CSS 換行 white-space word-wrap word-break

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:604

Firefox 及 IE 6.0 遇到 DIV 本文高度不能撐開處理作者:管理者日期:2008-09-11 03:07:40

最近在處理很多案子時發現 , Firefox 或 IE 6.0 在使用DIV區塊時 , 常常遇到內容器無法撐開的問題 , 主要就是高度的 CSS 設定又是給他各自表態 , 我想這短期內還是只能逐一修正吧 ...

解決方法 1

div {
  width:100px;
  height:auto;
  overflow: auto;
}

解決方法 2

div {
  width:100px;
  height:auto;
  overflow: visible;
}

解決方法 3

div {
  height:auto!important;
  height:100px;
  min-height:100px;
}

每次要修正 CSS 就是頭痛的開始呀 ....

Tags: CSS FirefoxIE 6.0 DIV important min-height 高度

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:899

無內容div占據空間的觸發條件和解決方法作者:管理者日期:2008-08-13 03:53:38

原文:http://www.planabc.net/2007/07/20/not_content_div/

當在 div 標簽內無任何內容時：

<div></div>

如果給 div 元素設置了寬度時，比如 width:100% ，此時 div 在 IE 中（IE6，IE7）將占據物理空間，而在FF中不占據物理空間（正確理解）。為了表述直觀，將樣式直接寫在元素標簽內：

<div style="width:100%"></div>

此時在 IE 中到底是什麽在影響著最終的顯示，又是如何解析的呢？

可能的影響因素：字體大小（font-size），字體行高（line-height），高度（height），溢出（overflow）。

我們對上面的代碼逐一添加過濾屬性（具體的過程有興趣的朋友，可以私下裏實驗一下，“自己動手，豐衣足食”！）

Tags: css div html ie

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:371

CSS 文繞圖作法作者:管理者日期:2008-08-13 02:21:39

文繞圖其實非常的容易 , 並且在文章的排版上會有很漂亮的效果 .

只要在 CSS 中去定義 float 屬性就可以了 , 再外加上 margin 來控制文字和圖片的間距 , 就會十分漂亮喔.

STYLE="FLOAT: LEFT;"
    物件 (在此是圖片) 置左

STYLE="FLOAT: RIGHT;"
    物件 (在此是圖片) 置右

STYLE="FLOAT: NONE;"
    不變

STYLE="FLOAT: INHERIT;"
    物件 (在此是圖片) 繼承先前宣告值

Tags: CSS 文繞圖 Image

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:530

CSS 強制不換行/自動換行/英文單詞斷行作者:管理者日期:2008-08-12 16:33:26

強制不換行

div{
  white-space:nowrap;
}

自動換行

div{
  word-wrap: break-word;
  word-break: normal;
}

強制英文單詞斷行

div{
  word-break:break-all;
}

Tags: CSS 斷行換行

所在分類： CSS Design | 固定鏈結 | 最新迴響:0 | 瀏覽人次:944

通過style來控制隔行顯示不同顏色作者:管理者日期:2008-08-12 16:34:17

CSS 樣式表

<style>
  tr{
    bgcolor:expression(this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow');
  }
</style>

HTML 原始碼

<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>