免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

采用DIV+CSS布局的好處

2023-12-30    分類: 網站建設

1、簡介:為何使用表格排版是不明智的? 表格之所以存在于 HTML 中,只是為了一個目的:顯示表格狀的數據。然而此后的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止,表格仍然主導著視覺豐富的網站的設計方式,但它卻阻礙了一種更好的、更有親和力的、更靈活的,而且功能更強大的網站設計方法。 2、概覽:這對我有什么用處?

我們將告訴你這樣一種工作方式,它會:

使你的頁面載入得更快 降低你的流量費用 讓你在修改設計時更有效率而代價更低 幫助你的整個站點保持視覺的一致性 讓你的站點可以更好地被搜索引擎找到 使你的站點對瀏覽者和瀏覽器更具親和力 在世界上越來越多人采用 Web 標準時,它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。

3、表格帶來的問題

把格式數據混入你的內容中。 這使得文件的大小無謂地變大,而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。 帶寬并非免費。 這使得重新設計現有的站點和內容極為消耗勞力 (且昂貴)。 這還使我們保持整個站點的視覺的一致性極難,花費也極高。 基于表格的頁面還大大降低了它對殘疾人和用手機或 PDA 瀏覽者的親和力。

4、過渡性的設計

使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。

使用 link 和 @import 來載入樣式。前者用于早期瀏覽器,后者給現在的瀏覽器。

<link href="../../basic.CSS" rel="stylesheet" type="text/CSS">

<style type="text/CSS" media="screen"><!-- @import url(modern.CSS) screen; --></style>

5、結構化標記:所寫即所想,所想即所寫

即便書寫 CSS 很簡單,使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。

我們排版時考慮的不是“這個東西放在這兒,那個東西放在那兒”,而是頁面中信息的類別和信息的結構。

我們用 <h1> 標記來標示最重要的頭條;次一級的條目則用 <h2> 來標記,以此類推;而段落則放在 <p> 標記中。

這就是我們稱之為“結構標記”或“語義標記”的東西。

你的內容將不放在表格和表格元素中,取代它們的是 div 元素。還要給你的 div 元素安排一個 id 或 class,不過這是為了描述它們的內容或功能,而非它們的外觀。

當你把某個對象設為斜體時,大概要么就是想強調它,要么是想 引用某個書中標題吧? 如果是前者,應該用 <em>;如果是后者,其實得用 <cite>。

如果某個對象被標記為粗體,事實上它應該被標記的是, <strong>。

如果你希望在某處添加一個換行,這大概是開始了一個新的開頭。如果不是開頭,會不會是某種在你的站點中出現過的class (類型)?在上面兩種情況下,你都應該用 CSS 替換 <br>。

.foo {display:block}

考慮你需要導航的內容是一些無序的鏈接這種情況:

用 <ul> 標簽來編輯它們。

link1 link2 link3 link4 link5 水平導航條 我們可以用 CSS 來控制這個列表顯示在網頁上的外觀。

通過使用 display:inline 我們可以創建水平導航條。

link1 link2 link3 link4 link5 這是上面這個導航條用到的代碼:

#nav1{ margin-top: 1em; margin-bottom: 0.5em; }

#nav1 ul { background-color: silver; text-align: center; margin-left: 0; padding-left: 0; border-bottom: 1px solid gray }

#nav1 li { list-style-type: none; padding: 0.25em 1em; border-left: 1px solid white;

display: inline }

#nav1 li:first-child { border: none; }

垂直導航條 link1 link2 link3 link4 link5 這是垂直導航條的代碼:

#nav2 { background-color: silver; border: solid 1px gray; width: 8em }

#nav2 ul { list-style-type: none; margin: 0; padding: 0; border: none }

#nav2 li { margin: 0; padding: 0.25em 0.5em 0.25em 1em; border-top: 1px solid gray; width: 100%; display: block }

HTML>body #nav2 li { width: auto; }

#nav2 li:first-child { border: none }

6、從玩弄表格技巧到遵循 Web 標準:通盤考慮

如果你已經把站點的內容分好了類,那么是時候分析每個頁面,把它們按照邏輯關系進行分解了。

主導航條 子導航條 頁眉與頁腳 內容 相關信息 其他 注意分析由嵌套表格、空白分隔符和邊框元素組成的表格結構 (因為我們希望把它們替換為用 div 標記組織的那種簡單得多的表格結構)。

一旦你分析好頁面的結構,就可以著手揭開表象,分析你現在的頁面代碼中可以轉換成結構化標記的那些地方。

作為一個完美主義者,消滅所有的 <font> 標記和間隔 GIF 吧! 同樣的,一并搞定 <b> 和 <br> 標記。 去除表格中的那些外觀標記 (bgcolor, background, 等等)。 把純粹用來表示外觀的那些 CSS 調用 (比如 <span class="header">) 改成結構化的標記。

7、把描述外觀的標記改為描述結構的標記

你可以使用“查找加替換”(或者正則表達式),不過最好的方法還是在瀏覽器里打開這個頁面,然后把文本復制粘貼到你的 HTML 編輯器里。

關鍵還是要用結構化的方式來思考!僅僅把 <b> 標記替換為 <strong> 是遠遠不夠的。

最重要的條目是哪個?用 <h1> 來標記它。次要一點的就用 <h2>,依此類推。用 <p> 來標記段落。把導航條標記為無序列表。

選定一個 DOCTYPE 來使用。(我們推薦 XHTML transitional,除非你是此道高手,否則別用 XHTML strict。)

8、把你的頁面合理分布在的 div 中

把你的主導航條放在一個 id 屬性設為 mainnav 的 div 中,子導航條則放在一個 id 或者 class 是 subnav 的 div 中。而頁腳類似這個形式:<div id="footer">,至于整個頁面,它被放在 <div id="content"> 里邊。

即便現在它還不怎么討人喜歡,但只要你開始給樣式表添加規則,它就會馬上變得可愛起來。

9、是開始自己編寫 CSS 的時候了

首先,給每個 div 設置一個邊界。例如: div {border: 1px dotted gray; padding: .5em} 這可以幫助你完完整整地看到里邊的內容,也不再需要卷動屏幕了。

首先為以定義的元素編寫 CSS (<HTML>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)

盡量運用上下文相關或者有遞歸下降結構的選擇符。這可以使得你的標記更清晰。例如:#subnav li {border: 1px solid black; padding: .5em; display: inline} 將能夠只能影響你的子導航欄的 div 中的列表項。

在盡可能多的瀏覽器下進行測試,畢竟你可以讓朋友幫助你用它們自己的瀏覽器測試。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司!

網頁名稱:采用DIV+CSS布局的好處
URL網址:http://m.newbst.com/news4/311154.html

成都網站建設公司_創新互聯,為您提供移動網站建設品牌網站制作ChatGPT網站排名品牌網站設計網站設計

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

微信小程序開發