網(wǎng)頁(yè)設(shè)計(jì)之CSS中常見(jiàn)的六大問(wèn)題解析

網(wǎng)站設(shè)計(jì)中CSS是一種被稱為層疊樣式表的編程開發(fā)語(yǔ)言，主要是有來(lái)表現(xiàn)HTML和XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS的功能很強(qiáng)大，不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。此外，CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

在進(jìn)行企業(yè)網(wǎng)站設(shè)計(jì)過(guò)程中很多設(shè)計(jì)師都會(huì)使用到CSS，但是有時(shí)候因?yàn)楦鞣N原因很遇到一些被忽略或是不好解決的問(wèn)題，此時(shí)我們就需要找一個(gè)可靠的外授來(lái)幫忙。創(chuàng)新互聯(lián)在這方面的工作經(jīng)驗(yàn)已有13年，可以很專業(yè)的為大家解決關(guān)于網(wǎng)站編程語(yǔ)言、網(wǎng)站界面設(shè)計(jì)方法等關(guān)于網(wǎng)站設(shè)計(jì)的問(wèn)題，如有需要可以隨時(shí)聯(lián)系本站的在線客服幫您解決。

接下來(lái)創(chuàng)新互聯(lián)小編就為大家分享一下關(guān)于網(wǎng)頁(yè)設(shè)計(jì)之CSS中常見(jiàn)的六大問(wèn)題解析，希望可以對(duì)企業(yè)的網(wǎng)站設(shè)計(jì)細(xì)節(jié)分析問(wèn)題有所幫助。

問(wèn)題一，移除超鏈接的虛線（僅對(duì)FF有效）問(wèn)題

FireFox下,當(dāng)我們點(diǎn)擊一個(gè)超鏈接時(shí)會(huì)在外圍出現(xiàn)一個(gè)虛線的輪廓的問(wèn)題，這個(gè)問(wèn)題很容易解決，我們只需要在標(biāo)簽樣式中加入以下代碼即可。

outline:none .
a{
outline: none;
}
問(wèn)題二，給行內(nèi)元素定義寬度問(wèn)題
網(wǎng)站中CSS編輯中如果我們?cè)诮o一個(gè)行內(nèi)元素定義寬度時(shí)，那么它只是在IE6下有效.所有的HTML元素要么是行內(nèi)元素要么就好是塊元素。其中內(nèi)元素包括：<span>, <a>, <strong>和<em>；塊元素包括：<div>, <p>, <h1>, <form>和<li>.此時(shí)我們不能定義行內(nèi)元素的寬度，為了解決這個(gè)問(wèn)題我們可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素。
方法如下：span { width: 150px; display: block }
問(wèn)題三，讓固定寬度的頁(yè)面居中問(wèn)題
網(wǎng)站中CSS為了讓頁(yè)面在瀏覽器居中顯示需要相對(duì)定位外層div，然后把margin設(shè)置為auto.
#wrapper {
margin: auto;
position: relative;
}
問(wèn)題四，圖片替換技術(shù)問(wèn)題
在web中用文字總比用圖片做標(biāo)題好一些，因?yàn)槟壳暗乃阉饕孢€無(wú)法識(shí)別圖片中的內(nèi)容，所以網(wǎng)站設(shè)計(jì)中文字是對(duì)屏幕閱讀機(jī)和SEO都是非常友好的。
HTML示例:
<h1><span>Main heading one</span></h1>CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
在上面的HTML代碼中可以看到我們對(duì)標(biāo)題使用了標(biāo)準(zhǔn)的<h1>作為標(biāo)簽并且用css來(lái)將文本替換為圖片，text-indent屬性將文字推到了瀏覽器左邊5000px處，這樣對(duì)于瀏覽者來(lái)說(shuō)就看不見(jiàn)了.
問(wèn)題五，最小寬度的問(wèn)題
網(wǎng)站設(shè)計(jì)中IE6瀏覽器的一個(gè)問(wèn)題就是不支持min-width屬性，但是min-width又是相當(dāng)有用的,特別是對(duì)于彈性模板來(lái)說(shuō)，它們有一個(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 class="container">
<div class="holder">Content</div>
</div>
然后我們需要定義外層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;
}
問(wèn)題六，隱藏水平滾動(dòng)條問(wèn)題
網(wǎng)站設(shè)計(jì)中CSS為了避免出現(xiàn)水平滾動(dòng)條，在body里加入overflow-x:hidden .
body { overflow-x: hidden; }
當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí),這個(gè)技巧將非常有用。

當(dāng)前標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)之CSS中常見(jiàn)的六大問(wèn)題解析
文章路徑：http://www.muchs.cn/news15/144315.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、全網(wǎng)營(yíng)銷推廣、網(wǎng)站收錄、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)