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