第一篇:CSS頁面布局及樣式設計實驗報告
實 驗 報 告
實驗項目名稱: CSS頁面布局及樣式設計
(所屬課程: web系統與技術)
學 院:計算機學院 專業班級:11級計科信息 姓 名: 學 號: 實驗日期: 實驗地點:A06-404 合作者: 指導教師:李
本實驗項目成績: 教師簽字: 日期:
一、實驗目的
(1)掌握CSS中的定位屬性使用方法。(2)掌握DIV+CSS的頁面布局方式。(3)掌握CSS中的常用屬性的使用方法。(4)理解CSS的樣式構造。
二、實驗條件
安裝Web開發環境的微機。
三、實驗內容
(1)重新對聊天室的注冊頁面、登陸頁面和聊天頁面進行頁面布局。(1)對聊天室的注冊頁面、登陸頁面和聊天頁面進行樣式設計。
四、實驗步驟
(1)注冊頁面使用CSS將注冊表單居中顯示,表單內嵌入表格將文本與輸入域格式化顯示,表單內使用label標簽。
(2)登錄頁面中添加div層用于顯示在線用戶數。
(3)登錄頁面使用div將登錄表單,在線用戶數,logo圖片,超鏈接等頁面元素重新定位布局。
(4)聊天頁面改用div標簽并使用CSS的position定位屬性進行布局,框架內的獨立頁面使用float屬性進行布局。
(5)使用CSS設置三個頁面的背景顏色或背景圖片。(6)注冊頁面使用CSS設計所有輸入框和提交按鈕的樣式。
(7)登錄頁面使用CSS設置的超鏈接的字體和下劃線、登錄表單使用圓頂角、在線用戶數使用圖片數字,使用CSS設計登錄按鈕的顯示樣式。
第1頁
共8頁 實 驗 報 告
(8)聊天頁面中使用CSS設計信息發送表單和發送按鈕的樣式,設計用戶信息列表和聊天信息段落的的顯示樣式。
五、實驗結果
注冊界面效果圖及代碼: