電子商務(wù)設(shè)計實務(wù)_第1頁
電子商務(wù)設(shè)計實務(wù)_第2頁
電子商務(wù)設(shè)計實務(wù)_第3頁
電子商務(wù)設(shè)計實務(wù)_第4頁
電子商務(wù)設(shè)計實務(wù)_第5頁
已閱讀5頁，還剩45頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

書名：電子商務(wù)設(shè)計實務(wù)第3版ISBN：978-7-111-50682-9作者：孫永道王彤出版社：機械工業(yè)出版社本書配有電子課件第3章用CSS美化網(wǎng)頁UI相關(guān)知識：什么是CSS樣式表樣式定義的基本格式樣式的基本組成三種常見的選擇器技能項目：如何創(chuàng)建樣式表如何應(yīng)用樣式常見樣式使用技巧如何使用特效濾鏡主要內(nèi)容CSS介紹1CSS創(chuàng)建和應(yīng)用2Dreamweaver中設(shè)計樣式3CSS3新樣式介紹4一、

什么是樣式表

樣式表CSS（CascadingStyleSheet）中文譯為“層疊樣式表”，實際上就是一組用于設(shè)置網(wǎng)頁內(nèi)容顯示形式的“樣式”的集合。樣式表的作用是可以在同一頁面里設(shè)置不同內(nèi)容的不同表現(xiàn)形式。另外，用樣式功能可以使得僅僅改變一個樣式就可以改變數(shù)百個網(wǎng)頁的外觀（即我們常聽說的“皮膚”），或者改變一個單獨的樣式影響到網(wǎng)站的所有文字大小。某些特別的紀(jì)念日子里，讀者看到很多網(wǎng)站突然變成一片黑白色，這就是樣式表的功能。一、如何使用樣式通過內(nèi)聯(lián)樣式表設(shè)計樣式

內(nèi)聯(lián)樣式是指通過style標(biāo)記直接將樣式設(shè)置在網(wǎng)頁的head標(biāo)記中。可以直接指定某個html標(biāo)記的樣式（標(biāo)記選擇器樣式）、某個具體網(wǎng)頁元素的樣式（ID選擇器樣式）或用于不同網(wǎng)頁元素的樣式（類選擇器樣式）。在網(wǎng)頁中引用樣式時，直接在HTML標(biāo)記中設(shè)置id="ID樣式名"（ID選擇器樣式）或class="類樣式名"（類選擇器樣式）的方式引用樣式。類樣式的有效范圍是在當(dāng)前整個網(wǎng)頁中有效，即網(wǎng)頁中所有的標(biāo)記都可以應(yīng)用當(dāng)前頁面頂部定義的內(nèi)聯(lián)樣式。一、如何使用樣式通過內(nèi)聯(lián)樣式表設(shè)計樣式

下面是一個內(nèi)聯(lián)樣式的例子：…<head><styletype="text/css">/*下面定義一個ID標(biāo)簽名樣式，只針對定義ID為a1的html標(biāo)記有效*/#a1{background-color:blue;font-size:12px;}/*下面定義一個類樣式，對那些包含classa2的html標(biāo)記有效*/二、創(chuàng)建和使用樣式通過內(nèi)聯(lián)樣式表設(shè)計樣式.a2{background-color:red;font-size:14px;}/*下面定義一個標(biāo)記樣式，對當(dāng)前網(wǎng)頁中的所有div標(biāo)記都有效*/div{background-color:red;font-size:14px;}3.2如何使用樣式通過內(nèi)聯(lián)樣式表設(shè)計樣式</style></head><body><divid="a1">樣式為div</div><divclass="a2">樣式為類樣式a1</div><div>樣式為類樣式標(biāo)記div樣式</div></body>二、創(chuàng)建和使用樣式直接給標(biāo)記嵌入樣式設(shè)計樣式的第三種方式是嵌入樣式，這種方法比較簡單，只要在需要應(yīng)用樣式的HTML標(biāo)記內(nèi)寫上CSS屬性就可以了。<fontstyle="font:small;font-family:Arial">設(shè)置字體樣式</font>三、各種樣式的具體操作實踐新建樣式打開“CSS樣式”面板之后，就可以在網(wǎng)頁中新建CSS樣式，具體步驟如下：步驟一：在“CSS樣式”面板中右擊，彈出快捷菜單，選擇“新建”命令，如圖6-3所示。三、各種樣式式的具體操作作實踐新建樣式打開“CSS樣式”面板之之后，就可以以在網(wǎng)頁中新新建CSS樣式，具體步步驟如下：步驟二：彈出“新建CSS規(guī)則”對話框框，該對話框框中的一些選選項說明如下下：選擇器類型：：類：類選擇器器是可以用于于任何html元素的樣式，，它的樣式名名前有個點。。標(biāo)簽：就是直直接在現(xiàn)有的的html標(biāo)記上設(shè)置樣樣式。復(fù)合內(nèi)容：復(fù)復(fù)合內(nèi)容主要要是針對超鏈鏈接的樣式進(jìn)進(jìn)行特別設(shè)置置，包括以下下四種可設(shè)置置的樣式。三、各種樣式式的具體操作作實踐新建樣式打開“CSS樣式”面板之之后，就可以以在網(wǎng)頁中新新建CSS樣式，具體步步驟如下：步驟二：彈出“新建CSS規(guī)則”對話框框，該對話框框中的一些選選項說明如下下：選擇器類型：：a:active：設(shè)置當(dāng)前選選中超鏈接的的樣式。a:hover：設(shè)置當(dāng)前光光標(biāo)懸停在其其上方時的超超鏈接樣式。。a:link：設(shè)置超鏈接接一般樣式，，即沒有鼠標(biāo)標(biāo)選擇，也沒沒有鼠標(biāo)懸停停狀態(tài)時候的的樣式。a:visited：設(shè)置已經(jīng)訪訪問（點擊））過的超鏈接接的樣式。三、各種樣式式的具體操作作實踐新建樣式打開“CSS樣式”面板之之后，就可以以在網(wǎng)頁中新新建CSS樣式，具體步步驟如下：步驟二：彈出“新建CSS規(guī)則”對話框框，該對話框框中的一些選選項說明如下下：選擇器名稱：類：類選擇器器是可以用于于任何html元素的樣式，，它的樣式名名前有個點。。標(biāo)簽：就是直直接在現(xiàn)有的的html標(biāo)記上設(shè)置樣樣式。復(fù)合內(nèi)容：復(fù)復(fù)合內(nèi)容主要要是針對超鏈鏈接的樣式進(jìn)進(jìn)行特別設(shè)置置，包括以下下四種可設(shè)置置的樣式。三、各種樣式式的具體操作作實踐新建樣式打開“CSS樣式”面板之之后，就可以以在網(wǎng)頁中新新建CSS樣式，具體步步驟如下：步驟二：彈出“新建CSS規(guī)則”對話框框，該對話框框中的一些選選項說明如下下：選擇器類型：：設(shè)置選擇器的的名稱。只有有當(dāng)選擇器類類型選擇為ID選擇器或類選選擇器的時候候才需要設(shè)置置選擇器的名名稱。規(guī)則定義：這里是指，新新設(shè)計的樣式式是作為當(dāng)前前網(wǎng)頁的內(nèi)嵌嵌樣式方式引引用還是作為為外部樣式文文件的鏈接方方式應(yīng)用。三、各種樣式式的具體操作作實踐新建樣式打開“CSS樣式”面板之之后，就可以以在網(wǎng)頁中新新建CSS樣式，具體步步驟如下：步驟三：單擊“確定””按鈕，彈出出“保存樣式式表文件為””對話框，如如圖6-5所示，對新建建的樣式表文文件進(jìn)行保存存。三、各種樣式式的具體操作作實踐文本樣樣式文本樣樣式對對話框框說明明如圖6-7所示：三、各各種樣樣式的的具體體操作作實踐踐背景樣樣式背景樣樣式對對話框框說明明如圖所所示：三、各各種樣樣式的的具體體操作作實踐踐段落樣樣式段落樣樣式對對話框框說明明如圖6-14所示：三、各各種樣樣式的的具體體操作作實踐踐定位樣樣式定位””樣式式主要要用來來定義義元素素在頁頁面中中的相相關(guān)位位置和和大小小等屬屬性，，如圖圖所示示。三、各各種樣樣式的的具體體操作作實踐踐邊框樣樣式邊框””樣式式可以以給對對象添添加邊邊框，，設(shè)置置邊框框的顏顏色、、粗細(xì)細(xì)以及及樣式式。如如圖所所示。。三、各各種樣樣式的的具體體操作作實踐踐標(biāo)準(zhǔn)盒盒子模模型三、各各種樣樣式的的具體體操作作實踐踐標(biāo)準(zhǔn)盒盒子模模型三、各各種樣樣式的的具體體操作作實踐踐方框樣樣式方框””樣式式是定定義特特定元元素的的大小小及其其與周周圍元元素的的間距距等屬屬性。。在CSS3樣式中中設(shè)置置方框框樣式式，如如圖所所示。。三、各各種樣樣式的的具體體操作作實踐踐盒子模模型案案例三、各各種樣樣式的的具體體操作作實踐踐列表樣樣式列表””樣式式是用用于控控制列列表內(nèi)內(nèi)各項項元素素，可可以定定義樣樣式的的空格格和對對齊方方式，如圖所所示。。四、關(guān)關(guān)于CSS3和HTML5HTML5的新功功能圖像方方面的的改進(jìn)進(jìn)HTML5引入了了canvas標(biāo)簽，，通過過canvas可以動動態(tài)地地生成成各種種圖形形圖像像、圖圖表以以及動動畫。。不僅僅如此此，HTML5也賦予予圖片片圖形形更多多的交交互功功能，，HTML5的canvas標(biāo)簽還還能夠夠配合合javascript來利用用鍵盤盤控制制圖形形圖像像。四、關(guān)關(guān)于CSS3和HTML5HTML5的新功功能位置應(yīng)應(yīng)用的的支持持HTML5通過提提供應(yīng)應(yīng)用接接口———GeolocationAPI，在用用戶允允許的的情況況下共共享當(dāng)當(dāng)前的的地理理位置置信息息，并并為用用戶提提供其其他相相關(guān)的的信息息。HTML5的GeolocationAPI主要特特點在在于：：本身身不去去獲取取用戶戶的位位置，，而是是通過過其他他三方方接口口來獲獲取，，例如如IP、GPS、WIFI等方式式；用用戶可可以隨隨時開開啟和和關(guān)閉閉，在在被程程序調(diào)調(diào)用時時也會會首先先征得得用戶戶同意意，保保證了了用戶戶的隱隱私。。四、關(guān)關(guān)于CSS3和HTML5HTML5的新功功能網(wǎng)絡(luò)存存儲方方面的的支持持HTML5的WebStorageAPI采用了了離線線緩存存，會會生成成一個個清單單文件件（ManifestFile），這這個清清單文文件實實質(zhì)就就是一一系列列的URL列表文文件，，這些些URL分別指指向頁頁面當(dāng)當(dāng)中的的HTML、CSS、JavaScrpit、圖片片等相相關(guān)內(nèi)內(nèi)容。。四、關(guān)關(guān)于CSS3和HTML5CSS3的新功功能選擇器器CSS選擇器器是個個強大大的工工具：：它們們允許許在標(biāo)標(biāo)簽中中指定定特定定的HTML元素而而不必必使用用多余余的class、ID或javascripts。而且它們們中的大部部分并不是是CSS3中新添加的的，而是沒沒有被得到到應(yīng)有的廣廣泛應(yīng)用。。四、關(guān)于CSS3和HTML5CSS3的新功能連字符CSS3中唯一新引引入的連字字符是通用用的兄弟選選擇器（同同級）。它它針對一個個元素的有有同一個父父級結(jié)點的的所有兄弟弟級別元素素。比如，，給某個特特定的div同級的圖片片添加一個個灰色的邊邊框（div和圖片應(yīng)該該有同一個個父級結(jié)點點），在樣樣式表中定定義下面的的樣式就足足夠了：div~img{border:1pxsolid#ccc;}四、關(guān)于CSS3和HTML5CSS3的新功能偽類或許在CSS3中增加最多多的就是新新的偽類了了，以下介介紹一些比比較有用的的偽類：:nth-child(n)：基于元素素在父結(jié)點點的子元素素的列表位位置來指定定元素。可可以是用數(shù)數(shù)字、數(shù)字字表達(dá)式或或odd和even關(guān)鍵詞（對對斑馬樣式式的列表很很完美）。。:last-child：匹配一個個父結(jié)點下下的最后一一個子元素素，等同于于:nth-last-child(1)。:checked：匹配選擇擇的元素，，比如復(fù)選選框。:empty：匹配空元元素（沒有有子元素））。四、關(guān)于CSS3和HTML5CSS3的新功能偽元素在CSS3中唯一引入入的偽元素素是::selection，它可以讓讓你指定被被用戶高亮亮（選中））的元素。。四、關(guān)于CSS3和HTML5CSS3的新功能RGBA和透明度RGBA讓設(shè)計者不不僅可以設(shè)設(shè)定色彩，，還能設(shè)定定元素的透透明度。一一些瀏覽器器尚不支持持它，所以以最好在RGBA前面設(shè)定其其他瀏覽器器支持的沒沒有透明的的顏色屬性性。當(dāng)設(shè)定定一個RGBA色彩的時候候，必須依依次設(shè)定紅紅、藍(lán)和綠綠色的值，，可以是0～255或百分?jǐn)?shù)。。四、關(guān)于CSS3和HTML5CSS3的新功能多欄布局新的CSS3選擇器可以以不用使用用多個div標(biāo)簽就能實實現(xiàn)多欄布布局。下面面是CSS3的多欄布局局例子：.index#contentdiv{-webkit-column-count:4;-webkit-column-gap:20px;-moz-column-count:4;-moz-column-gap:20px;}四、關(guān)于CSS3和HTML5CSS3的新功能可以通過這這個選擇器器定義三件件事情：欄欄數(shù)（column-count）、欄寬寬（column-width）和各欄欄之間的的空白/間距（column-gap）。如果果column-count未設(shè)定，，瀏覽器器會在允允許的寬寬度內(nèi)設(shè)設(shè)置盡可可能多的的欄目。。為了在各各欄目之之間添加加一個數(shù)數(shù)值的分分隔，可可以使用用column-rule屬性，其其功能和和border屬性類似似：div{column-rule:1pxsolid#00000;}四、關(guān)于于CSS3和HTML5CSS3的新功能能多背景圖圖CSS3允許使用用多個屬屬性比如如background-image、background-repeat、background-size、background-position、background-originand、background-clip等在一個個元素上上添加多多層背景景圖片。。在一個元元素上添添加多背背景的最最簡單的的方法是是使用簡簡寫代碼碼，可以以指定上上面的所所有屬性性到一條條聲明中中，最常常用的是是image、position和repeat屬性：四、關(guān)于于CSS3和HTML5CSS3的新功能能div{background:url(example.jpg)topleftno-repeat,url(example2.jpg)bottomleftno-repeat,url(example3.jpg)centercenterrepeat-y;}四、關(guān)于于CSS3和HTML5CSS3的新功能能自動換行行word-wrap（自動換換行）屬屬性用來來防止太太長的字字符串溢溢出。可可以用兩兩個屬性性值normal和break-word。normal值（默認(rèn)認(rèn)的）只只在允許許的斷點點截斷文文字，如如連字符符。如果果使用了了break-word，文字可可以在任任何需要要的地方方截斷以以匹配分分配的空空間并防防止溢出出。四、關(guān)于于CSS3和HTML5CSS3的新功能能文字陰影影盡管在CSS2中就已經(jīng)經(jīng)存在，，text-shadow是一個未未被廣泛泛應(yīng)用的的CSS屬性。但但是它將將在CSS3中被廣泛泛采用。。這個屬屬性給設(shè)設(shè)計師一一個新的的跨瀏覽覽器的工工具來為為設(shè)計添添加一個個維度以以使文字字醒目。。四、關(guān)于于CSS3和HTML5CSS3的新功能能@font-face屬性盡管是最最被期待待的CSS3特性，@font-face在網(wǎng)站上上仍然沒沒有像其其他CSS3屬性那樣樣被廣泛泛采用。。這主要要因為字體授權(quán)和版版權(quán)問題題：嵌入入的字體體很容易易從網(wǎng)站站上下載載到，這這是字體體廠商的的主要顧顧慮。四、關(guān)于于CSS3和HTML5CSS3的新功能圓角（邊框半半徑）Border-radius無需背景圖片片就能給HTML元素添加圓角角。現(xiàn)在，它它可能是使用用最多的CSS3屬性了，很簡簡單的原因是是使用圓角比比較好而且不不會對設(shè)計和和可用性有沖沖突。不同于于添加JavaScript或多余的HTML標(biāo)簽，僅僅需需要添加一些些CSS屬性即可實現(xiàn)現(xiàn)。而且可以以讓設(shè)計者省省去花費幾個個小時來尋找找精巧的瀏覽覽器方案和基基于JavaScript圓角。四、關(guān)于CSS3和HTML5CSS3的新功能邊框圖片border-image屬性允許在元元素的邊框上上設(shè)定圖片，，從通常的solid、dotted和其他邊框樣樣式中解放出出來。該屬性性給設(shè)計師一一個更好的工工具，用它可可以方便地定定義設(shè)計元素素的邊框樣式式，比background-image屬性（對高級級設(shè)計來說））或枯燥的默默認(rèn)邊框樣式式更好用。也也可以明確地地定義一個邊邊框可以被如如何縮放或平平鋪。四、關(guān)于CSS3和HTML5CSS3的新功能盒陰影box-shadow屬性可以對HTML元素添加陰影影而不用額外外的標(biāo)簽或背背景圖片。類類似text-shadow屬性，它增強強設(shè)計的細(xì)節(jié)節(jié)；通過一些些屬性的選擇擇設(shè)置，即可可實現(xiàn)美妙的的陰影效果。。四、關(guān)于CSS3和HTML5CSS3的新功能盒子大小根據(jù)CSS

2.1規(guī)范，在計算算盒子的總大大小的時候，，元素的邊框框和padding應(yīng)該被加入到到寬度和高度度之中的。但但是眾所周知知，舊的瀏覽覽器卻以它們們自己的非常常有“創(chuàng)意””的方式來解解釋這個規(guī)范范。box-sizing屬性允許指定定瀏覽器如何何計算一個元元素的寬度和和高度。四、關(guān)于CSS3和HTML5CSS3的新功能媒體查詢媒體查詢（mediaqueries）可以為不同同的設(shè)備，基基于設(shè)備特性性定義不同的的樣式。比如如，在可視區(qū)區(qū)域小于480

px的時候，你可可能想讓網(wǎng)站站的側(cè)欄顯示示在主內(nèi)容的的下邊，這樣樣它就不應(yīng)該該浮動并顯示示在右側(cè)了。。四、關(guān)于CSS3和HTML5CSS3的新功能語音CSS3的語音模塊可可以為屏幕

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論