PHP全棧開發（四）: HTML 學習（2. div 布局）
阿新 • • 發佈：2018-08-05
樣式 nbsp oat clas 控制 color 兩個 如果 排列
無序列表，有序列表，自定義列表
無序列表是ul表示，每個元素用li表示
有序列表是ol表示，每個元素用li表示
<ul> <li>首頁</li><li>通知</li><li>訂單</li> </ul>
列表默認是縱向排列的，如果需要控制列表的樣式，可以使用CSS來進行樣式控制
區塊元素<div>
使用區塊標簽來進行布局。古老的對網頁進行布局的方法是使用表格，現在我們一般不采用表格來進行布局，而使用區塊元素div
<body> <div id="container" style="width:1200px; height:800px; background-color:gray;"> <div id="header" style="background-color:red;"> 管理系統 </div> <div id="menu-top" style="background-color:green;"> 菜單 </div> <div id="menu-left" style="background-color:yellow; width:100px; height:200px; float:left; "> 菜單 </div> <div id="content" style="background-color:blue; width:1000px; height:200px; float:left; "> 內容在這裏</div> </div> </body>
可以看到我們先定義了一個容器div，也就是container，然後這個容器的寬度是1200px，高度是800px，背景是灰色的，如果不規定高度是話，那麽會根據它裏面的內容來作為高度。
這個容器裏面一共有四個區塊，一個是內容content，用作主要的顯示，一個是頭部，header，用於放網頁的首標題。
一個左邊的標題欄，這個標題欄的id是menu-left，這個區塊的寬度是100，加上content的寬度1000，比容器container的寬度少了100，所以在content的最右邊還會有一條100px的灰色邊。
因為header沒有規定寬度，因此它跟隨的是container的寬度。
span標簽是內聯元素，可以用作區塊元素內的文本容器。
內聯元素和區塊元素是兩個相反的概念。
PHP全棧開發（四）: HTML 學習（2. div 布局）