網(wǎng)站設(shè)計中CSS是一種被稱為層疊樣式表的編程開發(fā)語言,主要是有來表現(xiàn)HTML和XML等文件樣式的計算機語言。CSS的功能很強大,不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。此外,CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力。
在進(jìn)行企業(yè)網(wǎng)站設(shè)計過程中很多設(shè)計師都會使用到CSS,但是有時候因為各種原因很遇到一些被忽略或是不好解決的問題,此時我們就需要找一個可靠的外授來幫忙。創(chuàng)新互聯(lián)在這方面的工作經(jīng)驗已有13年,可以很專業(yè)的為大家解決關(guān)于網(wǎng)站編程語言、網(wǎng)站界面設(shè)計方法等關(guān)于網(wǎng)站設(shè)計的問題,如有需要可以隨時聯(lián)系本站的在線客服幫您解決。
接下來
創(chuàng)新互聯(lián)小編就為大家分享一下關(guān)于
網(wǎng)頁設(shè)計之CSS中常見的六大問題解析,希望可以對企業(yè)的網(wǎng)站設(shè)計細(xì)節(jié)分析問題有所幫助。
問題一,移除超鏈接的虛線(僅對FF有效)問題
FireFox下,當(dāng)我們點擊一個超鏈接時會在外圍出現(xiàn)一個虛線的輪廓的問題,這個問題很容易解決,我們只需要在標(biāo)簽樣式中加入以下代碼即可。
outline:none .
a{
outline: none;
}
問題二,給行內(nèi)元素定義寬度問題網(wǎng)站中CSS編輯中如果我們在給一個行內(nèi)元素定義寬度時,那么它只是在IE6下有效.所有的HTML元素要么是行內(nèi)元素要么就好是塊元素。其中內(nèi)元素包括:<span>, <a>, <strong>和<em>;塊元素包括:<div>, <p>, <h1>, <form>和<li>.此時我們不能定義行內(nèi)元素的寬度,為了解決這個問題我們可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素。
方法如下:span { width: 150px; display: block }
問題三,讓固定寬度的頁面居中問題網(wǎng)站中CSS為了讓頁面在瀏覽器居中顯示需要相對定位外層div,然后把margin設(shè)置為auto.
#wrapper {
margin: auto;
position: relative;
}
問題四,圖片替換技術(shù)問題在web中用文字總比用圖片做標(biāo)題好一些,因為目前的搜索引擎還無法識別圖片中的內(nèi)容,所以網(wǎng)站設(shè)計中文字是對屏幕閱讀機和
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代碼中可以看到我們對標(biāo)題使用了標(biāo)準(zhǔn)的<h1>作為標(biāo)簽并且用css來將文本替換為圖片,text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對于瀏覽者來說就看不見了.
問題五,最小寬度的問題網(wǎng)站設(shè)計中IE6瀏覽器的一個問題就是不支持min-width屬性,但是min-width又是相當(dāng)有用的,特別是對于彈性模板來說,它們有一個100%的寬度,min-width可以告訴瀏覽器何時就不要再壓縮寬度了。除IE6外其他的瀏覽器只需要一個min-width: Xpx;例如:
.container {
min-width:300px;
}
為了讓他在IE6下工作, 我們需要一些額外的工作.如開始的時候我們需要創(chuàng)建兩個div,一個包含另一個,做法示例如下:
<div class="container">
<div class="holder">Content</div>
</div>
然后我們需要定義外層div的min-width屬性,如:
.container {
min-width:300px;
}
這時候我們需要包含如下的代碼:
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
問題六,隱藏水平滾動條問題網(wǎng)站設(shè)計中CSS為了避免出現(xiàn)水平滾動條,在body里加入overflow-x:hidden .
body { overflow-x: hidden; }
當(dāng)你決定使用一個比瀏覽器窗口大的圖片或者flash時,這個技巧將非常有用。
當(dāng)前標(biāo)題:網(wǎng)頁設(shè)計之CSS中常見的六大問題解析
文章路徑:http://jinyejixie.com/news15/144315.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、全網(wǎng)營銷推廣、網(wǎng)站收錄、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)