您現在的位置是:電腦技術吧?>? 編程技術 ??>??網頁設計css怎么用,網頁設計css教程??>??正文詳情

網頁設計css怎么用,網頁設計css教程

鐘離采春2019-11-13 17:51:14 人圍觀
簡介htmlcss網頁設計實例一。通常,CSS用于按以下方式設置字體屬性:字體粗體;字體樣式:斜體;字體變體:小型大寫;字體大小:1em;行html css js網頁設計

1.CSS字體屬性簡寫規則  一般用CSS設定字體屬性是這樣做的:  font-weight:bold;  font-style:italic;  font-varient:small-caps;  font-size:1em;  line-height:1.5em;  font-family:verdana,sans-serif;  但也可以把它們全部寫到一行上去:  font: bold italic small-caps 1em/1.5em verdana,sans-serif;  真不錯!只有一點要提醒的:這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。

而且,如果你沒有設定font-weight, font-style, 以及 font-varient ,他們會使用缺省值,這點要記上。

  2. 同時使用兩個類  一般只能給一個元素設定一個類(Class),但這并不意味著不能用兩個。

事實上,你可以這樣:  ...  同時給P元素兩個類,中間用空格格開,這樣所有text和side兩個類的屬性都會加到P元素上來。

如果它們兩個類中的屬性有沖突的話,后設置的起作用,即在CSS文件中放在后面的類的屬性起作用。

  補充:對于一個ID,不能這樣寫  ...  也不能這樣寫  3. CSS border的缺省值  通常可以設定邊界的顏色,寬度和風格,如:  border: 3px solid #000  這位把邊界顯示成3像素寬,黑色,實線。

但實際上這里只需要指定風格即可。

  如果只指定了風格,其他屬性就會使用缺省值。

一般地,Border的寬度缺省是medium,一般等于3到4個像素;缺省的顏色是其中文字的顏色。

如果這個值正好合適的話,就不用設那么多了。

  4. CSS用于文檔打印  許多網站上都有一個針對打印的版本,但實際上這并不需要,因為可以用CSS來設定打印風格。

  也就是說,可以為頁面指定兩個CSS文件,一個用于屏幕顯示,一個用于打印:  第1行就是顯示,第2行是打印,注意其中的media屬性。

  但應該在打印CSS中寫什么東西呢?你可以按設計普通CSS的方法來設定它。

設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。

也許你會使用 display: none 這個命令來關掉一些裝飾圖片,再關掉一些導航按鈕。

要想了解更多,可以看打印差異這一篇。

  5. 圖片替換技巧  一般都建議用標準的HTML來顯示文字,而不要使用圖片,這樣不但快,也更具可讀性。

但如果你想用一些特殊字體時,就只能用圖片了。

  比如你想整個賣東西的圖標,你就用了這個圖片:

  這當然可以,但對搜索引擎來說,和正常文字相比,它們對alt里面的替換文字幾乎沒有興趣這是因為許多設計者在這里放許多關鍵詞來騙搜索引擎。

所以方法應該是這樣的:  Buy widgets  但這樣就沒有特殊字體了。

要想達到同樣效果,可以這樣設計CSS:  h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }  注意把image height換成真的圖片的高度。

這里,圖片會當作背景顯示出來,而真正的文字由于設定了-2000像素這個縮進,它們會出現在屏幕左邊2000點的地方,就看不見了。

但這對于關閉圖片的人來說,可能全部看不到了,這點要注意。

  6. CSS box模型的另一種調整技巧  這個Box模型的調整主要是針對IE6之前的IE瀏覽器的,它們把邊界寬度和空白都算在元素寬度上。

比如:  #box { width: 100px; border: 5px; padding: 20px }  這樣調用它:  ...  這時盒子的全寬應該是150點,這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。

但在IE5這樣的瀏覽器上,它的全寬仍是100點。

可以用以前人發明的Box調整方法來處理這種差異。

  但用CSS也可以達到同樣的目的,讓它們顯示效果一致。

  #box { width: 150px } #box div { border: 5px; padding: 20px }  這樣調用:  ...  這樣,不管什么瀏覽器,寬度都是150點了。

  7. 塊元素居中對齊  如果想做個固定寬度的網頁并且想讓網頁水平居中的話,通常是這樣:  #content { width: 700px; margin: 0 auto }  你會使用  來圍上所有元素。

這很簡單,但不夠好,IE6之前版本會顯示不出這種效果。

改CSS如下:  body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }  這會把網頁內容都居中,所以在Content中又加入了  text-align: left 。

  8. 用CSS來處理垂直對齊  垂直對齊用表格可以很方便地實現,設定表格單元 vertical-align: middle 就可以了。

但對CSS來說這沒用。

如果你想設定一個導航條是2em高,而想讓導航文字垂直居中的話,設定這個屬性是沒用的。

  CSS方法是什么呢?對了,把這些文字的行高設為 2em:line-height: 2em ,這就可以了。

  9. CSS在容器內定位  CSS的一個好處是可以把一個元素任意定位,在一個容器內也可以。

比如對這個容器:  #container { position: relative }  這樣容器內所有的元素都會相對定位,可以這樣用:  ...  如果想定位到距左30點,距上5點,可以這樣:  #navigation { position: absolute; left: 30px; top: 5px }  當然,你還可以這樣:  margin: 5px 0 0 30px  注意4個數字的順序是:上、右、下、左。

當然,有時候定位的方法而不是邊距的方法更好些。

  10. 直通到屏幕底部的背景色  在垂直方向是進行控制是CSS所不能的。

如果你想讓導航欄和內容欄一樣直通到頁面底部,用表格是很方便的,但如果只用這樣的CSS:  #navigation { background: blue; width: 150px }  較短的導航條是不會直通到底部的,半路內容結束時它就結束了。

該怎么辦呢?  不幸的是,只能采用欺騙的手段了,給這較短的一欄加上個背景圖,寬度和欄寬一樣,并讓它的顏色和設定的背景色一樣。

  body { background: url(blue-image.gif) 0 0 repeat-y }  此時不能用em做單位,因為那樣的話,一旦讀者改變了字體大小,這個花招就會露餡,只能使用px。

  1. Block和inline元素對比  所有的HTML元素都屬于block和inline之一。

  block元素的特點是:  總是在新行上開始;  高度,行高以及頂和底邊距都可控制;  寬度缺省是它的容器的100%,除非設定一個寬度  ,  ,  ,  ,  和  是塊元素的例子。

  相反地,inline元素的特點是:  和其他元素都在一行上;  高,行高及頂和底邊距不可改變;  寬度就是它的文字或圖片的寬度,不可改變。

, , , ,

, 和是inline元素的例子。

  用display: inline 或display: block命令就可以改變一個元素的這一特性。

什么時候需要改變這一屬性呢?  讓一個inline元素從新行開始;  讓塊元素和其他元素保持在一行上;  控制inline元素的寬度(對導航條特別有用);  控制inline元素的高度;  無須設定寬度即可為一個塊元素設定與文字同寬的背景色。

  2. 再來一個box黑客方法  之所以有這么多box黑客方法,是因為IE在6之前對box的理解跟別人都不一樣,它的寬度要包含邊線寬和空白。

要想讓IE5等同其他瀏覽器保持一致,可以用CSS的方法:  padding: 2em;  border: 1em solid green;  width: 20em;  width/**/:/**/ 14em;  第一個寬度所有瀏覽器都認得,但IE5.x不認得第2行的寬度設置,只因為那一行上有空白的注釋符號(多么蠢的語法分析!),所以IE5.x就用20減掉一些空白,而其他瀏覽器會用14這個寬度,因為它是第2行,會覆蓋掉第1行。

  3. 頁面的最小寬度  min-width是個非常方便的CSS命令,它可以指定元素最小也不能小于某個寬度,這樣就能保證排版一直正確。

但IE不認得這個,而它實際上把width當做最小寬度來使。

為了讓這一命令在IE上也能用,可以把一個  放到 標簽下,然后為div指定一個類:  }  第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。

它實際上通過Javascript的判斷來實現最小寬度。

  同樣的辦法也可以為IE實現最大寬度:  #container  {  min-width: 600px;  max-width: 1200px;  width:expression(document.body.clientWidth 600? 600px : document.body.clientWidth 1200? 1200px : auto

  ;  }  4. IE與寬度和高度的問題  IE不認得min-這個定義,但實際上它把正常的width和height當作有min的情況來使。

這樣問題就大了,如果只用寬度和高度,正常的瀏覽器里這兩個值就不會變,如果只用min-width和min-height的話,IE下面根本等于沒有設置寬度和高度。

  比如要設置背景圖片,這個寬度是比較重要的。

要解決這個問題,可以這樣:  .box  {  width: 80px;  height: 35px;  }  htmlbody .box  {  width: auto;  height: auto;  min-width: 80px;  min-height: 35px;  }  所有的瀏覽器都可以使用第一個box設置,但IE不認得第2段設置,因為其中用到了子選擇器命令。

第2個設置更特殊些,所以它會覆蓋掉第1個設置。

  5. 字體變形命令  text-transform 命令很有用,它有3個值:text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。

第1個會把文字變成全大寫,第2個變成全小寫,第3個變成首字母大寫。

這對拼音文字非常有用,即使輸入時有大小寫錯誤,在網頁上也看不到。

  6. IE中圖片文字消失的問題  有時會遇到文字或背景圖突然消失的問題,刷新一下又出現了,這在靠近漂浮元素時更容易發生(注:沒見過)。

此時,可以為消失的元素設定: position: relative ,如果不行,再考慮為這些元素指定一個寬度試試。

  7. 不可見文字  不論因為何種原因希望某些網頁文字不在瀏覽器中顯示,比如為了打印或為了小屏幕而讓某些文字不顯示,都可以用 display: none 。

這非常簡單,但有時對某些人這有點沒用,他們能去掉這個控制,這時就要用到: position: absolute; left: -9000px 。

  這實際上是把文字指定在頁面以外顯示。

  8. 為手持設備設計專門的CSS  也就是手機/PDA等小屏幕用戶,可以專門設計一個CSS來讓網頁顯示更舒服些。

為此,可以把瀏覽器窗口調整到150點寬來看效果。

指定專門的手持設備的CSS的語法是:  也可以閱讀專門的手持設備可用性。

  9. 3D效果的按鈕  以前要想制作帶有3D效果,并且點擊下去還會變化的按鈕,就得用圖片替換的方法,現在CSS就可以了:  a  {  display: block;  border: 1px solid;  border-color: #aaa #000 #000 #aaa;  width: 8em;  background: #fc0;  }  a:hover  {  position: relative;  top: 1px;  left: 1px;  border-color: #000 #aaa #aaa #000;  }  至于效果,還可以自己調整了。

  10. 在不同頁面上使用同樣的導航代碼  許多網頁上都有導航菜單,當進入某頁時,菜單上相應這一項就應該變灰,而其他頁亮起來。

一般要實現這個效果,需要寫程序或專門為每一頁做設計,現在靠CSS就可以實現這個效果。

  首先,在導航代碼中使用CSS類:  Home  About us  Contact us  然后分別為每一頁的Body指定一個id,和上面類同名。

如。

  然后設計CSS如下:  #home .home, #about .about, #about .about  {  commands for highlighted navigation go here  }  這里,當id設為home時,.home就會起作用,也就是class設為home的那一行導航條就會顯示出特殊效果來。

其他頁也是如此。

版權聲明:本文由 鐘離采春 整理編輯。

原標題:div css網頁設計,網頁設計 css

轉載注明出處:http://www.dn9ww09s.icu/program/11899.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 怎么設置電腦開機密碼,如何設置電腦開機密碼 win7

    怎么設置電腦開機密碼,如何設置電腦開機密碼 win7 相關圖片w10系統怎么設置開機密碼如何設置電腦開機密碼?當大多數人看到別人在自己的電腦上胡鬧時,他們會很生氣。在計算機上設置開機密碼可以防止其他人隨意進入自己的計算機系統。很...

  • tenda無線網卡驅動程序,騰達無線網卡萬能驅動

    tenda無線網卡驅動程序,騰達無線網卡萬能驅動 相關圖片802.11n無線網卡驅動很多小伙伴都想知道騰達無線網卡的驅動程序。為了幫助您更好的了解騰達無線網卡的驅動程序,今天編輯將分享一個關于騰達無線網卡驅動程序的教程,希望能對您...

  • 漸變背景顏色,ps背景顏色漸變

    漸變背景顏色,ps背景顏色漸變 相關圖片html背景顏色漸變代碼Htmlheadmeta HTTP equiv=content type content=text/HTML;charset=GB2312/titletypedps背景顏色...

  • 打印機共享,打印機為什么不能共享

    打印機共享,打印機為什么不能共享 相關圖片打印機共享后不能打印打印機作為一種辦公設備,但如果只有一臺計算機控制它,就會造成資源的浪費。如果可以設置為達到共享的目的,則可以實現資源的最大化。那么如何設置打印...

  • 表格可以嵌套嗎,嵌套表格怎么做

    表格可以嵌套嗎,嵌套表格怎么做 相關圖片excel單元格內嵌套表格在頁面中,布局是通過嵌套表完成的。也就是說,一個表可以嵌套到另一個表中。原因如下:首先,網頁的布局會非常復雜,需要有一個表在外部來控制整體布局。...

  • uefi啟動,uefi安裝系統

    uefi啟動,uefi安裝系統 相關圖片uefi啟動盤制作UEFI安裝系統如何設置,作為電腦小白,沒有專業知識,那怎么辦?接下來,我將為您帶來UEFI安裝系統的相關教程。希望能幫助您在安裝UEFI系統時識別U盤uefi...

  • 怎么給表格加邊框,做表格怎么加邊框

    怎么給表格加邊框,做表格怎么加邊框 相關圖片excel表格邊框不顯示默認情況下,表的邊框為0。我們可以為這張桌子設置邊界線。基本語法表border=value語法解釋了邊框的線寬是通過border屬性定義的,單位是像素。文件示例excel邊框線...

  • 電腦部分usb接口沒反應,電腦usb接口全部失靈

    電腦部分usb接口沒反應,電腦usb接口全部失靈 相關圖片電腦usb接口突然不能用了很多用戶在仍能使用電腦時需要使用移動設備,但很多用戶在使用過程中會遇到電腦的USB接口無法使用的情況。計算機在沒有響應的情況下將USB盤連接到USB接口...

  • Flash動畫實例教程,做flash動畫

    Flash動畫實例教程,做flash動畫 相關圖片flash一分鐘動畫我喜歡聽任賢齊的歌和浪。我在朋友家看到了SWF的動畫和歌曲。動畫中的《三國演義》人物與劇情、歌曲配合得很好。整個MTV是一個完整的整體,這絕對是一個經典的滑稽...

  • 電腦文件怎么上鎖,電腦文件夾如何加密碼

    電腦文件怎么上鎖,電腦文件夾如何加密碼 相關圖片電腦文件夾怎么加密碼怎么設置很多用戶都有自己的隱私。如果他們不想看到電腦上的文件,他們會考慮設置密碼保護。但是,許多用戶不知道如何設置計算機文件的密碼保護。下面是...

熱評文章

  • 如何將文件夾設置密碼,文件夾怎么設置密碼保護

    如何將文件夾設置密碼,文件夾怎么設置密碼保護 相關圖片怎么設置文檔密碼在我們的生活中,計算機作為使用電子產品的重要工具,發揮著重要的作用。在使用過程中,一些重要的文檔需要加密而不被發現。如何設置文件夾的密碼?讓我們看...

  • 大白菜系統,大白菜如何重裝系統

    大白菜系統,大白菜如何重裝系統 相關圖片電腦系統隨著科學技術和經濟的發展,許多人都有自己的計算機,但許多用戶無法安裝系統。真遺憾。如果有什么問題不能解決,我們該怎么辦?因此,有必要學習如何安裝系統。接下...

  • 窈窕淑女,窈窕淑女意思

    窈窕淑女,窈窕淑女意思 相關圖片窈窕淑女在線使用軟件:Flash 8.0(鼠標畫是個吃力不討好的工具)作畫時間:作畫、吃飯、喝酒、玩游戲、聊天5小時左右作畫題目:靠窗的女人(畫面沒有深度,沒有內涵,只是靠窈窕...

  • 裝機必備,裝機必備應用

    裝機必備,裝機必備應用 相關圖片裝機工具有哪些重新安裝系統后,一般來說,計算機系統沒有安裝任何軟件。為了使計算機快速進入工作狀態,需要安裝各種工具和軟件。盡管目前的ghost系統中安裝了許多必要的軟件,...

  • 怎樣改變圖片的大小,控制圖片

    怎樣改變圖片的大小,控制圖片 相關圖片壓縮圖片大小CSS防止圖像過大,并添加以下CSS:代碼為IMG{max:800 px;高度:AUTO;}最大寬度:代碼中的800 px限制圖像的最大寬度為800像素,而以下電腦上圖片怎么改大小...

  • 電腦關機關不上,電腦關機怎么關

    電腦關機關不上,電腦關機怎么關 相關圖片電腦為什么不能關機怎么辦我相信每個人都可能遇到過電腦不能關機的問題,這不僅浪費了電能,而且給我們的學習和工作帶來了很大的麻煩,甚至影響到我們的心情。那我們該怎么辦...

  • html語句,html結束語句

    html語句,html結束語句 相關圖片html5條件判斷語句if語句代碼的語法非常簡單。它是一個if判斷語句,用于確定瀏覽器的類型和版本。語法結構類似于!--[如果LTE IE 6]而且![ENDIF]-這意味著如果瀏覽js語句...

  • 惠普臺式電腦怎么進入bios,惠普筆記本如何進入bios

    惠普臺式電腦怎么進入bios,惠普筆記本如何進入bios 相關圖片筆記本進入bios一些操作很多電腦的用戶都知道,如果需要進入BIOS界面,只需使用快捷鍵進入BIOS,但對BIOS的訪問卻不一樣,所以惠普用戶不禁要問,惠普筆記本電腦如何才能進入惠普筆...

  • css代碼樣式,css樣式代碼大全

    css代碼樣式,css樣式代碼大全 相關圖片css div樣式模板分頁部分的源代碼如下:div class=paging wrapperdiv class=paging{Dede:pagelist listsize='5'css代碼是什么...

  • 電腦如何進入安全模式,電腦安全模式

    電腦如何進入安全模式,電腦安全模式 相關圖片win7進入安全模式安全模式的工作原理是在不加載第三方設備驅動程序的情況下啟動計算機,使計算機以系統的最小模式運行,使用戶能夠方便地檢測和修復計算機系統的錯誤。如何進入...

關注微信

变脸官网查询