web前端技術(shù)實驗報告實驗二

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

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

3、inkcolor:#FFF;a:visitedcolor:#FFF;a:hovercolor:#CCC;a:activecolor:#333;首頁| 專輯 | 獲獎記錄 | 演藝經(jīng)歷 | 人物評價 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;六、實驗總結(jié)1 、我學(xué)會了利用 CSS+