實驗2朱建宇css_第1頁
實驗2朱建宇css_第2頁
實驗2朱建宇css_第3頁
實驗2朱建宇css_第4頁
實驗2朱建宇css_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、南京信息工程大學 Web技術(shù)與應(yīng)用 實驗(實習)報告實驗(實習)名稱 CSS樣式表 實驗(實習)日期 2016.10.31 得分 指導(dǎo)老師 馬瑞 系 計算機與軟件學院 專業(yè) 軟件工程 班級 14軟工（專轉(zhuǎn)本）姓名 朱建宇 學號 20148308007 一、實驗?zāi)康?、掌握CSS的定義及應(yīng)用。2、掌握CSS樣式的語法規(guī)則；3、掌握CSS樣式表的定義位置；4、掌握CSS樣式表的引用的幾種方式 二、 實驗內(nèi)容與步驟1、 比較在html文件中使用CSS樣式前后的變化。（1）將以下文件在記事本中保存，以.html存盤。<html><body><h2><font

2、color="#0000FF" face="黑體">CSS標記1</font></h2><p>CSS標記的正文內(nèi)容1</p><h2><font color="#0000FF" face="黑體">CSS標記2</font></h2><p>CSS標記的正文內(nèi)容2</p><h2><font color="#0000FF" face="黑體"

3、;>CSS標記3</font></h2><p>CSS標記的正文內(nèi)容3</p><h2><font color="#0000FF" face="黑體">CSS標記4</font></h2><p>CSS標記的正文內(nèi)容4</p></body></html>練習：將以上h標題改為紅色。保存后刷新。<h2><font color="#FF0000" face="黑體&qu

4、ot;>CSS標記1</font></h2><p>CSS標記的正文內(nèi)容1</p><h2><font color="#FF0000" face="黑體">CSS標記2</font></h2><p>CSS標記的正文內(nèi)容2</p><h2><font color="#FF0000" face="黑體">CSS標記3</font></h2><p&g

5、t;CSS標記的正文內(nèi)容3</p><h2><font color="#FF0000" face="黑體">CSS標記4</font></h2><p>CSS標記的正文內(nèi)容4</p>（2）將以上文件打開，利用鏈接方式使用CSS樣式表（選擇符定義為標記選擇符組）改寫上面代碼。 自己給出改寫后代碼練習：將上面h2標題改為紅色、幼圓字體。比較CSS的優(yōu)勢。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/

6、EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="tex

7、t/css">#h2color:red;font-family:"幼圓"；</style></head><body><h2 id="h2">CSS標記1</h2><p>CSS標記的正文內(nèi)容1</p><h2 id="h2">CSS標記2</h2><p>CSS標記的正文內(nèi)容2</p><h2 id="h2">CSS標記3</h2><p>CS

8、S標記的正文內(nèi)容3</p><h2 id="h2">CSS標記4</h2><p>CSS標記的正文內(nèi)容4</p></body></html>參考書中2.3.6節(jié)css樣式屬性，完成下面任務(wù)2、利用span標簽完成Google公司的Logo設(shè)計要求如下：（1）使用嵌入式引入CSS樣式表。（2）使用類選擇器定義元素。（3）通過控制不同的類，分別為第一個字母“G”設(shè)置為藍色、加粗、60px字體；第二個字母“o”設(shè)置為紅色、加粗、60px字體；第三個字母“o”設(shè)置為黃色、加粗、60px字體；第四個字母“

9、g”設(shè)置為藍色、加粗、60px字體。（4）剩余字母“l(fā)e”按默認樣式輸出。代碼：<style type="text/css">.a1color:#00F;font-weight:bold;font-size:60px.a2color:#F00;font-weight:bold;font-size:60px.a3color:#FF0;font-weight:bold;font-size:60px.a4color:#00F;font-weight:bold;font-size:60px</style><body><p><sp

10、an class="a1">G</span><span class="a2">o</span><span class="a3">o</span><span class="a4">g</span><span>l</span><span>e</span></body>截圖：3、請做出網(wǎng)頁效果如下圖所示：要求如下：（1）設(shè)置所有文本為微軟雅黑、14像素、黑色字體。（2）“新

11、浪”、“新浪網(wǎng)”為紅色字體，“博客首頁”為藍色字體，網(wǎng)址及日期為綠色字體。（3）設(shè)置標題為18像素、左對齊、下劃線的效果。當鼠標移到超鏈接的文字上顯示十字型光標（屬性值：crosshair）。訪問后超鏈接的格式為顏色：綠色，無下劃線。（4）設(shè)置文本“-百度快照-評價”為灰色、下劃線的效果。代碼：<style>bodyfont-family:"微軟雅黑"color:#000;font-size:14px.b1color:#F00/*紅色*/.b2color:#00F/*紅色*/.b3color:#0F0/*綠色*/.b4font-size:18px;text-de

12、coration:underline;cursor:crosshair/*下劃線*/.b5font-size:20px;.b6color:#666;font-size:14px;text-decoration:underline/*下劃線*/</style><body> <a href=""> <p class="b4"> <span class="b1">新浪</span> <span class="b2">博客首頁</sp

13、an> <span class="b1">新浪網(wǎng)</span> </p> </a><p><span>新浪網(wǎng)博客頻道是全中國最主流，最具人氣的博客頻道。擁有最耀眼的娛樂明星博客、最知性的名人博客、最動人的情感博客、最自我的草根博客。</span> </p><p><span class="b3"> <span class="b6">-百度快照評價</span></p></p

14、></body>截圖：4、請做出網(wǎng)頁效果如下圖所示。要求如下：（1）設(shè)置標題“春天”為16像素、紅色、加粗、居中、下劃線的效果。（2）設(shè)置所有文本為宋體、12像素、綠色字體，“春季”字體顏色設(shè)為紅色。（3）設(shè)置文本首行縮進2個字符，文字行間距為20像素。代碼：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&qu

15、ot;/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">.spring2color:#F00bodyfont-family:"宋體"color:#0F0;font-size:12px.spring1c

16、olor:#F00;font-size:16px;font-weight:bold;text-decoration:underline;p.s3text-indent:2em;</style></head><body><p align="center"><span class="spring1">春天</span></p><p class="s3" style="margin:20px"><span class=&

17、quot;spring2">春季</span>，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。<span class="spring2">春季</span>植物開始發(fā)芽生長，許多鮮花開放。冬眠的動物蘇醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地想繁殖地進發(fā)。許多動物在這段時里了發(fā)情，因而中國也將<span class="spring2">春季</span>稱為“萬物復(fù)蘇”的季節(jié)。<span class="

18、spring2">春季</span>氣溫和生物界的變化對人的心理和生理也有影響。</p></body></html>截圖：5、使用樣式表定義表格： （1）首先使用記事本建立一個基本的HTML文件, 輸入如下代碼（可復(fù)制）： 保存文件為：html格式： <HTML> <HEAD> <TITLE> 用戶信息 </TITLE> </HEAD><BODY> <form action = "" method = "post"

19、 name=”form1”> <table border = 3 id = "table1" > <caption><center>用戶信息</center></caption> <tr> <td>請輸入姓名:</td> <td> <input type = "text" id = "username" name = "username"></td> </tr> &l

20、t;tr> <td>請輸入密碼:</td> <td><input type = "password" id = "password1" name = "password1"></td> </tr> <tr> <td>請確認密碼:</td> <td><input type = "password" id = "password2" name = "passw

21、ord2"></td> </tr> <tr> <td> 愛好:</td> <td> <input type = "checkbox" name = "checkbox1" value = "1" id= "Favirate1"> 足球 <input type = "checkbox" name = "checkbox1" value = "2" id=

22、 "Favirate2"> 上網(wǎng) <input type = "checkbox" name = "checkbox1" value = "3" id= "Favirate3"> 音樂 <input type = "checkbox" name = "checkbox1" value = "4" id= "Favirate4"> 看書 </td> </tr> &l

23、t;tr> <td>性別:</td> <td> <input type = "radio" name = "sex" checked>男 <input type = "radio" name = "sex">女</td> </tr> <tr> <td>所在省份</td> <td> <select size = "1" name = "city&

24、quot; tabindex = "5" id = "city"> <option selected value = "beijing">北京市 </option> <option value = "jiangsu">江蘇省 </option> </select></td> </tr> <tr><td colspan="2" align="center"> <

25、;input type = "submit" id = "reg" value = "提交"> <input type = "reset" id = "reset" value = "重置"> </td></tr> </table> </form> </BODY></HTML>（參考下面提供的樣式表對上面的用戶信息進行修飾）form border: 1px dotted #AAAAAA;

26、padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;select width: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;.mystyle1 text-align:center; fong-size:25pt; font-family:"隸書" background-color:

27、gray; .mystyle2 text-align:center; fong-size:9pt; color:#000033; background-color:#ffcccc; font-family:"隸書" border:#ccccff; border-style:groove; 打開瀏覽器查看效果。 （姓名文本框要求輸入自己的真實姓名） 代碼：<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu

28、ot; /> <TITLE> 用戶信息 </TITLE> <style type="text/css"> form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color:#CFF;border: 1px solid #00008B;select width: 80px;color:#0FC;background-color:#63F;border: 1px

29、 solid #00008B;.mystyle1 text-align:center; fong-size:25pt; font-family:"隸書" background-color:gray; .mystyle2 text-align:center; fong-size:9pt; color:#000033; background-color:#FFF; font-family:"隸書" border:#ccccff; border-style:groove; </style></HEAD><BODY> <

30、form action = "" method = "post" name="form1"> <table border = 3 id = "table1" > <caption><center>用戶信息</center></caption> <tr> <td class="mystyle1">請輸入姓名:</td> <td class="mystyle2"> &

31、lt;input name = "username" type = "text" id = "username" value="曹鼎"></td> </tr> <tr> <td class="mystyle1">請輸入密碼:</td> <td class="mystyle2"><input type = "password" id = "password1&quo

32、t; name = "password1"></td> </tr> <tr> <td class="mystyle1">請確認密碼:</td> <td class="mystyle2"><input type = "password" id = "password2" name = "password2"></td> </tr> <tr> <td

33、 class="mystyle1"> 愛好:</td> <td class="mystyle2"> <input type = "checkbox" name = "checkbox1" value = "1" id= "Favirate1"> 足球 <input type = "checkbox" name = "checkbox1" value = "2" id= "Favirate2"> 上網(wǎng) <input type = "checkbox" name = "checkbox1" value = "3" id= "Favirate3"> 音樂 <inp

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論