HTML 中的幾個小知識

div 自適應高度問題

   在做過web前端開發的都知道，在div + Css 佈局中經常用到 float 浮動佈局，可以使頁面公整，美觀。但是隨之而來就帶來一些問題：

   (1). 自適應高度問題

         BackGround:

                 如果沒有克服這個問題，當要展示的數據超過div的高度的時候，那它超出的部分是會漂浮在下層的div上面的，這樣會帶來頁面混亂，嚴重影響用戶體驗。

         Solution:

               1.   當然你可以使用 overflow =“hidden” 來解決，好就算這樣可行，可是超出的信息沒有辦法被用戶識別，那情何以堪。

               2.   嘗試接受overflow =“scroll” 吧，沒辦法用戶自己去託scroll bar咯。

               3.   上面都是固定高度的方法，接下來我們來讓它自適應高度,在每個 <div><div style="float:left;"></div><div style="float:right;"></div></div> 後面加上

                     <div style="margin:0 0; pading:0 0; clear:both; display:none;"></div>,你可以試試看。

                     可能這樣在一個複雜頁面會帶來大量的冗餘div, 不妨試試看這樣： <br clear="both"/> 這樣清晰很多了。

                         

   (2). 上面的問題，當在頁面前端如果使用ajax實現異步交互時候，可能用戶在點擊某個按鈕，然後查詢大量的數據上來展示，這樣可能會有個問題，那就是 div不停的在增高，變矮，這樣看得眼花繚亂.所以我們可以統計一些大部分內容加載上來所所用的height，然後我們來設置min-height: **; 這樣用戶大部分時間看到的就是內容的改變，而不是div的上下拉動

 

 IE 的顏色對話框

       BackGround: 

               在html前端設計的時候，有時會碰到設計類的網站，那經常用到的就是更改主體顏色，或者是組件的顏色。這是就會有這樣的需求，有沒有一個比較好的顏色對話框了 ，當然你可以從javascrpt的一些框架中得到，但是並不是所有用戶或者開發人員都喜歡這樣。

       Solution:

<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px" top="400px"></OBJECT>

 

<input id="colorVal" type="text" οnclick="callColorDlg()" />

<script language="javascript">
 var sInitColor = null;


function callColorDlg(){

var sColor = null;

if (sInitColor == null)

      sColor = dlgHelper.ChooseColorDlg();
else

      sColor = dlgHelper.ChooseColorDlg(sInitColor);

sColor = sColor.toString(16);

if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
document.execCommand("ForeColor", false, sColor);


sInitColor = sColor;
document.getElementById("colorVal").value = sColor;

}

 

簡潔的系統顏色拾取對話框出來了，就這麼簡單！而外我們在來拿出系統的字體出來曬曬吧：

<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px" top="400px"></OBJECT>

 

function testFonts()
{
 var a=dlgHelper.fonts.count;

 for (i = 1;i < dlgHelper.fonts.count;i++)
 {
   var f= f  + "  " + dlgHelper.fonts(i)+"<br/>"
 }

  document.getElementById("msg").innerHTML =f;
}

 

 

CSS幾個亮點

多重背景

如：{background: url(bg1.png)no-repeatlefttop,url(bg2.png)no-repeatleftbottom,url(bg3.png)no-repeatrighttop; }

 

文字嵌入

如：

@font-face {
    font-family: 'vanessalovesyoumedium';
    src: url('vanessalovesyou-webfont.eot');
    src: url('vanessalovesyou-webfont.eot?#iefix') format('embedded-opentype'),
         url('vanessalovesyou-webfont.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

 

邊框新特性

在 CSS3 中，border 增加了兩個新的特性，一是邊框圖片，而是在邊框顏色中使用漸變色。

邊框圖片利用 border-image 屬性實現，可以爲一個元素指定一個圖片作爲邊框，代替傳統的線條邊框，它有五個子屬性：

border-image-source

設置邊框圖片的圖片地址，只有設置了這個屬性，纔算是使用了邊框圖片，其值爲 url() 的形式。

border-image-width

該屬性指定邊框厚度，其值可以爲帶單位的長度值，也可以是不帶單位的浮點值或百分比，還可以是“auto”，這時其值爲 border-image-slice 的值，“auto”值很常用，可以方便地做出類似相冊邊框的精緻邊框。

border-image-slice

該屬性指定從上，右，下，左方位來分隔圖像，將圖像分成4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒圖像填充），除非加上關鍵字 fill，其值可以爲數值或百分比。例如：設置 border-image-slice: 20 25 30 35; border-image-slice: auto，則圖像會產生像下圖那樣的四個角：

border-image-outset

該值設置邊框圖片的擴展，相當於在邊框內容加入“padding”。

border-image-repeat

設置用何種方式填充邊框，其值可以爲 stretch、repeat、round、space，stretch 是拉伸方式，repeat、round 和 space 方式都是平鋪方式，但三個之間略有不同，repeat 是直接平鋪圖片，圖片若超出邊框時截斷，round 會動態調整圖片的大小，直到圖片正好可以鋪滿整個邊框，space 則會在圖片之間增加空白，直至圖片正好可以鋪滿整個邊框。

多欄佈局

在 CSS 2.0 中，要實現以上的效果的常見方法是用 div 包含每一個欄的內容，然後對幾個 div 使用浮動。這樣不但增加了幾個無用的 div ，還可能損害了段落原本的語義，而在 CSS3 中，則可以使用以下代碼實現這樣的效果：

#column-demo {
    width: 960px;
    margin: 0 auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 25px;
    -moz-column-gap: 25px;
    column-gap: 25px;
}
#column-demo p, #column-demo h2 {
    margin-bottom: 20px;
    color: #565656;
}
#column-demo h2 {
    font-size: 26px;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

column-count 設置的是欄目的數量，即把內容分爲幾個欄目，

column-gap 設置的是欄目的之間的距離，

column-span 可以把一個元素設置爲橫跨所有欄目，還有一個常用的屬性

 column-width ，用於設置每個欄目的寬帶，若像上例這樣沒有設置 column-width ，則會根據 column-count 自適應分配寬度。