- 相關推薦
網站建設怎樣控制大圖片的網頁寬度
網站建設如何讓大圖片不超過網頁寬度?解決圖片超出寬度或撐破p css布局方法，就跟隨百分網小編一起去了解下吧，想了解更多相關信息請持續關注我們應屆畢業生考試網!
1、在文章中發布圖片的時候將圖片編輯縮小
2、通過對對應p的css來設置顯示的圖片最寬寬度
3、通過css對圖片設定寬度。
具體過程：
通過css來控制代碼如下(cmcss是對應父級類名)：
.cmcss {margin: auto;width: 600px;}
.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}這種圖片第一次加載時候圖片不能顯示
直接通過對對應的p內的內容圖片寬度設置代碼如下：
.cmcss img{ width:500px;} 寬度自定，但是不推薦此方法，因為設置后此p布局內的圖片將全部寬度為500px，那樣將造成圖片小的，被放大顯示模糊。
可以通過對圖片設置最寬css可以使用max-width來設置，但是IE6不支持，但是可以使用瀏覽器的css hack來設置代碼如下
.cmcss img{max-width:500px;_width:500px;}
圖片撐破布局原因
1、由于瀏覽器版本低(微軟IE6)
2、沒有設置p布局的寬度
【拓展閱讀】
網站制作用CSS可控制超鏈接樣式，一般分為四個部分：a:active是超級鏈接的初始狀態;a:hover是把鼠標放上去時的狀況;a:link 是鼠標點擊時;a:visited是訪問過后的情況。
CSS控制超鏈接的三種方法
1、通過對應超鏈接外的父級的css類的css樣式來控制超鏈接的樣式
案例超鏈接代碼
CSS
對應CSS代碼
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}
2、通過鏈接內設置類控制超鏈接樣式css方法
案例超鏈接代碼CSS
對應CSS代碼
a.yangshi{color:#333;text-decoration:none; }
a.yangshi:hover {color:#CC3300;text-decoration:underline;}
通過這樣的設置可以控制鏈接內的css類名為“yangshi”超鏈接的樣式
【網站建設怎樣控制大圖片的網頁寬度】相關文章：
網頁大圖片如何設計08-20
網頁設計工具/網頁制作與網站建設08-02
網頁設計：自適應網頁所有屏幕寬度解析06-27
網站建設設計網頁頁腳的建議11-17
網站建設構圖讓網頁設計出彩的技巧和方法07-10
如何建設一個高大上的圖片展示網站07-28
網站制作之網頁設計的三大要素09-06
網頁圖片設計的常用技巧08-12