在網站設計中HTML的布局是一個常見的問題。
一般採用HTML+CSS的方法，把 CSS 代碼存放到外部樣式表中，那麼網站會更易於維護。
經常使用的兩個HTML元素如下：
HTML <div> 元素
HTML <div> 元素是區塊層級元素，它是可用於組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由於它屬於區塊層級元素，瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設定樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的資料。
HTML <span> 元素
HTML <span> 元素是內嵌元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於為部分文本設定樣式屬性。
比如下面這個使用div控制元素的例子：
<html><head><style type="text/css">div#container{width:500px}div#header {background-color:#99bbbb;}div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}div#footer {background-color:#99bbbb; clear:both; text-align:center;}h1 {margin-bottom:0;}h2 {margin-bottom:0; font-size:14px;}ul {margin:0;}li {list-style:none;}</style></head><body><div id="container"><div id="header"><h1>Main Title of Web Page</h1></div><div id="menu"><h2>Menu</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div><div id="content">Content goes here</div><div id="footer">Copyright Call.Me.Why</div></div></body></html>
結果如下：
比如我們要設定這樣一種布局：
也就是主體內容略置中，但是內部內容靠左對齊，
只需要在body的css樣式中加上：test-align:center
然後給這段文字套上div並且idd css這樣寫：
#sign_ok{width:60%;margin-left: auto;margin-right: auto;text-align:left;}
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
