什麼是DIV+CSS
DIV+CSS是一種網頁的布局方法，這一種網頁布局方法有別於傳統的HTML網頁設計語言中的表格（table）定位方式，通過CSS樣式檔案，將網頁頁面內容與表現相分離。
CSS（CascadingStyle Sheets）層疊樣式表，用於定義HTML元素的顯示形式，是W3C推出的格式化網頁內容的標準技術。
優點：
1、使頁面載入得更快：由於將大部分頁面代碼寫在了CSS當中，使得頁面體積容量變得更小。相對於表格嵌套的方式，DIV+CSS將頁面獨立成更多的地區，在開啟頁面的時候，逐層載入。而不像表格嵌套那樣將整個頁面圈在一個大表格裡，使得載入速度很慢。
2、重構頁面修改方便：div+css頁面是將html和css檔案分開的。也就是說一個網頁的內容與表現形式的分離，一般修改小部分css檔案裡css樣式屬性就可以修改真站的樣式版面，如背景顏色、字型顏色、網站寬度等具有table不具備的方便性。
3、降低流量費用：頁面體積變小，瀏覽速度變快，這就使得對於某些控制主機流量的網站來說是最大的優勢了。
缺點：
1、 開發難度大：（1）要求開發div css的技術較高，儘管不是高不可及，比表格定位複雜的多，即使對於網站設計高手也很容易出現問題。（2）div+css還沒有實現所有瀏覽器的統一相容。有時，在IE中顯示正常的頁面，到了Firefox瀏覽器中可能會面目全非。所以div+css需要測試瀏覽器版本也較多，例如：各版本的IE瀏覽器，Firefox，Google
2、開發時間長：div css布局相對table布局開發製作時間長。
3、開發成本相對table高點：因為技術性及時間性就決定了divcss頁面比table頁面成本高。
CSS盒子模型的概念
使用CSS的核心就是使用盒子模型。在日常生活中，我們遇到盒子是用於可裝東西長方形、正方形的盒子，例如鞋盒，禮品盒。而CSS盒子也是裝東西的，比如我們要將文字內容、圖片布局在網頁中。
實際生活中的盒子
CSS中的盒子
我們可以通過CSS的盒子模型修飾內容(content)、填充(padding)、邊框(border)和邊界(margin)，而改變網頁中內容的樣式。
具體執行個體：
DIV+CSS 登入介面代碼實現：
DIV代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><html><head> <title>登入介面</title> <link href="Login.css" rel="stylesheet" type="text/css" /> <!-- 引用CSS樣式表 --></head><body> <form id="form1" runat="server"> <div id="loginfrm"> <h3 class="caption">網站會員登入</h3> <div id="login"> <img src="image/Cup.jpg" alt="登入" class="logo" /> <p>使用者名稱：<asp:TextBox ID="txtUserName" runat="server" CssClass="txtbox"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate ="txtUserName" ErrorMessage="請輸入使用者名稱"></asp:RequiredFieldValidator><!-- 登入驗證控制項 --></p> <p>密 碼：<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" CssClass="txtbox"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate ="txtPwd" ErrorMessage="請輸入密碼" Text="*"></asp:RequiredFieldValidator></p> <p> <asp:Button ID="btnOK" runat="server" Text="確定" /> </p> </div> </div> </form></body></html>
CSS代碼：
* /* 設定所有元素內外邊框為0 */{ margin:0px;}.caption{ margin-left:150px;}.logo{ float:left; margin-right:15px; margin-top:-15px;}body /* 設定字型 */{ font-size:14px;}#loginfrm{ margin:200px 500px; width:400px;}#login{ margin-top:25px;}#login p{ margin-top:20px;}#image{ float:left;}.txtbox{ width:180px;}
：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
