top
icon-mail-alt
phone
X
English
Chinese
span
span
span
關於奈思
公司沿革
經營理念
服務項目
網頁形象設計
程式開發
RWD響應式網頁設計
網路開店
關鍵字廣告
虛擬主機
網域申請
線上金流
Nice 簡訊平台
牆壁彩繪
網頁設計作品
電子商務
企業網站
活動網站
系統工具
飲食網站
設計師官網
教育機構
landing page
RWD響應式設計
站長工具
SEO優化 - 標題標籤
SEO優化 - 描述標籤
SEO優化 - 替代文字
SEO優化 - 綜合分析
QR CODE 產生器
我的 IP 查詢
螢幕解析度查詢
部落格
標籤
SEO搜尋優化
電子郵件行銷
前端設計師技術分享
PHP網頁設計教學
網頁設計教學
網路產業
nice設計
精選文章
內部消息
聯絡我們
首頁
›
部落格
›
精選文章
網頁設計之CSS加DIV佈局
分類
精選文章
發佈日期
2009 , 10 , 16
觀看人數
14588
回應
0
覺得文章不錯的話,' 幫我們分享一下吧!
Share via
<
d
i
v
>
<
p
>
<
s
t
r
o
n
g
c
l
a
s
s
=
"
k
e
y
w
o
r
d
"
>
網頁設計
中CSS佈局是很重要的部分,下面介紹幾種檢查調試CSS
網頁設計
佈局的有效方法。
<
o
l
>
檢查HTML元素是否有拼寫錯誤、是否忘記結束標記,即使是網頁設計老手也經常會弄錯div的嵌套關係。
檢查CSS是否書寫正確,檢查一下有無拼寫錯誤、是否忘記結尾的 }等。
用刪除法確定錯誤發生的位置,如果錯誤影響了整體網頁設計佈局,則可以逐個刪除div塊,直到刪除某個div塊後顯示恢復正常,即可確定錯誤發生的位置。
利用border屬性確定出錯元素的佈局特性,使用float屬性佈局一不小心就會出錯。這時為元素添加border屬性確定元素邊界,錯誤原因即水落石出。
float元素的父元素不能指定clear屬性,MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素佈局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。
float元素務必指定width屬性,很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要為其指定width屬性。另外指定元素時盡量使用em而不是px做單位。
float元素不能指定margin和padding等屬性,IE在顯示指定了margin和padding的float元素時有bug。因此網頁設計時不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。
float元素的寬度之和要小於100%如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。
是否重設了默認的樣式?某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在網頁設計前首先將全體的margin、padding設置為0、列表樣式設置為none等。
是否忘記了寫DTD?如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那麼可以檢查一下頁面開頭是不是忘了寫下面這行DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd
">
<
/
o
l
>
<
/
d
i
v
>
分類
精選文章
發佈日期
2009 , 10 , 16
觀看人數
14588
回應
0
覺得文章不錯的話,' 幫我們分享一下吧!
Share via
Previous post
Next post
Leave a reply
名稱
Email
Post
0
Comments
X
搜尋
關於
歡迎奈思創藝網頁設計的部落格 , 這裡有許多我們長年累積的網頁設計相關經驗文章分享 , 以及隨時更新發佈網路產業相關訊息!
Design view
部落格
SEO搜尋優化
電子郵件行銷
前端設計師技術分享
PHP網頁設計教學
網頁設計教學
網路產業
nice設計
精選文章
內部消息
Search by tags
Web Design
Choice
design
seo優化
ui / ux
PHP Teaching
Specialty
frontend
html
css
jquery
網路產業
網頁設計
PHP
Google
Facebook
網頁設計教學
關鍵字
搜尋引擎
W3C
Flash
標籤
Adword
web2.0
搜尋引擎
Yahoo
Twitter
Ajax
JavaScript
Chrome
網站
電子報
Apache
RWD
阿里巴巴
B2B
前端設計
video
免費素材
3D
ssl憑證
資訊安全
scss
行銷
電子報行銷
SEO
搜尋意圖
Recent
2024年 奈思員工旅遊通知
May 23, 2024
奈思創藝~ 祝大家新的一年, 心想龍事成,全家龍平安!
Jan 30, 2024
SEO戰略全解析:白帽、灰帽與黑帽方法的比較與應用
Nov 27, 2023
奈思創藝~ 祝大家中秋佳節快樂!!!
Sep 28, 2023
Google Ads 廣告將不再支援目前用在一個或多個「轉換」上的計算方式
Sep 18, 2023
最多人瀏覽
三個免費影片素材網站 - 提供上千部高CP質影片- 激推!!
2017-05-15
(初學) 網頁設計之HTML語法教學 - 基本介紹
2010-06-05
[網頁設計教學] 網頁健康新概念 Part 1:Layered Semantic Markup ( LSM )
2011-01-28
配色高手!6條網頁設計配色原則
2014-08-15
對比色該怎麼配
2014-09-15
彙整
2024 (2)
2023 (18)
2021 (1)
2020 (10)
2019 (2)
2018 (3)
2017 (12)
2016 (20)
2015 (8)
2014 (50)
2013 (25)
2012 (2)
2011 (24)
2010 (45)
2009 (53)
2008 (2)
2007 (1)
Facebook
奈思創藝
瀏覽人次
Total traffic 2,402,923
Oops, your web browser Javascript is not enabled.
Please enable Javascript in your browser.