電子商務(wù)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)論文(已改無(wú)錯(cuò)字)
2022-07-25 16:20:51 本頁(yè)面
【正文】 對(duì)父級(jí)中的所有HTML標(biāo)簽進(jìn)行樣式定義，可對(duì)具有共同樣式的標(biāo)簽樣式進(jìn)行定義，這樣可以大大精簡(jiǎn)代碼。 CSS盒子模型 盒子模型是CSS控制頁(yè)面時(shí)一個(gè)很重要的概念，只要很好地掌握了盒子模型以及其中每個(gè)元素的用法，才能真正的控制好頁(yè)面中的各個(gè)元素。所有頁(yè)面中的元素都可以看成是盒子，占據(jù)著一定的頁(yè)面空間，一般說(shuō)來(lái)這些被占據(jù)的空間往往要比單純的內(nèi)容大。換句話說(shuō)，可以通過(guò)調(diào)整盒子的邊距和距離等參數(shù)，來(lái)調(diào)節(jié)盒子的大小。一個(gè)頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)相互影響，因此掌握盒子模型需要從倆方面來(lái)理解。一是理解一個(gè)孤立的盒子的內(nèi)部結(jié)構(gòu)，二是理解多個(gè)盒子之間的相互關(guān)系。 在CSS中，一個(gè)獨(dú)立的盒子模型由content內(nèi)容，border邊框，padding內(nèi)邊距和margin外邊距4個(gè)部分組成。 一個(gè)盒子實(shí)際所占有的寬度或高度是由內(nèi)容+內(nèi)邊距+邊框+外邊距組成的。在CSS中，可以通過(guò)設(shè)定width和height的值來(lái)控制內(nèi)容所占的矩形的大小。并且對(duì)于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的border、padding與margin。因此只要利用好這些屬性就能夠?qū)崿F(xiàn)各種各樣的排版效果。 CSS+DIV的基本設(shè)計(jì) 若采取DIV+CSS的網(wǎng)頁(yè)布局結(jié)構(gòu)，首先需要用div來(lái)分塊，定義語(yǔ)義結(jié)構(gòu)；然后用CSS來(lái)定位和添加樣式，如浮動(dòng)、位置、對(duì)齊屬性、加入背景等；然后用CSS定義的各個(gè)塊中添加相應(yīng)的樣式，如文字、圖片等。用div標(biāo)記把網(wǎng)頁(yè)區(qū)分成不同模塊，包括header、content(其中有sidebar邊欄區(qū)域和main主體區(qū)域)、footer三個(gè)區(qū)域，分別作為網(wǎng)頁(yè)的頭部、內(nèi)容和版權(quán)區(qū)域。編寫(xiě)HTML文檔代碼：bodydiv id=”container”div id=”header”頭部/divdiv id=”content”div id=”sidebar”邊欄/divdiv id=”main”內(nèi)容/div/divdiv id=”footer”版權(quán)/div/div/body設(shè)置CSS樣式代碼： container{margin:0。width:90%。} container{margin:0。width:90%。} header{height:200px。margintop:20px。border:2px solid。} content{height:500px。width:100%。marginbottom:10px。} sidebar{float:right。width:30%。height:500px。border:1px solid。} main{float:left。width:70%。height:400px。border:2px solid。} footer{height:60px。border:1px solid。} 其中，width屬性設(shè)置為百分比形式，表示當(dāng)窗口大小發(fā)生變化時(shí)，頁(yè)面的寬度也隨之變化。Container的margin屬性為0 auto，表示上下邊距為0像素，auto表示左右邊距為自動(dòng)，實(shí)現(xiàn)網(wǎng)頁(yè)的居中顯示。Sidebar的float屬性為right，標(biāo)識(shí)靠右對(duì)齊，main的float屬性為left，表示靠左對(duì)齊，實(shí)現(xiàn)中間兩列整欄的顯示效果。Border屬性為2px solid，表示2個(gè)像素寬的實(shí)線邊框。 Div CSS排版對(duì)網(wǎng)站優(yōu)化的影響 第一：spider爬行效率 Div CSS的代碼精簡(jiǎn)是table無(wú)法比擬的，div CSS實(shí)現(xiàn)了樣式和布局完全分離。 第二：網(wǎng)頁(yè)打開(kāi)速度 DIV CSS布局較Table布局減少了頁(yè)面代碼，加載速度得到很大的提高，這在Spider爬行時(shí)是非常有利的。過(guò)多的頁(yè)面代碼可能造成爬行超時(shí)，Spider就會(huì)認(rèn)為這個(gè)頁(yè)面無(wú)法訪問(wèn)，影響收錄及權(quán)重。題外：tale布局的頁(yè)面打開(kāi)原理：一般table布局的頁(yè)面是大表格套中表格，中表格嵌套小表格，小表格再套小小表格。一般第一個(gè)表格（最外邊的）要讀取完才能顯示出來(lái)，讀取大表格的同時(shí)又要讀取大表格中的小表格，大大加長(zhǎng)了網(wǎng)頁(yè)打開(kāi)速度。 第三：對(duì)排名的影響 基于XTHML標(biāo)準(zhǔn)的DIV CSS布局，一般在設(shè)計(jì)完成后會(huì)盡可能的完善到能通過(guò)W3C驗(yàn)證。截止目前沒(méi)有搜索引擎表示排名規(guī)則會(huì)傾向于符合 W3C標(biāo)準(zhǔn)的網(wǎng)站或頁(yè)面，但事實(shí)證明使用XTHML架構(gòu)的網(wǎng)站排名狀況一般都不錯(cuò)。 CSS和HTML的結(jié)合 CSS與HTML的結(jié)合使用完美的實(shí)現(xiàn)了網(wǎng)頁(yè)表現(xiàn)與內(nèi)容的分離。網(wǎng)頁(yè)設(shè)計(jì)通常使用CSS來(lái)控制網(wǎng)頁(yè)的樣式，其中包括頁(yè)面的布局、字體、背景等等信息。而HTML則用來(lái)羅列網(wǎng)頁(yè)中的內(nèi)容，其中包括文本、圖片等。 CSS樣式表可以以多種方式應(yīng)用到HTML頁(yè)面當(dāng)中，但最常用最好的方式是外部連接。這種方式是將CSS樣式代碼放入一個(gè)外部文件中，再由HTML中的link元素進(jìn)行調(diào)用。這樣做的好處是可以使多個(gè)網(wǎng)頁(yè)調(diào)用同一個(gè)樣式表文件，最大限度的實(shí)現(xiàn)了代碼重用及網(wǎng)站文件的最優(yōu)化配置。具體的使用方法為：在HTML頁(yè)面中的head標(biāo)簽下使用link元素調(diào)用。 第四章 CSS+DIV的應(yīng)用 企業(yè)板塊的分析 企業(yè)板塊頁(yè)面布局簡(jiǎn)述企業(yè)板塊最重要的是公司簡(jiǎn)介，承擔(dān)著反映企業(yè)的重要信息，包括企業(yè)概況、發(fā)展歷史、主要業(yè)績(jī)以及組織結(jié)構(gòu)等，作用是讓瀏覽者對(duì)企業(yè)的情況有一個(gè)明確的掌握。外界可以憑借企業(yè)網(wǎng)站了解認(rèn)識(shí)企業(yè)的運(yùn)營(yíng)，包括業(yè)務(wù)范圍、運(yùn)營(yíng)狀況、性質(zhì)和實(shí)力等等方面的信息，有一個(gè)了解的平臺(tái)，促使更多的合作。公司簡(jiǎn)介的主要內(nèi)容是準(zhǔn)確并且完整地描述企業(yè)的
法律信息相關(guān)推薦
鄂ICP備17016276號(hào)-1