用css網站布局之十步實錄?。ㄊ?/h1>

2020-03-22 19:22:51

字體：大 中 小

來源：轉載

供稿：網友

要繼續此教程需要IE的以前的版本進行測試，絕大部分用戶使用的是IE6.0，因此您幾乎不需要看下去了。IE中主要出問題的是IE5和IE5.5,如其不能識別css中margin值為auto，要實現層的中間對齊，需加入：Example Source Code
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}
但是這樣設置之后，網站的content層的文本也變成中間對齊了，我們需要讓其向左對齊，加入：Example Source Code
#page-container {
width: 760px;
margin: auto;
text-align: left;}
關于頁腳的BUG，將版權內容加入新的#copyright層中，在html中加入：Example Source Code
div id= copyright
Copyright Enlighten Designs br /
Powered by a xhref= # Enlighten Hosting /a and
a xhref= # Vadmin 3.0 /a
/div
在css文件中加入，并將#footer的padding-top: 13px;移除：Example Source Code
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}
最后要解決的BUG是當光標在導航條的被選列表項目鏈接上懸停時(如在about的網頁，body的類為about，但我們將光標移到導航條的about圖片上時)，背景圖片消失了，這就需要加入：Example Source Code
body.about li#about,
body.about li#about a,
body.about li#about a:hover,
body.services li#services,
body.services li#services a,
body.services li#services a:hover,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.portfolio li#portfolio a:hover,
body.contact li#contact,
body.contact li#contact a,
body.contact li#contact a:hover {
background-position: 0 -100px;
}
本教程到此結束。感謝原作者Steve Dennis，感謝Jorux的精心翻譯！ 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用CSS3偽類target如何制作tab選項卡效果

下一篇：CSS里的min-height和max-height怎么使用

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表

學習交流

更多

• 

  MBR怎么轉換為GPT？硬盤MBR格式

• 

  威剛發布新一代Ultimate SU900

MBR怎么轉換為GPT？硬盤MBR格式轉換成GPT格

MBR怎么轉換為GPT？硬盤MBR格式轉換成GPT格式教程...

• 快剪輯自帶水印可以消除，只需簡單設置12-24
• 飛鴿傳書好友列表顯示異常？或許是這兩個原因12-24
• 下載網頁中視頻的方法~~12-24
• 教你用拼音打出來不認識的字~~12-24

• Nginx服務器上安裝并配置PHPMyAdmin的教程03-22
• Mac配置虛擬主機詳細過程03-22
• 關于集群、分布式和負載均衡的區別有哪些？（03-22
• phpMyAdmin4.4.10安裝03-22
• phpmyadmin導入數據最大限制2048KB的解決方03-22

熱門圖片

更多

• 

  校園甜美的背影，洋溢著青春爛漫的回憶

• 

  芭蕾舞蹈表演，真實美到極致

• 

  春天的魅力：綠楊煙外曉寒輕

• 

  春節臨近，各地春節彩燈高高掛

• 

  肉食主義者的最愛美食烤肉圖片

• 

  夏日甜心草莓美食圖片

• 

  人逢知己千杯少，喝酒搞笑圖集

• 

  搞笑試卷，學生惡搞答題

猜你喜歡的新聞

• 美團云5月31日起停止對用戶服務
• 中國移動2019年凈利潤1066億元 超出預期
• 國內油價重回“5元時代” 92號汽油每升下調
• 騰訊在天津成立新公司 斥資2億元人民幣
• 軟銀集團或放棄收購WeWork 30億美元收購要
• 全球十大IC設計公司最新排名
• 光刻機霸主阿斯麥(ASML)：控制芯片產業鏈上游
• 博通狀告Netflix侵犯專利：電視沒人看，我們受
• 比爾·蓋茨退出公司董事會 將繼續擔任公司
• 微軟被曝高危漏洞“永恒之黑” 或波及全球1

猜你喜歡的關注

• 使用YUI+Ant 實現JS CSS壓縮
• css，js實現聽話的骰子源碼
• 分享一個css特效--向右循環閃過
• CSS讓網頁里的提交按鈕變得更漂亮
• CSS屬性選擇器的四種格式
• CSS3：background-image可使用多背景圖
• 學習CSS的背景圖像屬性background_0
• CSS中常用的單位_0
• CSS教程-視覺語義不等于基于表現的類
• 關于html和css以及javascript等其他的注釋