DIV+CSS布局的優勢和弊端

DIV+CSS的優勢
1、符合W3C標準。這保證您的網站不會因為將來網絡應用的升級而被淘汰。
2、對瀏覽者和瀏覽器更具親和力。由于CSS富含豐富的樣式,使頁面更加靈活性,它可以根據不同的瀏覽器,而達到顯示效果的統一和不變形。這樣就支持瀏覽器的向后兼容,也就是無論未來的瀏覽器大戰,勝利的是什么,您的網站都能很好的兼容。
3、使頁面載入得更快。頁面體積變小,瀏覽速度變快,由于將大部分頁面代碼寫在了CSS當中,使得頁面體積容量變得更小。相對于表格嵌套的方式,DIV+CSS將頁面獨立成更多的區域,在打開頁面的時候,逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格里,使得加載速度很慢。
4、保持視覺的一致性。以往表格嵌套的制作方法,會使得頁面與頁面,或者區域與區域之間的顯示效果會有偏差。而使用DIV+CSS的制作方法,將所有頁面,或所有區域統一用CSS文件控制,就避免了不同區域或不同頁面體現出的效果偏差。
5、修改設計時更有效率。由于使用了DIV+CSS制作方法,使內容和結構分離,在修改頁面的時候更加容易省時。根據區域內容標記,到CSS里找到相應的ID,使得修改頁面的時候更加方便,也不會破壞頁面其他部分的布局樣式,在團隊開發中更容易分工合作而減少相互關聯性。
6、搜索引擎更加友好。相對與傳統的table,
采用DIV+CSS技術的網頁,由于將大部分的HTML代碼和內容樣式寫入了CSS文件中,這就使得網頁中代碼更加簡潔,正文部分更為突出明顯,便于被搜索引擎采集收錄。
??? ? ?CSS+DIV網站設計的缺陷
盡管DIV+CSS具有一定的優勢,不過現階段CSS+DIV網站建設存在的問題也比較明顯,主要表現在:
1、對于CSS的高度依賴使得網頁設計變得比較復雜。相對于HTML4.0中的表格布局(table),CSS+DIV盡管不是高不可及,但至少要比表格定位復雜的多,即使對于網站設計高手也很容易出現問題,更不要說初學者了,這在一定程度上影響了XHTML網站設計語言的普及應用。
2、CSS文件異常將影響整個網站的正常瀏覽。CSS網站制作的設計元素通常放在一個或幾個外部文件中,這些文件有可能相當復雜,甚至比較龐大,如果CSS文件調用出現異常,那么整個網站將變得慘不忍睹。
3、對于CSS網站設計的瀏覽器兼容性問題比較突出。雖然搜索說DIV+CSS解決了大部分瀏覽器兼容問題,但是也有在部分瀏覽器中使用出現異常,CSS+DIV還有待于各個瀏覽器廠商的進一步支持。
4、CSS+DIV對搜索引擎優化與否取決于網頁設計的專業水平而不是CSS+DIV本身。CSS+DIV網頁設計并不能保證網頁對搜索引擎的優化,甚至不能保證一定比HTML網站有更簡潔的代碼設計。因為對于搜索引擎而言,網站結構、內容、相關網站鏈接等因素始終是網站優化最重要的指標。
如何更有效、更合理的運用WEB2.0設計標準,這需要很長時間的學習和鍛煉。而如何將DIV+CSS運用的更好,需要通過不斷的實踐和體檢,積累豐富的設計經驗,才能很好的掌握這門技術。

轉載于:https://www.cnblogs.com/zyy820273015/p/8962273.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250394.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250394.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250394.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android Studio --- [學習筆記]TCP(第2彈)、GridView、ScrollView

說明 這篇主要接上一篇Android Studio — > [學習筆記]RadioButton、CheckBox、ImageView、ListView、TCP的三次握手對上面回答的細解,并用JS偽代碼,對TCP三次握手和四次揮手的簡單實現.Android的基本了解到此篇結束,后續會根據具體情況深度學習. 2.y TCP的三次握手和四次揮…

MySQL中varchar最大長度是多少

一. varchar存儲規則: 4.0版本以下,varchar(20),指的是20字節,如果存放UTF8漢字時,只能存6個(每個漢字3字節) 5.0版本以上,varchar(20),指的是20字符,無論存放…

bzoj 1232: [Usaco2008Nov]安慰奶牛cheer【最小生成樹】

有趣 每條邊在算答案的時候被算了二倍的邊權值加上兩個端點的權值&#xff0c;然后睡覺點額外加一次 所以可以用這個權做MST&#xff0c;然后加上點權最小的點 #include<iostream> #include<cstdio> #include<algorithm> using namespace std; const int N1…

JavaScript --- [學習筆記]觀察者模式 理解對象 工廠模式 構造函數模式

說明 本系列(JS基礎梳理)為后面TCP的模擬實現做準備本篇的主要內容: 觀察者模式、工廠模式、構造函數模式 和 對對象的理解 1. 觀察者模式 參考JavaScript設計模式 1.1 消息注冊方法 “將訂閱者注冊的消息推入到消息隊列中” [算法思路] : 在推入到消息隊列時,如果此消息…

java_day19_MVC和配置文件

簡單的MVC設計 MVC的全名是Model View Controller&#xff0c;是模型(model)&#xff0d;視圖(view)&#xff0d;控制器(controller)的縮寫&#xff0c;是一種軟件設計典范。它是用一種業務邏輯、數據與界面顯示分離的方法來組織代碼&#xff0c;將眾多的業務邏輯聚集到一個部件…

Problem I: 打印金字塔

#include<stdio.h> int main() {int n,i,j,k;scanf("%d",&n);for(i1;i<n;i){for(j1;j<n-i;j)printf(" ");for(k1;k<2*i-1;k)printf("*");printf("\n");}return 0; } HINT 用雙重循環做&#xff0c;外循環代表行數&…

webpack --- 發布環境的配置 代碼壓縮 代碼分類

說明 源代碼本篇主要對發布環境的配置說明前面2點是對webpack的一個復習.第3點開始,逐步配置部署代碼 1. Webpack發布的策略 2.1 在實際開發中,一般會有兩套方案: 開發期間的項目:包含了測試文件、測試數據、開發工具、測試工具等相關配置,有利于項目的開發和測試,但是這些文…

salesforce lightning零基礎學習(三) 表達式的!(綁定表達式)與 #(非綁定表達式)

在salesforce的classic中&#xff0c;我們使用{!expresion}在前臺頁面展示信息&#xff0c;在lightning中&#xff0c;上一篇我們也提及了&#xff0c;如果展示attribute的值&#xff0c;可以使用{!v.expresion}展示信息。 lightning在component中解析動態值的時候&#xff0c;…

sqlserver學習3---sql函數

一、SQL DML 和 DDL 可以把 SQL 分為兩個部分&#xff1a;數據操作語言 (DML) 和 數據定義語言 (DDL)。 SQL (結構化查詢語言)是用于執行查詢的語法。但是 SQL 語言也包含用于更新、插入和刪除記錄的語法。 查詢和更新指令構成了 SQL 的 DML 部分&#xff1a; SELECT - 從數據庫…

JavaScript --- [學習筆記] 原型模式

說明 接JavaScript — > [學習筆記]觀察者模式 & 理解對象 & 工廠模式 & 構造函數模式上一篇構造函數模式創建的實例,不同實例的同一個方法是不相等的,為了解決這個問題.出現了原型模式 1. 原型模式 具體做法是,不在構造函數中定義對象實例的信息,而是將這些…

網絡協議各層概述

網絡協議概述 OSI是一個開放性的通信系統互連參考模型&#xff0c;他是一個定義得非常好的協議規范。OSI模型有7層結構&#xff0c;每層都可以有幾個子層。 OSI的7層從上到下分別是 7 應用層 6 表示層 5 會話層 4 傳輸層 3 網絡層 2 數據鏈路層 1 物理層&#xff1b; 其中高層&…

A start job is running for Raise network interface(5min 13s )問題解決方法

命令&#xff1a;sudo vim /etc/systemd/system/network-online.target.wants/networking.service將里面的TimeoutStartSec5min 修改為TimeoutStartSec2sec 然后重啟系統&#xff0c;就可以生效了&#xff0c;開機速度很快 轉載于:https://www.cnblogs.com/sea-stream/p/98615…

javascript --- 實現對象的深拷貝

淺拷貝和深拷貝 淺拷貝: 只拷貝一層.當對象是復雜數據類型(Object、 Array)時,只拷貝引用深拷貝: 多層拷貝.復雜數據類型,會重新分配內存空間. 實現淺拷貝的2種方法 使用for ... in 實現 var obj {name: marron,age: 18,msg: {sex: "1" } } var o {}; for(let …

Qt與FFmpeg聯合開發指南(二)——解碼(2):封裝和界面設計

與解碼相關的主要代碼在上一篇博客中已經做了介紹&#xff0c;本篇我們會先討論一下如何控制解碼速度再提供一個我個人的封裝思路。最后回歸到界面設計環節重點看一下如何保證播放器界面在縮放和拖動的過程中保證視頻畫面的寬高比例。 一、解碼速度 播放器播放媒體文件的時候播…

Bzoj1051 受歡迎的牛

每一頭牛的愿望就是變成一頭最受歡迎的牛。現在有 N 頭牛&#xff0c;給你 M 對整數 (A,B)&#xff0c;表示牛 A 認為牛 B 受歡迎。這種關系是具有傳遞性的&#xff0c;如果 A 認為 B 受歡迎&#xff0c;B 認為 C 受歡迎&#xff0c;那么牛 A 也認為牛 C 受歡迎。你的任務是求出…

node --- 模塊加載機制

1. Node.js中模塊加載機制 1.1 模塊查找規則-當模塊擁有路徑但沒有后綴時 require(./find.js); require(./find);require方法根據模塊路徑查找模塊,如果是完整路徑,直接進入模塊如果模塊后綴省略,先找同名JS文件再找同名JS文件夾 require(./find); // 以上會先找到命令行目錄…

51Nod 蜥蜴和地下室(搜索)

哈利喜歡玩角色扮演的電腦游戲《蜥蜴和地下室》。此時&#xff0c;他正在扮演一個魔術師。在最后一關&#xff0c;他必須和一排的弓箭手戰斗。他唯一能消滅他們的辦法是一個火球咒語。如果哈利用他的火球咒語攻擊第i個弓箭手&#xff08;他們從左到右標記&#xff09;&#xff…

多線程——實現Runnable接口實現一個多線程

實現Runnable接口實現一個多線程 Runnable接口源碼&#xff1a; package java.lang; //Runnable接口源碼只有一個run方法 public interface Runnable {public abstract void run(); } 實現Runnable的兩個多線程類&#xff1a; public class RunnableThread1 implements Runnabl…

javascript --- 文件上傳即時預覽 閉包實現多圖片即時預覽

使用javascript原生功能實現,點擊上傳文件,然后再網頁上顯示出來 1. 初級顯示 1.1 準備一個input標簽和一個img標簽 <input typefile id"file"> <img id"preview" src"">1.2 js代碼如下 // 將上傳的圖片顯示到頁面上function sho…

第一次作業:深入Linux源碼分析進程模型

一.進程的概念 第一&#xff0c;進程是一個實體。每一個進程都有它自己的地址空間&#xff0c;一般情況下&#xff0c;包括文本區域&#xff08;text region&#xff09;、數據區域&#xff08;data region&#xff09;和堆棧&#xff08;stack region&#xff09;。文本區域存…