web前端技術(shù)實(shí)驗(yàn)報(bào)告實(shí)驗(yàn)二

1、Web前端技術(shù)實(shí)驗(yàn)報(bào)告課程名稱：Web 前端技術(shù)實(shí)驗(yàn)名稱： css+div網(wǎng)頁設(shè)計(jì)系別班級：計(jì)科系1306 班學(xué)生姓名：宋馨芳學(xué)生學(xué)號：2013100603指導(dǎo)老師：楊曉敏一、實(shí)驗(yàn)?zāi)康? 、掌握 CSS基本概念、 CSS類型及四種 CSS樣式定義的方法2 、理解 DIV 的概念3 、掌握 DIV 的屬性設(shè)置方法4 、學(xué)會使用 DIV+CSS進(jìn)行網(wǎng)頁布局設(shè)計(jì)二、內(nèi)容及要求1、定義四種樣式表，并學(xué)會引用2、自定義外部樣式表，并能在web頁面中導(dǎo)入或鏈入外部樣式表。3、使用 DIV+CSS進(jìn)行簡單的網(wǎng)頁布局4、區(qū)別 CSS選擇符類型，并能靈活運(yùn)用各種選擇符樣式定義三、實(shí)驗(yàn)原理使用了 css+div四

2、、實(shí)驗(yàn)步驟1、確立自己的網(wǎng)頁主題選擇了韓國 FTISLAND組合隊(duì)長李弘基作為本次網(wǎng)頁設(shè)計(jì)的主題。2 、收集資料及設(shè)置重點(diǎn)李弘基的資料從格式上分為兩類：圖片、文本，從內(nèi)容上大致分為：基本信息、演藝經(jīng)歷、獲獎(jiǎng)記錄、人物評價(jià)等。3、網(wǎng)頁基本設(shè)計(jì)a、分設(shè)一個(gè)基礎(chǔ)網(wǎng)頁，開始界面。開始界面可以鏈接到其他界面。b、設(shè)計(jì)開始頁為整圖如下：圖一：開始界面c、點(diǎn)擊上方的不同文字鏈接進(jìn)入不同的查看頁面。如圖為專輯介紹頁：圖二：介紹專輯主頁如圖為演藝經(jīng)歷介紹頁：圖三：介紹演藝經(jīng)歷如圖為人物評價(jià)介紹頁：圖四：介紹人物評價(jià)如圖為獲獎(jiǎng)記錄介紹頁：圖五：介紹頁獲獎(jiǎng)記錄五、實(shí)驗(yàn)代碼主要代碼：1. 主頁： 李弘基資料卡 a:l

3、inkcolor:#FFF;a:visitedcolor:#FFF;a:hovercolor:#CCC;a:activecolor:#333;首頁| 專輯 | 獲獎(jiǎng)記錄 | 演藝經(jīng)歷 | 人物評價(jià) 2.layout.css文件bodyfont-family: Verdana;font-size: 100;margin: 0;text-align: justify;pmargin:2px;#Containermargin:0 auto;width:100%;#Headerheight: 350px;margin-bottom: 5px;background-image: url(n.jpg);#

4、PageBodyheight: 400px;#leftfloat: left;width: 200px;height: 500px;background:#FFF;#MainBodymargin:o auto;width: 1000px;height: 500px;#rightfloat: right;width: 200px;height: 500px;background:#FFF;#Footerheight: 80px;background-image: url(m.jpg);text-align: center;font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial, sans-serif;font-size: 13px;padding-top: 10px;imgfloat:center;spanwidth:100px;margin-top:50px;font-size:20px;font-family:華文新魏 ;cursor:pointer;h3text-align: center;color: #666;font-size: 24px;六、實(shí)驗(yàn)總結(jié)1 、我學(xué)會了利用 CSS+