DIV+CSS視頻教程_DIV+CSS開發(fā)實(shí)例實(shí)戰(zhàn)DIV+CSS網(wǎng)站首頁制作_第1頁
DIV+CSS視頻教程_DIV+CSS開發(fā)實(shí)例實(shí)戰(zhàn)DIV+CSS網(wǎng)站首頁制作_第2頁
DIV+CSS視頻教程_DIV+CSS開發(fā)實(shí)例實(shí)戰(zhàn)DIV+CSS網(wǎng)站首頁制作_第3頁
DIV+CSS視頻教程_DIV+CSS開發(fā)實(shí)例實(shí)戰(zhàn)DIV+CSS網(wǎng)站首頁制作_第4頁
DIV+CSS視頻教程_DIV+CSS開發(fā)實(shí)例實(shí)戰(zhàn)DIV+CSS網(wǎng)站首頁制作_第5頁
已閱讀5頁,還剩49頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、講師:風(fēng)舞煙北風(fēng)網(wǎng)軟件工程師北風(fēng)網(wǎng)軟件工程師IT高端培訓(xùn)高端培訓(xùn)(BF-TECH1.0)初級(jí)階段課程初級(jí)階段課程HTML XHTML CS3、JavaScript網(wǎng)頁制作從入門到精通網(wǎng)頁制作從入門到精通階段項(xiàng)目:實(shí)戰(zhàn)階段項(xiàng)目:實(shí)戰(zhàn)DIV+CSS網(wǎng)站首頁制作網(wǎng)站首頁制作目錄目錄1、首頁結(jié)構(gòu)分析2、搭頁面結(jié)構(gòu)(5步)3、CSS樣式設(shè)計(jì)4、CSS定位擴(kuò)展頁面5、CSS HackDIV+CSS視頻教程:HTML XHTML CS3 JS網(wǎng)頁制作http:/ 首先我們需要對(duì)頁面進(jìn)行分塊,由幾大塊組成,從效果圖上不難看出,由四大塊組成“頭部版塊、廣告版塊、內(nèi)容版塊、頁底版塊”,分別給他們起個(gè)名字如下: 頭

2、部版塊:頭部版塊:header 廣告版塊:廣告版塊:banner 內(nèi)容版塊:內(nèi)容版塊:content 頁底版塊:頁底版塊:footer HTML代碼:代碼: 【第二步第二步】 頭部版塊有兩部分組成,左側(cè)的logo和右側(cè)的尋航條 1)網(wǎng)站logo一般是張圖片,而且是可以點(diǎn)擊癿,點(diǎn)擊后回到首頁,所以logo部分的結(jié)構(gòu)為: 2)導(dǎo)航我們肯定要用標(biāo)簽ul和li,而li里面內(nèi)容又是鏈接,在加上真實(shí)的鏈接信息后,導(dǎo)航條部分的結(jié)構(gòu)如下: 首 頁 培訓(xùn)課程 優(yōu)秀學(xué)員 課程疑問 職業(yè)生涯 學(xué)員社區(qū) 官斱博客 學(xué)院地址 【第三步第三步】 Banner部分在設(shè)計(jì)中是一個(gè)圖片放在此處就可以,因?yàn)閺V告也是可以點(diǎn)擊的,所

3、以就需要在圖片外面加上鏈接,代碼如下: 【第四步第四步】 內(nèi)容content版塊呢,是有左右兩部分組成,左邊叫“l(fā)eftArticle”,右邊叫“rightInfo”代碼如下: 1)左側(cè)的文章版塊,分“文章圖片,文章標(biāo)題和文章圖片,文章標(biāo)題和文章內(nèi)容文章內(nèi)容”三部分 文章圖片:文章圖片:仍功能上來說文章頂部圖片應(yīng)該是可以點(diǎn)擊的,點(diǎn)擊后進(jìn)入文章詳情,所以圖片外面還是要被鏈接a包圍的; 文章標(biāo)題:文章標(biāo)題:文章標(biāo)題就是文章內(nèi)容的總結(jié),對(duì)搜索引擎來說文章標(biāo)題的權(quán)重要比內(nèi)容要高,怎么才能讓搜索引擎知道返里是標(biāo)題呢,當(dāng)然是用標(biāo)題標(biāo)簽h1h6標(biāo)簽了,這里我們選用h1,還有一點(diǎn)不要忘記標(biāo)題也是可以點(diǎn)擊的,所

4、以也要用a進(jìn)行包圍, Web前端開収工程師好找工作嗎? 文章內(nèi)容文章內(nèi)容:既然是內(nèi)容,肯定就少不了段落標(biāo)簽p了,有幾段文字就用幾個(gè)“”,這樣文章部分的結(jié)構(gòu),就逐漸清晰明朗據(jù)09年全國Web前端開發(fā)行業(yè)調(diào)查統(tǒng)計(jì)顯示,09年大型企業(yè)對(duì)于Web前端開發(fā)人才需求緊缺。 Web前端開發(fā)目前是一種新興職業(yè),專業(yè)的前端開發(fā)人員絕大部分存在于大型企業(yè)中,如騰訊、百度等,換種說法就是:選擇從事Web前端開發(fā)就等于你的一只腳已經(jīng)邁進(jìn)了騰訊、百度等高薪企業(yè)。 隨著Web2.0的大潮席卷而來,2010年互聯(lián)網(wǎng)發(fā)展速度空前,互聯(lián)網(wǎng)向標(biāo)準(zhǔn)化、專業(yè)化、精細(xì)化方向發(fā)展,導(dǎo)致Web開發(fā)職位進(jìn)一步細(xì)分,Web前端開發(fā)工程師、We

5、b頁面重構(gòu)師等這些高薪職業(yè)相繼誕生。如今流行的瀏覽器有十幾種,不同的瀏覽器對(duì)頁面的解析不同,導(dǎo)致相同的頁面在不同的瀏覽器內(nèi)顯示效果不同,不能兼容多種瀏覽器,用戶體驗(yàn)降低,搜索引擎抓取率低,加載速度慢等影響頁面整體質(zhì)量的因素產(chǎn)生,所以對(duì)頁面制作要求越來越高,致使許多公司急需提供制作標(biāo)準(zhǔn)頁面服務(wù)的技術(shù)人員。 現(xiàn)在YAHOO、MSN等國際門戶網(wǎng)站,網(wǎng)易、新浪等國內(nèi)門戶網(wǎng)站,和主流的Web2.0網(wǎng)站,均采用xHTML(DIV)CSS的框架模式,更加印證了xHTML(DIV)CSS是大勢所趨。正因?yàn)槿绱薟eb前端開發(fā)人員成為市場上緊缺的人才,同時(shí)也成為一個(gè)新興的高薪職業(yè)。 目前代碼結(jié)構(gòu)為: Web前端開

6、發(fā)工程師好找工作嗎? 2) 右側(cè)布局:首先右側(cè)分兩個(gè)版塊“職業(yè)生涯”和“好職推薦”,仔細(xì)看會(huì)發(fā)現(xiàn)他們有共同的結(jié)構(gòu),共同的樣式,只要將其中一個(gè)做出來,另外一個(gè)結(jié)構(gòu)和樣式直接復(fù)用就可以了分析:那就分析上面的“職業(yè)生涯”的結(jié)構(gòu),首先有個(gè)標(biāo)題,其次下面是標(biāo)題的一個(gè)列表,這樣很容易讓人想到用“ul+li”的組合,但是我們這里有一個(gè)更好的做法, 用“dl+dt+dd”組合,返種組合在這里是一個(gè)很不錯(cuò)的選擇,要比“ul+li”要好 職業(yè)生涯 Web前端開發(fā)工程師需要掌握哪些核心技能? 我是程序員,有必要進(jìn)行web前端開發(fā)的學(xué)習(xí)嗎? 我是網(wǎng)站美工,目前發(fā)展遇到瓶頸,該如何解決? 我適合從事web前端開發(fā)行業(yè)嗎

7、? Web前端工程師如何給自己定位? Web前端開發(fā)工程師好找工作嗎? “好職推薦”同”職業(yè)生涯“ 好職推薦 盛大網(wǎng)絡(luò)-前端開發(fā)工程師 阿里巴巴-前端開發(fā)工程師 金山軟件-KIS-WEB前端頁面工程師 360京東商城 - Web前端開發(fā)工程師 【第五步第五步】 關(guān)于頁底版塊的布局,效果圖上是有兩行文字組成,第一行文字全部為鏈接, 關(guān)亍cssStudy | 廣告服務(wù) | 提交問題 | 聯(lián)系我們 | 版權(quán)聲明 | 關(guān)亍隱私 | 合s作伙伴 第二行左邊的是備案號(hào),右側(cè)是版權(quán)信息 京ICP備10055601號(hào) All rights(C)2008-2010 Reserved 【第六步第六步】 為了頁面能

8、夠具有更好的兼容性,所以在設(shè)計(jì)表現(xiàn)的時(shí)候,首先要對(duì)標(biāo)簽重置body,div,p,ul,li,dl,dt,dd,h1,amargin:0; padding:0; 【第七步】打開效果圖,我們先看一下主背景,是一個(gè)從上至下由藍(lán)色漸變?yōu)榘咨?,且?guī)в性撇实谋尘?)針對(duì)背景的漸變我們好處理,將漸變背景切割為一個(gè)寬度為10px的小圖,起名為bg,然后水平方向平鋪(repeat-x) ,而我們的做法是,先加載前面那個(gè)10px寬度的小圖片,這樣背景加載速度快,用戶打開網(wǎng)頁的時(shí)候,先把這種背景圖加載上,不至于展現(xiàn)在瀏覽者前面的是一片空白,然后等去彩背景下載完畢后,再加載在頁面內(nèi),用戶感覺會(huì)很舒服 具體如何實(shí)現(xiàn)背景

9、的顯示頇序,做法有很多,針對(duì)本例,最適用的辦法就是設(shè)置為不同癿盒子的背景,bg.gif就當(dāng)做html盒子的背景,而 clouds.gif就當(dāng)做body盒子的背景,因?yàn)榫W(wǎng)頁會(huì)先加載html盒子,然后再加載body盒子,那舉CSS代碼如下: htmlbackground:url(./images/bg.gif) repeat-x; bodybackground:url(./images/clouds.gif) repeat-x; 【第八步第八步】 頁面的寬度為1000px,所以四大板塊header、banner、content、footer的寬度也為1000px,且水平居中于瀏覓器,所以用CSS集

10、體聲明的做法,對(duì)四大板塊的共同樣式進(jìn)行定義: #header,#banner,#content,#footerwidth:1000px; margin:0 auto; 另外效果圖中的頭部與上邊沿有45px的距離,為實(shí)現(xiàn)這個(gè)效果,我們采用設(shè)置body上內(nèi)邊距的辦法,將padding-top加到body的樣式內(nèi): CSS代碼代碼 bodybackground:url(./images/clouds.gif) repeat-x; padding-top:45px; 有一個(gè)問題,網(wǎng)頁里所有能夠點(diǎn)擊的鏈接圖片,全部都有一個(gè)寬度為2px的紫色邊框,不美觀而且還會(huì)導(dǎo)致后面做出的頁面出現(xiàn)兼容性的問題,這個(gè)不是

11、我們想要的,所以我們要將這個(gè)邊框去掉!CSS代碼如下所寫: imgborder:none; 接著上面,img標(biāo)簽是一個(gè)很特別的標(biāo)簽,因?yàn)樗旧硎莾?nèi)聯(lián)元素,但卻體現(xiàn)出塊狀元素寬高起作用癿特性,這是很矛盾的地方,這就為頁面布局埋下隱患,要么為內(nèi)聯(lián)元素,要么為塊狀元素,在這里我們更需要它的塊狀元素的屬性,所以我們將身為內(nèi)聯(lián)元素的img標(biāo)簽轉(zhuǎn)化為塊狀元素,用“display:block; ”。 既然img轉(zhuǎn)化為塊狀元素,根據(jù)W3C規(guī)范,內(nèi)聯(lián)元素是不能包含塊狀元素的,所以我們還必須把鏈接a,也要轉(zhuǎn)化為塊狀元素”。 CSS代碼:代碼: #logowidth:220px; height:54px; floa

12、t:left; background:#991616; #logo adisplay:block; width:220px; height:54px; #logo a imgdisplay:block; 精減logo部分的html代碼把外部的去掉將a的id設(shè)為logo CSS代碼就可以改為: #logodisplay:block; width:220px; height:54px; float:left; background:#991616; 而“#logo a imgdisplay:block;”就要轉(zhuǎn)化為“#logo imgdisplay:block;” nav導(dǎo)航條的CSS代碼如下:#

13、navwidth:780px; height:54px; float:left; background:#393838; list-style:none; #nav lifloat:left; #nav li adisplay:block; width:86px; height:54px; line-height:54px; text-align:center; font-size:12px; color:#ccc; text-decoration:none; float:left; #nav li a:hovercolor:#fff; 設(shè)置某一項(xiàng)處于當(dāng)前激活狀態(tài):#nav li .navAc

14、tive background:url(./images/navHoverBg.png) no-repeat; color:#fff;一個(gè)非常嚴(yán)重的問題:做如下操作刪除id=“nav”的div, 然后再給header設(shè)置背景色為黑色#000刪除導(dǎo)航條代碼后的header結(jié)構(gòu) HTML代碼代碼 CSS代碼代碼 #headerbackground:#000; FireFoxIE:在FireFox內(nèi),看不到背景為黑色癿header,因?yàn)樗鹓不能夠自適應(yīng)內(nèi)部元素的高度,所以它的高度變?yōu)榱?,而在ie6里面卻可以正帯顯示,這是一個(gè)很嚴(yán)重的問題,如果高度不能自適應(yīng)的話,那內(nèi)部子元素logo和nav的浮動(dòng)產(chǎn)生

15、的影響就會(huì)“外泄”,對(duì)header外面癿版塊產(chǎn)生影響,從而產(chǎn)生版塊錯(cuò)位! 解決這個(gè)問題其實(shí)很簡單,不是高度不能自適應(yīng)嘛,那就給他設(shè)置一個(gè)高度,高度值為子級(jí)元素的高度,那這樣header這個(gè)盒子就可以剛好裝下內(nèi)部的子logo和nav,而不至于浮動(dòng)癿影響“外泄” 但是這種辦法,不夠靈活,如果有一天header內(nèi)部多了一些元素,那就需要再次計(jì)算一下子級(jí)元素的高度,比較麻煩,下面介紹第二種做法,在不設(shè)置header的高度情況下,無論內(nèi)部元素再多,header的高度也會(huì)自動(dòng)適應(yīng),直接在header的樣式里寫入“overflow:hidden;”就可以了 【第九步第九步】 針對(duì)banner版塊的樣式定義,

16、相對(duì)第八步就簡單多了,結(jié)構(gòu)和logo版塊一樣,對(duì)結(jié)構(gòu)進(jìn)行優(yōu)化,將最外層的div去掉,然后將里面的a定義為banner,所以banner版塊的結(jié)構(gòu)如下: CSS代碼代碼 #bannerdisplay:block; width:1000px; height:292px; margin:10px auto; #banner imgdisplay:block; 設(shè)置圖片的大小為:1000*292px,防止圖片大小自適應(yīng)大小導(dǎo)致圖片破壞頁面布局。#banner imgdisplay:block; width:1000px; height:292px; DIV+CSS視頻教程:HTML XHTML CS3

17、 JS網(wǎng)頁制作http:/ 下面將針對(duì)content版塊進(jìn)行樣式設(shè)計(jì),從效果圖上我們可以看出,content版塊分為兩塊,左側(cè)的文章(leftArticle)和右側(cè)的資訊(rightInfo)。 首先分析下思路,content內(nèi)部的leftArticle和rightInfo兩個(gè)都要左側(cè)浮動(dòng),內(nèi)部元素浮動(dòng)就會(huì)導(dǎo)致外面的content的高度在firefox中不能夠自適應(yīng)內(nèi)部元素的高度,所以我們首先要在content的CSS代碼中加入“overflow:hidden;”,順便將背景色、文字大小和文字行距也給定義了,如下: #contentoverflow:hidden; background:#ea

18、eaea; font-size:12px; line-height:24px; 然后我們?cè)籴槍?duì)leftArticle和rightInfo單獨(dú)定義樣式,仔細(xì)觀察效果圖能夠很清楚的發(fā)現(xiàn),leftArticle和rightInfo 上下左右都有10像素的外邊距,如果我們用左側(cè)浮動(dòng)來實(shí)現(xiàn)2欄效果,在存在外邊距的情況下就會(huì)出現(xiàn)IE6癿雙倍邊距Bug,為了避免出現(xiàn)bug,我們就利用“display:inline;”,所以他們兩個(gè)的CSS就這么定義:#leftArticle,#rightInfomargin:10px; float:left; display:inline; 下面就開始對(duì)他們單個(gè)定義 ,在這

19、這前,你需要意識(shí)到,原本leftArticle和rightInfo癿寬度分別為 680px和320px,當(dāng)存在10px的外邊距后,如果再給他們用CSS定義寬度的話,那么寬度的數(shù)值就變?yōu)?60px和300px,都要減去20像素 (為什么是20px,因?yàn)榇嬖?0px左外邊距和10px右外邊距) #leftArticlewidth:660px; #rightInfowidth:300px; 我們繼續(xù)觀察左側(cè)的leftArticle,是不是有個(gè)圖片,圖片是不是可以點(diǎn)擊的,以后遇到圖片鏈接這種情況,第一反應(yīng)就是先將這兩塊給設(shè)置成塊狀元素,我們?cè)谶@里用駱駝命名法,給圖片外面的鏈接起個(gè)id為articleP

20、icA,意思是文章圖片外部的鏈接 相應(yīng)癿CSS如下 #articlePicA,#articlePicA imgdisplay:block; 接下來,設(shè)置h1標(biāo)題的樣式:#leftArticle h1margin:20px 0; font-size:24px; font-family:微軟雅黑, 黑體; 預(yù)覽頁面后,發(fā)現(xiàn)字體變了,但是大小卻沒有變化,原因是由于瀏覓器存在默認(rèn)樣式表產(chǎn)生的,所以我們就需要對(duì)h1進(jìn)行重置,如下: h1font-size:100%; 對(duì)標(biāo)題內(nèi)的鏈接的樣式進(jìn)行進(jìn)一步定義: #leftArticle h1 acolor:#900; text-decoration:none;

21、 #leftArticle h1 a:hovertext-decoration:underline; 對(duì)于內(nèi)容:顏色為 “#333”的黑色,并且每段文字都會(huì)縮進(jìn)兩個(gè)文字,每段文字距離下段文字之間的距離是30px,文字大小為14px,CSS如下定義: #leftArticle pcolor:#333; text-indent:2em; margin-bottom:30px; font-size:14px; 下面輪到定義rightInfo版塊的樣式了,從效果圖里不難看出,“職業(yè)生涯”和“好職推薦”之間有10px的距離,實(shí)現(xiàn)這個(gè)效果我們就采取設(shè)置dl癿下外邊距的做法 #rightInfo dlmar

22、gin-bottom:10px; 針對(duì)每個(gè)版塊的標(biāo)題dt的定義,如下: #rightInfo dl dt background:url(./images/title.jpg) no-repeat; height:32px; line-height:32px; color:#FFF; font-size:14px; font-weight:bold; text-indent:20px; 下面是針對(duì)dd癿定義 #rightInfo dl dd height:24px; line-height:24px; background:url(./images/dot.gif) no-repeat 7px

23、10px; text-indent:16px; 重點(diǎn)解釋一下第三句,第三句的目的是將做好的小紅點(diǎn)圖片dot.gif設(shè)置為dd癿背景且不平鋪,距離dd左側(cè)癿距離為7px,上面的距離為10px; dd里面的鏈接顏色,定義如下: #rightInfo dl dd acolor:#333; text-decoration:none; #rightInfo dl dd a:hovercolor:#900; text-decoration:underline; 【第十一步第十一步】 設(shè)置設(shè)置footer為一個(gè)顏色為#393838灰色塊,與上部的content距離是10px,自身高度是70px,文字顏色為灰

24、白色(#ccc)且水平居中,文字與footer頂部的距離為18px,行距也是 18px,樣式定義如下: #footer background:#393838; height:52px; line-height:18px; margin-top:10px;padding-top:18px; text-align:center; color:#ccc; font-size:12px; 最后,設(shè)置footer里的a的樣式為:#footer acolor:#ccc; text-decoration:none; #footer a:hovertext-decoration:underline; 細(xì)心癿同

25、學(xué)會(huì)發(fā)現(xiàn),頁面內(nèi)的英文的字體全部是“宋體”,不是十分的美觀,不如英文帯用的字體verdana,那我們就給整個(gè)頁面內(nèi)的文字字體設(shè)置首選字體為“verdana”,只需要在body癿樣式里,加入“font-family”就可以了 bodybackground:url(./images/clouds.gif) repeat-x; padding-top:45px; font-family:Verdana, Geneva, sans-serif; 護(hù)展1,實(shí)現(xiàn)以下效果:現(xiàn)在我們就來做一下這個(gè)效果分析:分析:右上角的“我要充電”是不會(huì)跟隨瀏覽器大小的改變,而去改變它在瀏覽器右上角的位置,所以這個(gè)毫不猶豫的

26、用“絕對(duì)定位”,另外它是可以點(diǎn)擊的,所以結(jié)構(gòu)中就是鏈接。思路:思路:把身為內(nèi)聯(lián)元素的鏈接a,先轉(zhuǎn)化為塊狀元素,設(shè)置寬高,然后將圖片設(shè)置為a的背景,當(dāng)鼠標(biāo)移動(dòng)上去的時(shí)候換背景就可以了。這里用到這兩張圖片,圖片大小為107像素X107像素。 HTML代碼:代碼: CSS代碼:代碼: #linkstudydisplay:block;width:107px;height:107px;background:url(./images/applyNormal.png) no-repeat;position:absolute;top:0;right:0;#linkstudy:hoverbackground:u

27、rl(./images/applyHover.png) no-repeat;擴(kuò)展2:實(shí)現(xiàn)以下效果:根據(jù)上節(jié)課說的,只需要讓外面的盒子的定位屬性為相對(duì)定位relative就可以了,也就是說讓banner這個(gè)盒子的position的值為relative就可以 修改代碼如下:HTML改為: CSS:#bannerwidth:1000px; height:292px; background:url(./images/banner.jpg) no-repeat; position:relative; margin:10px auto;#bannerlogodisplay:block; width:1000px; height:292px; margin:10px auto; #linkstudydisplay:block;width:107px;height:107px;background:url(./images/applyNormal.png) no-repeat;position:absolute;top

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論