.此時(shí)我們不能定義行內(nèi)元素的寬度,為了解決這個(gè)問題我們可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素。
方法如下:span { width: 150px; display: block }
問題三,讓固定寬度的頁面居中問題
網(wǎng)站中CSS為了讓頁面在瀏覽器居中顯示需要相對(duì)定位外層div,然后把margin設(shè)置為auto.
#wrapper {
margin: auto;
position: relative;
}
問題四,圖片替換技術(shù)問題
在web中用文字總比用圖片做標(biāo)題好一些,因?yàn)槟壳暗乃阉饕孢€無法識(shí)別圖片中的內(nèi)容,所以網(wǎng)站設(shè)計(jì)中文字是對(duì)屏幕閱讀機(jī)和SEO都是非常友好的。
HTML示例:
Main heading one
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
在上面的HTML代碼中可以看到我們對(duì)標(biāo)題使用了標(biāo)準(zhǔn)的作為標(biāo)簽并且用css來將文本替換為圖片,text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對(duì)于瀏覽者來說就看不見了.
問題五,最小寬度的問題
網(wǎng)站設(shè)計(jì)中IE6瀏覽器的一個(gè)問題就是不支持min-width屬性,但是min-width又是相當(dāng)有用的,特別是對(duì)于彈性模板來說,它們有一個(gè)100%的寬度,min-width可以告訴瀏覽器何時(shí)就不要再壓縮寬度了。除IE6外其他的瀏覽器只需要一個(gè)min-width: Xpx;例如:
.container {
min-width:300px;
}
為了讓他在IE6下工作, 我們需要一些額外的工作.如開始的時(shí)候我們需要?jiǎng)?chuàng)建兩個(gè)div,一個(gè)包含另一個(gè),做法示例如下:
然后我們需要定義外層div的min-width屬性,如:
.container {
min-width:300px;
}
這時(shí)候我們需要包含如下的代碼:
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
問題六,隱藏水平滾動(dòng)條問題
網(wǎng)站設(shè)計(jì)中CSS為了避免出現(xiàn)水平滾動(dòng)條,在body里加入overflow-x:hidden .
body { overflow-x: hidden; }
當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí),這個(gè)技巧將非常有用。
標(biāo)題名稱:網(wǎng)頁設(shè)計(jì)之CSS中常見的六大問題解析
URL地址:http://aaarwkj.com/news/144315.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、企業(yè)網(wǎng)站制作、外貿(mào)建站、靜態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷、軟件開發(fā)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)