本節主要設計一下內容頁面的側欄部分，分三個小塊。經過思考，側欄會包含一些，而主要部分也會包含，那麼側欄放在左邊可能會和主欄的衝突導致不協調，所以，把側欄更換到右邊。
//實際上，還去掉了高度，讓其自適應
#container
#container
.sidebar
//自適應後，footer 需要 clear:both
#footer
//html 部分
id="container">
class="sidebar">
class="sidebox recommend">
class="tag">
href="###">曼谷(12)a>
href="###">東京(5)a>
href="###">西雙版納(8)a>
href="###">漓江(16)a>
href="###">呼倫貝爾(4)a>
href="###">首爾(9)a>
href="###">巴厘島(15)a>
href="###">土耳其(22)a>
href="###">夏威夷(5)a>
href="###">巴厘島(11)a>
href="###">毛里裘斯(7)a>
href="###">吉普島(4)a>
href="###">希臘(18)a>
href="###">法瑞意(8)a>
href="###">馬爾地夫(9)a>
href="###">紐西蘭(16)a>
href="###">埃及(11)a>
href="###">杜拜(14)a>
href="###">斯里蘭卡(7)a>
href="###">麥哈頓(3)a>
href="###">大阪(15)a>
alt="曼谷-芭提雅 6 日遊">
曼谷-芭提雅 6 日遊figcaption>
alt="馬爾地夫雙魚 6 日遊">
馬爾地夫雙魚 6 日遊figcaption>
alt="海南雙飛 5 日遊">
海南雙飛 5 日遊figcaption>
alt="富山大阪東京 8 日遊">
富山大阪東京 8 日遊figcaption>
alt="法瑞意德 12 日遊">
法瑞意德 12 日遊figcaption>
alt="巴厘島 6 日半遊">
巴厘島 6 日半遊figcaption>
alt="塞席爾杜拜 9 日遊">
塞席爾杜拜 9 日遊figcaption>
alt="花樣土耳其 10 日遊">
花樣土耳其 10 日遊figcaption>
figure>
div>
div>
class="sidebox treasure">
class="box">
href="###"
class="trea1">天氣預報a>
href="###"
class="trea2">火車票查詢a>
href="###"
class="trea3">航空查詢a>
href="###"
class="trea4">地鐵線路查詢a>
div>
div>
aside>
class="list">
list
div>
div>
//css 部分
#container
#container
.sidebar
#container
.sidebox
#container
.sidebox
h2 #container
.tag
#container
.tag
a #container
.tag
a:hover
#container
.figure
#container
.hot
figure
#container
.box
#container
.box
a #container
.box
a.trea1
#container
.box
a.trea2
#container
.box
a.trea3
#container
.box
a.trea4
#container
.list
11 專案實戰 PC 端固定布局 11
預覽圖和首頁差不多。具體 如下 風景欣賞 html 部分 alt 曼谷 芭提雅 曼谷 芭提雅 共 8 張 figcaption alt 馬爾地夫雙魚島 馬爾地夫雙魚島 共 12 張 figcaption alt 海南 海南 共 19 張 figcaption alt 富山 大阪 東京 富山 大阪 東...
07 專案實戰
top 案例1 編寫一鍵部署軟體指令碼 案例2 啟動指令碼 案例3 編寫監控指令碼 案例4 編寫安全檢測指令碼 案例5 編寫進度顯示指令碼 本案例要求編寫指令碼實現一鍵部署nginx軟體 web伺服器 實現此案例需要按照如下步驟進行。步驟一 準備工作 1 判斷yum源是否可用 通過yum repol...
01 專案實戰 移動端流體布局
首先，我們要了解一下測試工具。這裡提供兩種測試工具，一種是 chrome 自帶的移動端測試工具，另一種是 opera mobile 移動端測試工具。這裡主要以 chrome 為準，他模擬了主流的手機，並且引擎是webkit。首先，我們介紹一下解析度，通過 chrome 移動端測試工具可以得知，一般解...