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

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

3、inkcolor:#FFF;a:visitedcolor:#FFF;a:hovercolor:#CCC;a:activecolor:#333;首頁(yè)| 專輯 | 獲獎(jiǎng)記錄 | 演藝經(jīng)歷 | 人物評(pí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é)會(huì)了利用 CSS+