網(wǎng)頁設(shè)計與制作實驗報告_第1頁
網(wǎng)頁設(shè)計與制作實驗報告_第2頁
網(wǎng)頁設(shè)計與制作實驗報告_第3頁
網(wǎng)頁設(shè)計與制作實驗報告_第4頁
網(wǎng)頁設(shè)計與制作實驗報告_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、.重慶工商大學(xué)管理學(xué)院實驗報告第15頁 共15頁重慶工商大學(xué)管理學(xué)院實 驗 報 告課程名稱:網(wǎng)頁設(shè)計與制作實例教程 實驗名稱：CSS基礎(chǔ) 班 級：信息管理與信息系統(tǒng)一班姓名： 唐杰 學(xué)號： 2013033132 同 組 人：_無_ 實驗日期：2015.12.03實驗地點：學(xué)創(chuàng)園8A303實驗成績：_指導(dǎo)教師：張世勇 1.實驗內(nèi)容 掌握CSS偽類；層疊；CSS選擇器基本操作。2.實驗環(huán)境（軟件、硬件及條件）在學(xué)創(chuàng)園的XP電腦上，進行網(wǎng)頁設(shè)計與制作。3. 實驗過程分析（包括主要步驟和主要截圖）實例（11-1）實驗步驟：<!DOCTYPE html PUBLIC "-/W3C/DTD

2、 XHTML 1.0 Transitional/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><

3、;style type="text/css"><!-li font-size: 12px;line-height: 22px;color: #535353;background-image: url(arrow1.gif);background-repeat: no-repeat;background-position: 0px 7px;padding-left: 11px;list-style-type: none;padding-left:11px;-></style></head><body><ul>&

4、lt;li>基于psd設(shè)計圖的網(wǎng)頁設(shè)計流程實例</li><li>dreamweaver spry框架的介紹與應(yīng)用</li><li>jQuery:the write less, do more</li><li>tab選項卡的各種實現(xiàn)方法匯總</li><li>web標準已經(jīng)成為主流的網(wǎng)頁設(shè)計方法</li><li>搜索引擎優(yōu)化的外部方法和內(nèi)部方法</li></ul></body></html>檢驗實驗：-實驗正確(實例11-2)

5、實驗步驟：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-

6、8" /><title>block&amp;inline</title><style type="text/css"><!-a font-size: 14px;line-height: 29px;font-weight: bold;text-decoration: none;letter-spacing: 5px;text-align: center;float: left;height: 29px;width: 102px;li display: inline;list-style-type: none;a

7、:link, a:visited color: #ffffff;background-image: url(1.gif);background-position: left top;a:hover color: #ffff00;background-image: url(1.gif);background-position: left bottom;-></style></head><body><ul><li><a href="#">新聞</a></li><li>

8、;<a href="#">體育</a></li><li><a href="#">財經(jīng)</a></li><li><a href="#">娛樂</a></li><li><a href="#">房產(chǎn)</a></li><li><a href="#">博客</a></li><

9、/ul></body></html>檢驗實驗：-實驗正確(實例11-3)實驗步驟：<<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="C

10、ontent-Type" content="text/html; charset=utf-8" /><title>背景圖片的</title><style type="text/css"><!-#top background-image: url(rc.gif);background-position: 0px -10px;height: 30px;width: 422px;#main background-image: url(book.jpg);background-repeat: no-rep

11、eat;background-position: 140px 10px;height: 200px;width: 420px;border-right-width: 1px;border-left-width: 1px;border-right-style: solid;border-left-style: solid;border-right-color: #dc5b5c;border-left-color: #dc5b5c;#bottom font-size: 1px;background-image: url(rc.gif);background-position: 0px 0px;he

12、ight: 5px;width: 422px;-></style></head><body><div id="top"></div><div id="main"></div><div id="bottom"></div></body></html>檢驗實驗：-實驗正確(習(xí)題1)實驗步驟：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transi

13、tional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>block&amp;inline</title>&l

14、t;style type="text/css"><!-a font-size: 14px;line-height: 29px;font-weight: bold;text-decoration: none;letter-spacing: 5px;text-align: center;float: left;height: 29px;width: 102px;li display: inline;list-style-type: none;a:link, a:visited color: #ffffff;background-image: url(1.gif);b

15、ackground-position: left top;a:hover color: #ffff00;background-image: url(1.gif);background-position: left bottom;ul background-color: #BCD0E8;border-right-width: 1px;border-left-width: 1px;border-right-style: solid;border-left-style: solid;border-right-color: #F00;border-left-color: #F00;height: 50

16、px;width: 700px;float: left;border-top: 20;left: auto;top: auto;right: auto;bottom: auto;clip: rect(auto,auto,auto,auto);-></style></head><body><ul><li><a href="#">新聞</a></li><li><a href="#">體育</a></li><

17、;li><a href="#">財經(jīng)</a></li><li><a href="#">娛樂</a></li><li><a href="#">房產(chǎn)</a></li><li><a href="#">博客</a></li></ul></body></html>檢驗實驗：-實驗正確(習(xí)題2)實驗步驟：CS

18、S#head background-color: #FFF;border: 1px dotted #00F;height: 300px;width: 500px;background-image:url(1.jpg)#head h1 font-size: 2em;color: #FFF;background-color: #0F0;#head h2 font-size: 2em;color: #FFF;background-color: #0F0;display: inline;charset "utf-8"/* CSS Document */網(wǎng)頁代碼<!DOCTYP

19、E html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><

20、;title>無標題文檔</title><link href="head1.css" rel="stylesheet" type="text/css" /></head><body><div id="head"> <p>這是head的內(nèi)容</p> <h1>這是h1的內(nèi)容</h1> <h2>這是h2的內(nèi)容</h2></div></body></html

21、>檢驗實驗：-實驗正確 (實例12-1)實驗代碼：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="

22、text/html; charset=utf-8" /><title>第一個盒子</title><style type="text/css"><!-#banner background-color: #efe;margin: 80px;padding: 40px;height: 150px;width: 300px;border: 1px solid #666;-></style></head><body><div id="banner">pa

23、dding在哪里？margin在哪里？</div></body></html>檢驗實驗：-實驗正確(實例12-2)實驗代碼：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><met

24、a http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>padding margin border</title><style type="text/css"><!-#banner font-size: 14px;line-height: 150%;background-color: #cccccc;height: 150px;width: 300px;margin-top: 20px;margin-

25、right: 30px;margin-bottom: 40px;margin-left: 50px;padding-top: 50px;padding-right: 40px;padding-bottom: 30px;padding-left: 20px;border-top-width: 2px;border-right-width: thin;border-bottom-width: 0.5em;border-left-width: 12px;border-top-style: dotted;border-right-style: dashed;border-bottom-style: d

26、ouble;border-left-style: inset;border-top-color: #000099;border-right-color: #000000;border-bottom-color: #000000;border-left-color: #ffffff;-></style></head><body><div id="banner">padding 、margin、border</div></body></html>檢驗實驗：-實驗正確 (實例12-3)實驗代

27、碼：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8&q

28、uot; /><title>框模型的寬度和高度</title><style type="text/css"><!-#main font-weight: bold;background-color: #ff9;margin: 30px;width: 202px;margin:30px aoto;padding:30px 49px;border: 4px double #999;#no_margin background-color: #fff;border: 1px dashed #333;height: 140px;width

29、: 160px;padding:30px 20px;#no_padding height: 200px;width: 200px;margin-top: 30px;border: 1px dotted #333;-></style></head><body><div id="main"><div id="no_margin">我沒有margin,我的寬度是多少？</div><div id="no_padding">我沒有padding，我的寬度是

30、多少？</div></div></body></html>檢驗實驗：-實驗正確 (實例12-4)實驗代碼"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8&

31、quot; /><title>框模型的要素</title><style type="text/css"><!-p, h3 margin: 0px;padding: 0px;.box margin: 0px auto;width: 343px;border: 1px solid #c1d5e3;.small height: 200px;width: 241px;margin-top:50px 5px;border-right-width: 1px;border-left-width: 1px;border-right-style

32、: solid;border-left-style: solid;border-right-color: #c1d5e3;border-left-color: #c1d5e3;h3 font-size: 18px;line-height: 28px;color: #c00;text-align: center;margin: 15px 7px;padding-bottom:7px;border-bottom:1px dashed #ccc;.small p font-size: 12px;line-height: 180%;color: #999;text-indent: 2em;-></style></head><div class="box"><div class="small"><h3>框模型-不得不說的故事</h3><p>這個例子里，左右上都可以有其他的框（盒子）。框模型，有名的易學(xué)難精.</p></div></div&g

溫馨提示

  • 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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論