網頁設計中防止頁面被撐開的方法
在我們設計網頁的時候,總會遇到一些不愉快的事情,最常見的莫過於在後臺添加內容後才發現顯示的頁面被撐開,導致網頁極度不美觀。以前大家基本上都是設計表格,網上自然不少對於的解決方法,如今還有div+css標準設計,很少看到相關好的方法,現在把平時找到的防止表格被撐開的好方法總結歸納一下,和大家一起分享。
一、直接在網頁裏設置圖片大小,比如代碼:img src="/uploads/allimg/200907/20090701160532188.jpg" width="600" height="500" border="0",這樣雖然可以限制了圖片大小,但是需要在上傳圖片之前手動修改圖片大小,否則上傳的圖片就會變形。
二、使用如下代碼:img src="/uploads/allimg/200907/20090701160532188.jpg" onload="javascript:if(h600}{zed=true;h=600;}"
這種方法會在調用圖片的時候,自動按比例縮小到指定的寬度,不會引起圖片的變形,並且也不會撐破錶格,但是缺點是,如果圖片太大,在圖片下載過程中,也就是圖片顯示過程中,會先以圖片原大小顯示,這時就會撐破錶格,頁面很難看,二當圖片完全顯示後,圖片又會自動縮小。
三、我們可以針對表格的屬性來限制大小防止被撐開,比如在table width="600" border="0" cellpadding="0" cellspacing="0"裏添加代碼“”,其中“table-layout:fixed; ”是爲了將表格佈局固定住,就可以有效地防止表格被撐開,“word-wrap:break-word; ”是控制換行的.,也就是強制執行換行,這個在文本內容較多的情況下需要使用到,特別是重複的內容出現,不執行換行的話,表格就被撐開了;而“word-break: break-all; ”可以解決IE的框架被英文(非亞洲語言文本行)撐開的問題,但是不會強制換行,只顯示錶格寬度裏的內容。一般情況下只要用到“”就可以。當然,上面調用的語句可以定義在css裏,比如
table {
table-layout: fixed;
word-wrap:break-word;
}
四、用css控製圖片自適應大小,代碼如:
img {
max-width: 600px;
width:expression(h 600 ? "600px" : h);
overflow:hidden;
}
其中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度爲600px,但在IE6中無效;width:600px; 在所有瀏覽器中圖片的大小爲600px,當圖片大小大於600px,自動縮小爲600px,在IE6中有效;而 overflow:hidden; 指將超出設置大小的部分隱藏,避免控制圖片大小失敗而引起的表格撐開變形。
五、最後總結一下最實用的代碼:
如果是表格,請用:
table {
table-layout: fixed;
word-break: break-all;
}
如果是div層,請用:
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上寬度;
overflow: hidden; (讓多出來的不顯示。)
}
相關文章
-
網頁設計添加吸引眼球的首屏頁面的方法
讓我們來討論一下關於網頁設計的中的首屏頁面的一些設計思路了。首屏頁面是用戶初步瀏覽你的網站所接觸的第一視覺,它可以說是你的整體網站設計的門面工程了。無論用戶是從桌面設備,平板電腦還是移動設備訪問你的網站,所 -
頁腳始終保持在頁面底部的網頁佈局方法
導語:用CSS創建一個高度自適應佈局,如何保證頁腳(footer)在內容不超過一屏的情況下始終保持在佈局最下方是一個比較頭疼的事。下面就由本站小編爲大家介紹一下頁腳始終保持在頁面底部的網頁佈局方法,希望對大家能有所幫助 -
網頁設計中的頁面尺寸標準
工作計劃對工作既有指導作用,又有推動作用,搞好工作計劃,是建立正常的工作秩序,提高工作效率的重要手段。下面就由小編爲大家帶來幾篇關於醫院門診部工作計劃範文,歡迎大家閱讀參考。醫院門診部工作計劃範文一一、抓好醫院 -
網頁設計中頁面尺寸標準
在剛開始進行美工設計的人,對網頁設計頁面尺寸一般多大,可能會有疑問。下面是小編爲大家整理的網頁設計中頁面尺寸標準,歡迎參考~對於固定寬度的網站佈局,設計師常用的.分辨率有:760px、780px、920px、950px等,如今大尺寸、 -
網頁設計中的頁面尺寸標準參考
網頁設計中的頁面尺寸會根據不同的功能有不同的標準,下面是小編整理的網頁頁面的尺寸標準介紹吧,歡迎閱讀!對於固定寬度的網站佈局,設計師常用的分辨率有:760px、780px、920px、950px等,如今大尺寸、寬屏幕的顯示器越來越 -
防止網頁Flash廣告被屏蔽的辦法
雖然大部分MM都知道人無完人,但是總是忍不住羨慕那些長相出衆的美女們。女生想要變美其實首先要了解自己的特點,然後選擇適合自己風格的髮型服飾和妝容,以下分享幾款適合額頭窄高顴骨的女生髮型。大部分的美女是需要後天 -
10個優化網頁用戶界面網頁設計的規則
網頁排版設計對訪客有着至關重要的作用,優化排版也是優化用戶界面。所以下面一些規則來幫助你提高對文本內容的可讀性。歡迎大家閱讀!更多相關信息請關注相關欄目!1. 最少使用字體數量使用超過3種不同的字體使網站看起來 -
中秋專業頁面的網頁設計的創意思維
今天小編是向大家分享中秋專業頁面的網頁設計的創意思維,教程真的很不錯,值得大家學習,推薦到腳本之家,有需要的朋友可以參考本文,希望能對大家有所幫助。 -
網頁設計的頁面尺寸標準
網頁設計的工作目標,是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化,在功能限定的情況下,儘可能給予用戶完美的視覺體驗。下面是小編分享的網頁設計的頁面尺寸標準,歡迎大家參考!對於固定寬度的網站佈局,設計 -
網頁設計頁面尺寸的標準大小
在剛開始進行美工設計的人,對網頁設計頁面尺寸一般多大,可能會有疑問。那下面就一起來看看網頁設計頁面尺寸一般是多大吧,以下僅供參考!網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸爲主流, 正