CSS網頁製作技巧之控制網頁背景

2021-10-03 10:36:54 字數 2483 閱讀 6865

我想大家常常為一些比較合適於自己的網頁背景的而發愁吧,這個我想也是有的,因為這些不是太大就是太小,或者太亂,那麼有沒有辦法讓能合自己的主頁的胃口呢?答案是肯定的。 

想知道怎麼來實現嘛,好吧,大家現在開始跟著我做,我保證大家一定一學就會。不過,我想在網上「成家」的朋友一般分為在網咖裡「開業」(就像我一樣,剛開始從他人的主頁拉相關的**來改的),還有就是在自己家裡用dw或fp之類的專業軟體製作好上傳的,所以呢,我打算分開兩步介紹,首先為在網咖裡「開業」的朋友著想吧,最後再簡要的介紹一些用dw4做的背景樣式。新建乙個前端學習qun438905713,在群裡大多數都是零基礎學習者,大家相互幫助,相互解答,並且還準備很多學習資料,歡迎零基礎的小夥伴來一起交流。

其實總得說來一切都是一樣的,只不過是採用的方式不同罷了。好了閒話少說了,現在就入正題吧。 

說到背景也就只有背景顏色和顏色,這兩個我想大家一定都知道在裡加入bgcolor="#808080"和background="url"對吧,可是我這裡將要介紹不是這樣做的,而是用css樣式來做的,雖說有些麻煩,可是整體配合還是非常不錯的。 

·背景顏色 background-color

我想這個我就不用多做介紹了,顏色**我想大家都知道的,不是用英文來代替就是用指定的**來表示的。這個的預設值是transparent(透明色)。 

例:body 

h1·背景 background-image

背景和背景顏色在html裡面的設定也是基本相同的,都可以在裡加入相關的語句來完成。但是在這裡,我所指的並非是用這種方法,我用的方法還是css。background-image這個的主要功能也就是用來顯示,如果需要顯示的話,那麼只要在後面加上url(的位址)就可以了,不顯示嘛,那是最簡單不過的了,什麼也不要就行了,因為這個預設的就是none,而要加的話,就是在後面加上這個none就可以了。 

例:body 

h1 大家在使用裡的背景時,一定常常遇到一些因為太小,而產生種種如的重複出現而破壞了整個頁面的美感,想換成其它又不合適之類的麻煩情況吧。不過現在好了,大家只要用了以下的幾個css裡控制方法,那麼你以後就不會再有此類的麻煩事發生了。新建乙個前端學習qun438905713,在群裡大多數都是零基礎學習者,大家相互幫助,相互解答,並且還準備很多學習資料,歡迎零基礎的小夥伴來一起交流。

·是否重複顯示 background-repeat 

有時候重複顯示是需要的,可是有時候重複顯示則是讓人頭痛的,現在這個可以很好的幫助你了,而且它還可以幫你控制重複的方式(水平方向重複、垂直方向重複以及兩個方向都有重複),而要實現這三個方向的重複也就只要在bcackground-repeat後面加上repeat-x(水平方向鋪開)、repeat-y(垂直方向鋪開)、repeat(兩個方向鋪開)。 

當然,它可以控制的重複,也可以控制不重複的。no-repeat這個就是用來表示只顯示一幅背景,而不是重複出現的,這個可不是預設的喲,預設的是重複顯示背景(repeat)。 

例:body 

·定位顯示位置 background-position

一張背景經過上面的設定後往往還不夠的,因為當你使用上面的不重複顯示設定後,只顯示在頁面的左上角,而不會在其它地方,可是如果要在中間或者其它地方出現這張背景的話,那麼background-position這個就可以幫你了,因為它就是用來顯示相對於左上角的乙個位置的(就是預設的值0% 0%),由兩個值來設定,中間用空格來隔開。 

它的主要的幾個值有left center right和top center bottom,也可以用百分數值指定相對位置或用乙個值來指定絕對位置,如50%表示的位置是在中心,而50px的水平值則表示距左上角區域水平移動50px單位;這裡要特別指出的是,1當你設定值的時候只提供乙個值,則相當於只指定水平位置,垂直自動設定為50%;2當你設定的值是負數的時候,則表示背景超出邊界。 

例:body 

·控制是否滾動 background-attachment

上面的兩步可以幫你完成影象的定位,可是這樣做好以後還不是完美的,因為如果你的頁面有滾動條的時候,那麼你這張背景就不會永遠定位在那個位置了,如果想要永遠定位在那個位置,就只有讓這張隨著頁面的內容的滾動而滾動,這時background-attachment就可以幫你了你只要加入scroll(靜止)和fixed(滾動)中的其中乙個就可以了。 

當然不是讓你亂加的,畢竟scroll是預設的,也就是不讓隨頁面的內容而滾動的。 

例:body 

好了,經過以上這番設定後,我相信你的背景一定會更美的,但是過多的**往往可讀性很差,容易讓人產生錯誤,所以在這裡我要告訴大家的就是可以把以上的**全部加在一起使用,也就是說把以上相關的**加到background中。 

在把**加到background中的時候要在每個值中間加上空格來隔開,而且不要把背景顏色的**放在背景的url後面,以免顯示不出來。 

例:body 

最後提醒一下大家,如果用**直接插入的話,那麼一定要放下面這個**的裡後再放在之間才能正常顯示出來!

網頁製作必學技巧之用CSS美化你的網頁

現在我們設計 網頁已經離不開 css,使用 css可以美化我們的 網頁,這已經是大家所共知的了!css是 cascading style sheets 的縮寫,譯為樣式表。html允許我們利用css來實現風格的顯示,舉個簡單的例子 我們可以使用標籤來使頁面的字型加粗。如 網頁教學網加粗字型顯示 如果...

網頁製作CSS樣式九條技巧

第一.css字型的簡寫 平時當你使用css定義字型時你可能會這樣做 font size 1em line height 1.5em font weight bold font style italic font variant small caps font family verdana,serif...

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...