目前分類:CSS (5)

瀏覽方式: 標題列表 簡短摘要

DIV布局快速入門 徹底弄懂CSS盒子模式

http://www.sina.com.cn 2007年03月19日 08:54 天極yesky

  作者: 唐國輝 出處: 天極yesky

  如果你想嘗試一下不用表格來排版網頁,而是用CSS來排版你的網頁,也就是常聽的用DIV來編排你的網頁結構,又或者說你想學習網頁標準設計,再或者說你的上司要你改變傳統的表格排版方式,提高企業競爭力,那麼你一定要接触到的一個知識點就是CSS的盒子模式,這就是DIV排版的核心所在,傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容,改用CSS排版后,就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔,更新方便,能兼容更多的瀏覽器,比如PDA設備也能正常瀏覽,所以放棄自己之前鐘愛的表格排版也是值得的,更重要的是CSS排版網頁的優勢遠遠不只這些,本人在這里就不多說,自己可以去搜尋相關資訊。

   理解CSS盒子模型

  什麼是CSS的盒子模式呢?為什麼叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。

sleepingwolf 發表在 痞客邦 PIXNET 留言(2) 人氣()

●文字排版相關CSS語法

語 法 參 數

顯 示

font-family: 標楷體; 設定顯示的字型
font-size: 10px; 設定顯示的字體大小
font-style: italic; 設定字型為斜體
font-weight: bold; 設定字體為粗體
font-variant: small-caps; 將小寫換為大寫smalltobig
text-indent: 24pt;

段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排

letter-spacing: 10pt; 字元間距
line-height: 50px;

設定行高

sleepingwolf 發表在 痞客邦 PIXNET 留言(0) 人氣()

基本架構

<HTML>
<HEAD>
<!-- 文件檔頭 -->
<TITLE>文件標題</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="秒數; URL=新的網頁.htm">

sleepingwolf 發表在 痞客邦 PIXNET 留言(0) 人氣()

Feb 16 Sat 2008 15:07
〞CSS 參數應用
本文引用自 neomi - 筆記║Css 參數應用

應用說明:
複製程式碼到網頁裡的</HEAD>之前即可! ◆基本語法屬性一覽:

sleepingwolf 發表在 痞客邦 PIXNET 留言(0) 人氣()

一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.

1, !important

隨著IE7對!important的支援, !important 方法現下只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
<style>

sleepingwolf 發表在 痞客邦 PIXNET 留言(1) 人氣()