第一篇:css 實驗報告
實驗題目使用CCS美化“北京奧運吉祥物——福娃”網(wǎng)站
一、實驗?zāi)康?/p>
用CCS美化網(wǎng)站,來控制網(wǎng)頁樣式。首先進行布局分析包括網(wǎng)頁的頭部,網(wǎng)頁主體等。然后是摸塊布局設(shè)計,頁面總體布局設(shè)計、鏈接頁面的CSS的文件、要遵循設(shè)計頁面的通用規(guī)則,設(shè)計#heard對象部分由網(wǎng)頁的logo部分和導(dǎo)航區(qū)構(gòu)成,在是設(shè)計#content對象部分,content分為三列,第一行由分為頭片新聞區(qū),新聞區(qū)和公告欄,第二行分為福娃簡介和福娃揭秘,第三行是精彩圖片區(qū)、名人說福娃和投票調(diào)查區(qū)。最終使CSS用美化網(wǎng)站.。通過本次實驗?zāi)苁炀氄莆誄SS美化網(wǎng)站的基本技巧和技能,在以后的學(xué)習(xí)、工作生活中能夠應(yīng)用,為我們工作帶來,生活帶來方便。
二、實驗內(nèi)容
1、頁面總體布局設(shè)計,可以通過對選擇“插入記錄
布局對象
DIV標簽”命令的方法進行布局,也可以通過在代碼視圖中直接編寫源代碼的方進行布局,布局頁面的HTM框架的代碼。、連接頁面的CSS文件,先建一個名為styie.css的文件,然后打開CSS樣式面板,單擊附加樣式表,連接超鏈接。、設(shè)計網(wǎng)頁的通用規(guī)則。通用規(guī)則對所有的標記都起作用,絕大部分標記都會涉及屬性。打開CSS樣式面板雙擊新建的那個文件,單擊確定按鈕,用相同的方法設(shè)置BODAY的字體和方法。、設(shè)計#header對象部分。包括logo#logo和導(dǎo)航#nav.網(wǎng)頁logo部分是一個中間欄固定,左右欄自適應(yīng)的結(jié)構(gòu),并在fianshlogo中插入透明fiansh、動畫;導(dǎo)航區(qū)域由#NAV#navbgl兩個區(qū)組成,使用css中超鏈接屬性。、設(shè)計#content對象部分,#maincon為中間列,寬度固定,左右兩列沒有內(nèi)容因此不需要考慮,而主體顯示部分為三行,分別顯示網(wǎng)頁不同區(qū)域。、設(shè)計#footer對象部分。
三、實驗情況和實驗結(jié)果 頁面總體布局
2網(wǎng)頁logo效果圖
3網(wǎng)頁導(dǎo)航區(qū)效果圖
4網(wǎng)頁#firstmain效果圖
四、CSS層疊樣式表,是用于控制網(wǎng)頁樣式,是以HTML為基礎(chǔ)提供豐富的格式化功能,由字體,顏色,背景,整體排版等。
1、了解了css的概念和特點,在網(wǎng)頁中使用css的四種方式及選擇器的語法格式及三種選擇器;標簽選擇器、類選擇器和ID選擇器。
2、掌握了CSSde 創(chuàng)建及管理方式和其中常用的屬性,應(yīng)用css+DIV進行頁實驗體會 面布局的DIV標記,SPNA標記,盒子模型,元素的定位方式,布局流程和常用的布局類型。
3、學(xué)會了應(yīng)用SCC+DIV對“北京奧運混吉祥物——福娃”網(wǎng)站的主頁重新進行了設(shè)計的過程。、CSS是以HTML為基礎(chǔ),提供豐富的格式化功能,是將樣式信息與網(wǎng)頁內(nèi)容分離的一種記性語言。
5、在學(xué)會使用CSS美化網(wǎng)站后,感CSS是一個神奇的東西,使我感覺好奇,是什么力讓網(wǎng)頁可以這樣變化,在自己完完整整做了一遍后才知道其中的奧妙。
第二篇:CSS頁面布局及樣式設(shè)計實驗報告
實 驗 報 告
實驗項目名稱: CSS頁面布局及樣式設(shè)計
(所屬課程: web系統(tǒng)與技術(shù))
學(xué) 院:計算機學(xué)院 專業(yè)班級:11級計科信息 姓 名: 學(xué) 號: 實驗日期: 實驗地點:A06-404 合作者: 指導(dǎo)教師:李
本實驗項目成績: 教師簽字: 日期:
一、實驗?zāi)康?/p>
(1)掌握CSS中的定位屬性使用方法。(2)掌握DIV+CSS的頁面布局方式。(3)掌握CSS中的常用屬性的使用方法。(4)理解CSS的樣式構(gòu)造。
二、實驗條件
安裝Web開發(fā)環(huán)境的微機。
三、實驗內(nèi)容
(1)重新對聊天室的注冊頁面、登陸頁面和聊天頁面進行頁面布局。(1)對聊天室的注冊頁面、登陸頁面和聊天頁面進行樣式設(shè)計。
四、實驗步驟
(1)注冊頁面使用CSS將注冊表單居中顯示,表單內(nèi)嵌入表格將文本與輸入域格式化顯示,表單內(nèi)使用label標簽。
(2)登錄頁面中添加div層用于顯示在線用戶數(shù)。
(3)登錄頁面使用div將登錄表單,在線用戶數(shù),logo圖片,超鏈接等頁面元素重新定位布局。
(4)聊天頁面改用div標簽并使用CSS的position定位屬性進行布局,框架內(nèi)的獨立頁面使用float屬性進行布局。
(5)使用CSS設(shè)置三個頁面的背景顏色或背景圖片。(6)注冊頁面使用CSS設(shè)計所有輸入框和提交按鈕的樣式。
(7)登錄頁面使用CSS設(shè)置的超鏈接的字體和下劃線、登錄表單使用圓頂角、在線用戶數(shù)使用圖片數(shù)字,使用CSS設(shè)計登錄按鈕的顯示樣式。
第1頁
共8頁 實 驗 報 告
(8)聊天頁面中使用CSS設(shè)計信息發(fā)送表單和發(fā)送按鈕的樣式,設(shè)計用戶信息列表和聊天信息段落的的顯示樣式。
五、實驗結(jié)果
注冊界面效果圖及代碼: