前端設(shè)計(jì)須知：基本的CSS技巧

1.定位

如果你想控制某個(gè)元素在我們網(wǎng)站上的位置，定位是實(shí)現(xiàn)這個(gè)目標(biāo)的關(guān)鍵。如果你認(rèn)為你的瀏覽器是一個(gè)大的包圍盒，定位允許你精確地控制那個(gè)盒子里的元素會(huì)停留在哪里。使用頂部、右、底部和左側(cè)，并帶有一個(gè)像素值來(lái)控制元素停留的位置。

上面的CSS設(shè)置了一個(gè)元素的位置，從瀏覽器的頂部和右邊緣保持20px。您還可以在div中使用定位。

2.選擇器

允許您選擇特定選擇器的所有元素。例如，如果您使用*p，然后添加CSS樣式，那么它將對(duì)文檔中的所有元素執(zhí)行標(biāo)記。這使得你可以很容易地將你的網(wǎng)站的各個(gè)部分作為目標(biāo)。

3.覆蓋所有的風(fēng)格

使用時(shí)需要謹(jǐn)慎，如果您想要為特定的元素覆蓋另一個(gè)CSS樣式，請(qǐng)使用!在css樣式之后很重要。如想要在一個(gè)網(wǎng)站的某個(gè)特定區(qū)域的H2標(biāo)題為紅色而不是藍(lán)色，將使用以下CSS:

4.定心

定心是很棘手的，因?yàn)樗Q于你想要集中的東西。讓我們看一下以內(nèi)容為中心的項(xiàng)目的CSS。

文本

文本以文本對(duì)齊為中心;如果你想讓它左右兩邊，用左邊或者右邊而不是中心。

內(nèi)容

一個(gè)div(或任何其他元素)可以以添加塊屬性為中心，然后使用自動(dòng)邊緣。CSS是這樣的:

所以把“”放在寬度上是因?yàn)槿绻菍挼?，那么如果它是全寬的，不需要定心。很好有固定的寬度，比?0%或550px等等。

5.垂直對(duì)齊

你會(huì)在CSS導(dǎo)航菜單中使用這個(gè)。關(guān)鍵是要使菜單的高度和文本的行高相同。當(dāng)為客戶編輯現(xiàn)有的網(wǎng)站時(shí)，會(huì)經(jīng)?？吹竭@種技術(shù)。這里有一個(gè)例子:

6.懸停效果

它用于按鈕、文本鏈接、站點(diǎn)的bock區(qū)域、圖標(biāo)等等。如果你想改變顏色，當(dāng)有人把鼠標(biāo)懸停在它上面時(shí)，使用相同的CSS，但是添加:鼠標(biāo)懸停在它上，改變樣式。這里有一個(gè)例子:

它會(huì)改變你的h2標(biāo)簽從黑到紅的顏色當(dāng)有人在它上面徘徊時(shí)。使用的好處是:如果它沒(méi)有改變，你不必再次聲明字體大小或重量了。它只會(huì)改變您指定的內(nèi)容。

7.鏈接狀態(tài)

很多設(shè)計(jì)師都忽略了這些樣式，它確實(shí)會(huì)給訪問(wèn)者帶來(lái)可用性問(wèn)題。鏈接偽類(lèi)控制所有尚未點(diǎn)擊的鏈接。訪問(wèn)的pseudo類(lèi)將處理您已經(jīng)訪問(wèn)過(guò)的所有鏈接的樣式。這告訴網(wǎng)站訪問(wèn)者他們已經(jīng)在你的網(wǎng)站上，以及他們還沒(méi)有探索的地方。

8.輕松調(diào)整圖像大小以適應(yīng)

有時(shí)，你會(huì)在縮放比例的情況下，在圖像需要符合一定寬度的情況下進(jìn)行縮放。一個(gè)簡(jiǎn)單的方法是使用很大寬度來(lái)處理這個(gè)。這是一個(gè)例子:

這意味著很大的圖像可能是，并且高度是根據(jù)圖像寬度自動(dòng)計(jì)算的。在某些情況下，你可能還必須指定寬度為。

9.控制部分的元素

使用上面的圖像示例，如果您只想針對(duì)某個(gè)部分的圖像(比如您的博客)，使用一個(gè)類(lèi)作為blog部分，并將其與實(shí)際的選擇器相結(jié)合。這將使你只選擇博客部分的圖像，而不是其他圖像，例如您的徽標(biāo)，或社交meia圖標(biāo)，或站點(diǎn)其他任何部分的圖像，如側(cè)邊欄。下面是CSS的外觀:

10.垂直高度

有時(shí)你想要一個(gè)部分填充整個(gè)屏幕，不管屏幕大小是多少。您可以使用vh或視圖高度來(lái)控制它。在它之前的數(shù)字是一個(gè)百分比，所以如果你想讓它地填充瀏覽器，你會(huì)把它設(shè)置為100。您可以將其設(shè)置為85%，以適應(yīng)固定的導(dǎo)航菜單。

為容器創(chuàng)建一個(gè)類(lèi)，并應(yīng)用您希望它擁有的vh的數(shù)量。你可能需要調(diào)整的一件事是特定屏幕的媒體查詢值，或者像豎屏模式的手機(jī)那樣的朝向。

11.將CSS應(yīng)用于多個(gè)類(lèi)或選擇器

假設(shè)您想在所有圖片、博客區(qū)和側(cè)邊欄中添加一個(gè)相同的邊框。你不需要寫(xiě)出相同的CSS 3次。把那些項(xiàng)目列出來(lái)，用逗號(hào)隔開(kāi)。這是一個(gè)例子:

不管你是多年的網(wǎng)頁(yè)設(shè)計(jì)師，還是剛剛起步，學(xué)習(xí)如何正確地建立網(wǎng)站，一定要多學(xué)習(xí)。一旦你縮小了你想學(xué)的語(yǔ)言，你必須學(xué)習(xí)和提高你的技能。無(wú)論你學(xué)什么，CSS都是必不可少的。

網(wǎng)站欄目：前端設(shè)計(jì)須知：基本的CSS技巧
文章URL：http://www.bm7419.com/news10/114860.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、做網(wǎng)站、小程序開(kāi)發(fā)、虛擬主機(jī)、App開(kāi)發(fā)、定制開(kāi)發(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)