仿

北京大學(xué)

網(wǎng)站

頁(yè)面

詳細(xì)

說(shuō)明書(shū)

實(shí)驗(yàn)?zāi)康?/p>

通過(guò)仿北京大學(xué)官網(wǎng)熟悉網(wǎng)站整體布局，調(diào)用css方法，利用仿大網(wǎng)站了解網(wǎng)站的具體頁(yè)面所實(shí)現(xiàn)的功能，加強(qiáng)自身的

網(wǎng)頁(yè)

設(shè)計(jì)功底。

設(shè)計(jì)時(shí)間

設(shè)計(jì)人員

部門(mén)：

成員：

實(shí)驗(yàn)要求

仿北京大學(xué)首頁(yè)（index.html）,北京大學(xué)新聞網(wǎng)(new.html),北京大學(xué)文章列表頁(yè)（list.html）,北京大學(xué)文章內(nèi)容頁(yè)（content.html）,北京大學(xué)BBS登錄頁(yè)(login.html).

設(shè)計(jì)工具

Sublime Text3(理由：軟件小，運(yùn)行流暢，界面好)

實(shí)驗(yàn)?zāi)繕?biāo)

將所有頁(yè)面除js的部分完整的模仿出。

能清楚的了解所用的css樣式等。

任務(wù)概述

先將所有文件分為3個(gè)文件夾，圖片（img）、css樣式（style）、源碼（根目錄）。 然后是對(duì)北京大學(xué)網(wǎng)頁(yè)出現(xiàn)的圖片進(jìn)行下載。并所有文件都使用reset.css對(duì)其重置樣式初始化。 首頁(yè)（index.html）

Css文件為style.css

完成一個(gè)網(wǎng)頁(yè)，顯示對(duì)其布局，講該頁(yè)面看成3個(gè)部分，頂部（toper）、中間（mainer）、底部（footer）;

然后是對(duì)各個(gè)部分進(jìn)行在細(xì)化。首頁(yè)導(dǎo)航欄的二級(jí)菜單用到的是偽類(lèi)知識(shí)點(diǎn)。并對(duì)子菜單進(jìn)行相對(duì)定位。使其鋪滿(mǎn)。

中間部分先將其分為左右兩部分，并使用浮動(dòng)。

然后是下部分的使用table,

首頁(yè)基本結(jié)束。

新聞網(wǎng)（new.html）

因?yàn)樾侣劸W(wǎng)是與列表頁(yè)和內(nèi)容頁(yè)頂部底部相同，所以公用一個(gè)newstyle.css,頂部。 頂部用了 flash,實(shí)現(xiàn)代碼：

底部用的li列表。 3.列表頁(yè)（list.html） 引入新聞網(wǎng)css文件。并復(fù)制新聞網(wǎng)頂部底部代碼。 中間基本為ul li列表：

4.內(nèi)容頁(yè)（content.html） 同樣引入newstyle.css，將中間部分分為左右2部分，左部分文章用p標(biāo)簽實(shí)現(xiàn)，右邊為背景色為灰的空div。

5.登錄頁(yè)（login.html） 因?yàn)榇隧?yè)面內(nèi)容較少，所以css不另分文件。先將其背景色設(shè)為黑色，上部分為圖片，下部分為表單。

最后是后期的調(diào)試及維護(hù)，將其運(yùn)行于各瀏覽器，測(cè)試是否兼容。測(cè)試分辨率須大于1080*300； 實(shí)驗(yàn)總結(jié)

此項(xiàng)目主要需熟悉css樣式及布局。通過(guò)此項(xiàng)目我們可以清楚的了解一個(gè)網(wǎng)站的布局構(gòu)架。以及代碼的編寫(xiě)規(guī)范

?