《個人網(wǎng)頁設(shè)計》課程設(shè)計報告_第1頁
已閱讀1頁,還剩28頁未讀, 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、<p><b>  目錄</b></p><p><b>  一、概述2</b></p><p><b>  二、結(jié)構(gòu)圖2</b></p><p>  三、網(wǎng)頁主題選擇2</p><p><b>  四、模塊介紹3</b></p&g

2、t;<p><b>  (一)首頁4</b></p><p>  1、整體框架代碼5</p><p>  2、導航欄動態(tài)跳動效果的腳本代碼8</p><p>  3、日歷腳本代碼和日歷CSS屬性設(shè)置9</p><p>  4、每張網(wǎng)頁都通過同一個層疊樣式表touming.css來控制屬性,框架CSS

3、代碼如下14</p><p><b> ?。ǘ┤罩?9</b></p><p>  1、日志局部代碼實現(xiàn)19</p><p>  2、相關(guān)日至導航圖和代碼20</p><p><b> ?。ㄈ┝粞?1</b></p><p>  1、留言局部代碼實現(xiàn)21<

4、;/p><p>  2、評論腳本代碼實現(xiàn)通過點擊事件onclick來實現(xiàn)22</p><p><b> ?。ㄋ模┫鄡?3</b></p><p>  1、相冊局部代碼實現(xiàn)23</p><p>  2、實現(xiàn)相冊翻頁的腳本代碼如下24</p><p>  3、圖片滾動效果圖和代碼25</p

5、><p><b> ?。ㄎ澹╆P(guān)于我27</b></p><p>  1、關(guān)于我局部代碼實現(xiàn):27</p><p><b>  五、總結(jié)29</b></p><p><b>  六、制作平臺29</b></p><p><b>  一、概述

6、</b></p><p>  現(xiàn)在網(wǎng)絡(luò)越來越趨于平常化,網(wǎng)絡(luò)一是生活正不可或缺的一部分。自己平時上博客、刷微博的時候就覺得有些網(wǎng)頁自己可嘗試著寫出來。自己也在網(wǎng)頁和腳本這方面學過一點知識,因此可能上手比較塊,故本次課程設(shè)計課題我和李運強選的題目是個人網(wǎng)頁的設(shè)計。 </p><p>  在整個網(wǎng)頁設(shè)計過程中主要是在模仿,模仿個人博客,個人空間的相關(guān)模塊設(shè)置和功能實現(xiàn)。個人在設(shè)計時

7、考慮的多為個人的興趣喜好,而不注重商業(yè)的展示。內(nèi)容以反映個人為中心,從而使個人網(wǎng)站真正的成為展示自己的網(wǎng)絡(luò)名片。 </p><p>  在網(wǎng)頁制作中,我借鑒了網(wǎng)絡(luò)上個人網(wǎng)頁的設(shè)計風格,采用博客的形式來做整體框架。整個網(wǎng)頁的架構(gòu)是由DreamwaveCS4完成的。 </p><p><b>  二、結(jié)構(gòu)圖 </b></p><p><b&g

8、t;  三、網(wǎng)頁主題選擇</b></p><p>  以博客的形式展現(xiàn)自我已成為當前最為時髦和時尚的方式了。主題我是參考我自己的免費空間里的網(wǎng)站唧唧歪歪網(wǎng)的博客形式。例如整個背景的透明色設(shè)置就是受到它的啟發(fā)。所以,我的關(guān)注的便是怎樣讓自己的網(wǎng)頁更具有個性魅力,使個人擅長的信息更全面的反映于瀏覽者。我的博客形式的個人主頁比較喜歡,所以主要是用博客的思想來展開我的設(shè)計思路。作品做好后我會上傳于我的空間,屆

9、時大家可以來訪問。訪問地址是:http://zhengwei0601.web-64.com/display/homepage.html</p><p><b>  四、模塊介紹 </b></p><p>  以博客的形式展示自我,所以每張網(wǎng)頁的整體框架是一樣的,只是在<div id=content></div>中填充的內(nèi)容不同。故在介紹我首頁的

10、結(jié)果后就不一一詳細介紹其他頁面的結(jié)構(gòu),而只是將各個頁面中<div id=content></div>的代碼寫下來。</p><p>  每張網(wǎng)頁所用到的腳本文件有所不同,故也會將所用到的腳本文件代碼寫下來。腳本文件是用javascript寫的,而且是用外部鏈接形式調(diào)入網(wǎng)頁的,以便于網(wǎng)頁代碼的優(yōu)化、修改和維護。</p><p>  受某些博客的影響,我非常喜歡導航欄的

11、動態(tài)效果和音頻效果。所在,在導航欄上我和搭檔一直在寫動態(tài)抖動的js代碼。當然好的網(wǎng)頁是通過好的布局、絢麗的層疊樣式表CSS的使用、動態(tài)的實現(xiàn)等很多因素共同作用的結(jié)果。有些簡單的腳本代碼自己實現(xiàn)的,當然有些比較復雜的腳本代碼參考過網(wǎng)絡(luò)資源,像日歷這個腳本代碼是參考網(wǎng)絡(luò)上的資源。</p><p><b>  (一)首頁</b></p><p><b>  1、整

12、體框架代碼:</b></p><p>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p>  <html xm

13、lns="http://www.w3.org/1999/xhtml"></p><p><b>  <head></b></p><p>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

14、</p><p>  <title>鄭偉的空間</title></p><p>  <link type="text/css" rel="stylesheet" href="js和css/touming.css" /></p><p>  <script lang

15、uage="javascript" src="js和css/index.js"></script></p><p>  <style type="text/css"></p><p><b>  <!--</b></p><p><b> 

16、 #apDiv3 {</b></p><p>  position:absolute;</p><p>  left:367px;</p><p>  top:104px;</p><p>  width:199px;</p><p>  height:231px;</p><p>

17、  z-index:5;</p><p><b>  }</b></p><p><b>  #apDiv4{</b></p><p>  position:absolute;</p><p>  left:36px;</p><p>  top:415px;</p&g

18、t;<p>  width:175px;</p><p>  height:208px;</p><p>  z-index:5;</p><p><b>  }</b></p><p><b>  #gengxin{</b></p><p>  positio

19、n:absolute;</p><p>  left:804px;</p><p>  top:608px;</p><p>  width:333px;</p><p>  height:259px;</p><p>  z-index:5;</p><p><b>  }</

20、b></p><p><b>  #show{</b></p><p>  position:absolute;</p><p>  left:36px;</p><p><b>  top:87px;</b></p><p>  width:309px;</p&

21、gt;<p>  height:258px;</p><p>  z-index:6;</p><p><b>  }</b></p><p><b>  #apDiv5 {</b></p><p>  position:absolute;</p><p>  

22、left:442px;</p><p>  top:943px;</p><p>  width:609px;</p><p>  height:56px;</p><p>  z-index:6;</p><p><b>  }</b></p><p><b>

23、  --></b></p><p><b>  </style></b></p><p><b>  </head></b></p><p><b>  <body></b></p><p>  <div id=&qu

24、ot;warp1"></p><p>  <div id="kongjian"><font face="華文隸書" > <h1>心醉公社</h1></font></div></p><p>  <div id="index">&

25、lt;/p><p>  <a href="homepage.html"><div id="d1" onmouseover="dis(1);shake()" style="border:#FFF" ><font id="xuan" >首頁</font></div&

26、gt;</a></p><p>  <a href="log .html"><div id="d2" onmouseover="dis(2);shake()" style="border:#FFF"><font id="xuan" >日志</font>&

27、lt;/div></a></p><p>  <a href="comment.html"><div id="d3" onmouseover="dis(3);shake()" style="border:#FFF"><font id="xuan" >留言<

28、/font></div></a></p><p>  <a href="photoalbum.html"><div id="d4" onmouseover="dis(4);shake()" style="border:#FFF"><font id="xuan&quo

29、t; >相冊</font></div></a></p><p>  <a href="aboutme .html"><div id="d5" onmouseover="dis(5);shake()" style="border:#FFF"><font id=&qu

30、ot;xuan">關(guān)于我</font></div></a></p><p><b>  </div></b></p><p>  <div class="zz"></p><p>  <div id="introduce"&

31、gt; <h2>個人中心</h2></div></p><p>  <div id="me"> <img src="image/portrait.jpg" width="125" height="131" align="middle"/></div

32、></p><p><b>  </div></b></p><p>  <!--以下是主板塊內(nèi)容--></p><p>  <div class="content" ></p><p>  <div class="contents"

33、 id="content1"></div></p><p>  <div class="contents" id="content2"></div></p><p>  <div class="contents" id="content3"

34、;></div></p><p>  <div class="contents" id="content4"></div></p><p>  <div class="contents" id="content5"></div></p&

35、gt;<p>  <FONT color="#351DBE"face=隸書 size=5>&nbsp;&nbsp;&nbsp;&nbsp;<MARQUEE direction="left" height=50 width=240>歡迎加盟心醉公社</MARQUEE></p><p><

36、b>  </FONT></b></p><p>  <FONT color="#5BA0DF" face=隸書 size=5><MARQUEE direction="right" height=50 width=240>社公醉心盟加迎歡</MARQUEE></p><p><

37、;b>  </FONT></b></p><p>  <div id="apDiv3" style="background-image:url(image/15.jpg)" ></div></p><p>  <div id="apDiv4" style="ba

38、ckground-image:url(image/16.jpg)" ></div></p><p>  <div id="show"></p><p>  <font face="幼圓" color="#000000"; size="+1">閉上眼睛,我看到了

39、我的前途……<br/></p><p><b>  <br/></b></p><p>  好朋友是一本書可以打開一個世界,<br /></p><p>  開創(chuàng)一個好生活; 朋友是一面鏡子,<br /></p><p>  可以照見自己的影子。<br />&l

40、t;/p><p><b>  <br /></b></p><p>  左手邊的溫度 半邊床的幸福, <br /></p><p>  你的溫柔我仍然記得那么清楚, <br /></p><p>  幸福就在不遠處。 <br /></p><p><

41、;b>  <br /></b></p><p>  午后陽光覆蓋的金黃色沙灘掩埋不掉心頭沁出的甜;<br /> </p><p>  海與天湛藍相愛的分界線分不出盡頭究竟有多遠 。<br /></p><p><b>  <br /> </b></p><p

42、><b>  <br /></b></p><p><b>  </font></b></p><p><b>  </div></b></p><p><b>  </div></b></p><p>

43、;<b>  </div></b></p><p>  <!--以下是日歷代碼--></p><p>  <div id="rili"></p><p>  <!--日歷腳本內(nèi)容--></p><p><b>  </div><

44、;/b></p><p>  <div id="media"><embed src="sound/自然卷-坐在巷口的那對男女(原版).mp3" width="284" height="28" autostart="true"></embed></div><

45、;/p><p>  <div id="xiaodaohang"></p><p><b>  <center></b></p><p>  <img src="image/talk.gif" align="absmiddle"><a href=&

46、quot;comment.html">留言</a> |</p><p>  <img src="image/message.gif" align="absmiddle"><a href="aboutme .html">關(guān)于我</a> |<br/><br/></

47、p><p>  <img src="image/team.gif" align="absmiddle"><a href="photoalbum.html">相冊</a> |</p><p>  <img src="image/addto.gif" align="a

48、bsmiddle"><a href="log .html">日志</a></p><p><b>  </center></b></p><p><b>  </div></b></p><p>  <div id="ge

49、ngxin"></p><p>  <font color="#0c2f86" ; style="font-weight:bold">最近更新</font><br /></p><p>  <table width="100%" border="0"

50、cellspacing="2" cellpadding="10" ></p><p><b>  <tr></b></p><p>  <td >&nbsp;<font size="+1"; color="#0000CC"><a h

51、ref="log .html">用心詮釋著?不是幸福的幸福</a></font><br/> 不知道從什么時候開始尋找一種叫幸福的東西```<hr color="#999999" /></td></p><p><b>  </tr></b></p><p

52、><b>  <tr></b></p><p>  <td>&nbsp;<font size="+1"; color="#0000CC"><a href="log - 副本.html">小生活,小幸福</a></font><br />

53、;我常常在想,我究竟是一個 ```<hr color="#999999" /></td></p><p><b>  </tr></b></p><p><b>  <tr></b></p><p>  <td>&nbsp;<f

54、ont size="+1"; color="#0000CC"><a href="log - 副本 (2).html">擁有你,我好幸福</a></font><br />曾經(jīng)看過這么一段話: 愛情是追到手的嗎? <hr color="#999999" /></td></p

55、><p><b>  </tr></b></p><p><b>  </table></b></p><p><b>  </div></b></p><p>  <div id="apDiv5" class=&qu

56、ot;content"><center>Copyright zhengwei0601web-64.com Some Rights Reserved.</center></p><p>  <hr align="center" color="#0066CC" width="75%"/><cente

57、r>Design By <a http://zhengwei0601.web-64.com/zhengwei/file1/introduce.html target="_blank">心醉灣</a><script src="http://s11.#/stat.php?id=3410464&web_id=3410464&show=pic&quo

58、t; language="JavaScript"></script></center></div></p><p><b>  </body></b></p><p><b>  </html></b></p><p>  2、導航欄動態(tài)

59、跳動效果的腳本代碼:</p><p>  var currunt=0;</p><p>  function dis(menu_number){</p><p>  currunt=menu_number;</p><p><b>  width=30;</b></p><p><b>

60、  speed=5;</b></p><p>  positionX=0;</p><p>  preSpeed=0;</p><p><b>  flag=1;</b></p><p>  document.getElementById("content"+menu_number).st

61、yle.display="block";</p><p>  hidRest(menu_number);</p><p><b>  }</b></p><p>  function hidRest(menu_clicked){</p><p>  var MENU_LENGTH=5;</p&g

62、t;<p>  for(i=1;i<=MENU_LENGTH;i++){</p><p>  if(i!=menu_clicked){</p><p>  document.getElementById("content"+i).style.display="none";</p><p><b>

63、  }</b></p><p><b>  }</b></p><p><b>  }</b></p><p>  function shake(){</p><p>  if(flag==1){</p><p>  speed=1-speed*0.8</p

64、><p>  positionX+=speed;</p><p>  positionX-=preSpeed;</p><p>  document.getElementById("d"+currunt).style.top=positionX</p><p>  if(Math.abs(speed)<1.0){<

65、/p><p>  document.getElementById("d"+currunt).style.top=0;</p><p><b>  flag=0;</b></p><p><b>  }</b></p><p>  preSpeed=speed;</p>

66、<p>  setTimeout("shake()",50)</p><p><b>  }</b></p><p><b>  }</b></p><p>  3、日歷腳本代碼和日歷CSS屬性設(shè)置:</p><p><b>  日歷效果圖</b>

67、</p><p>  <Script LANGUAGE="JavaScript"></p><p>  var months = new Array("一", "二", "三","四", "五", "六", "七", &

68、quot;八", "九","十", "十一", "十二");</p><p>  var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);</p><p>  var days = new Array(&qu

69、ot;日","一", "二", "三","四", "五", "六");</p><p>  var classTemp;</p><p>  var today=new getToday();</p><p>  var year=tod

70、ay.year;</p><p>  var month=today.month;</p><p>  var newCal; </p><p>  function getDays(month, year) {</p><p>  if (1== month) </p><p>  return ((0 == yea

71、r % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;</p><p>  else return daysInMonth[month];</p><p><b>  }</b></p><p>  function getToday() {</p&g

72、t;<p>  this.now = new Date();</p><p>  this.year = this.now.getFullYear();</p><p>  this.month = this.now.getMonth();</p><p>  this.day = this.now.getDate();</p><

73、p><b>  }</b></p><p>  function Calendar() {</p><p>  newCal = new Date(year,month,1);</p><p>  today = new getToday(); </p><p>  var day = -1;</p>

74、;<p>  var startDay = newCal.getDay();</p><p>  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());</p><p>  var daily = 0;</p><p>  if ((today.year == newCal.getFul

75、lYear()) && (today.month == newCal.getMonth()))</p><p><b>  {</b></p><p>  day = today.day;</p><p><b>  }</b></p><p>  var caltable = d

76、ocument.all.caltable.tBodies.calendar;</p><p>  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());</p><p>  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)&

77、lt;/p><p>  for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)</p><p><b>  {</b></p><p>  var cell = caltable.rows[intWeek].cells[intDay];</p&

78、gt;<p>  var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); </p><p>  if ((intDay == startDay) && (0 == daily)){ daily = 1;}</p&g

79、t;<p>  var daytemp=daily<10?("0"+daily):(daily);</p><p>  var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";</p><p>  

80、if(day==daily) cell.className="DayNow";</p><p>  else if(intDay==6) cell.className = "DaySat";</p><p>  else if (intDay==0) cell.className ="DaySun";</p><

81、;p>  else cell.className="Day";</p><p>  if ((daily > 0) && (daily <= intDaysInMonth))</p><p><b>  {</b></p><p>  cell.innerText = daily;<

82、;/p><p><b>  daily++;</b></p><p><b>  } else</b></p><p><b>  {</b></p><p>  cell.className="CalendarTD";</p><p>

83、  cell.innerText = "";</p><p><b>  }</b></p><p><b>  }</b></p><p>  document.all.year.value=year;</p><p>  document.all.month.value=mo

84、nth+1;</p><p><b>  }</b></p><p>  function subMonth()</p><p><b>  {</b></p><p>  if ((month-1)<0)</p><p><b>  {</b>&

85、lt;/p><p><b>  month=11;</b></p><p>  year=year-1;</p><p><b>  } else</b></p><p><b>  {</b></p><p>  month=month-1;</p&

86、gt;<p><b>  }</b></p><p>  Calendar();</p><p><b>  }</b></p><p>  function addMonth()</p><p><b>  {</b></p><p> 

87、 if((month+1)>11)</p><p><b>  {</b></p><p><b>  month=0;</b></p><p>  year=year+1;</p><p><b>  } else</b></p><p><

88、;b>  {</b></p><p>  month=month+1;</p><p><b>  }</b></p><p>  Calendar();</p><p><b>  }</b></p><p>  function setDate() &l

89、t;/p><p><b>  {</b></p><p>  if (document.all.month.value<1||document.all.month.value>12)</p><p><b>  {</b></p><p>  alert("月的有效范圍在1-12之

90、間!");</p><p><b>  return;</b></p><p><b>  }</b></p><p>  year=Math.ceil(document.all.year.value);</p><p>  month=Math.ceil(document.all.mon

91、th.value-1);</p><p>  Calendar();</p><p><b>  }</b></p><p><b>  </Script></b></p><p><b>  <Script></b></p><p&

92、gt;  function buttonOver()</p><p><b>  {</b></p><p>  var obj = window.event.srcElement;</p><p>  obj.runtimeStyle.cssText = "background-color:#FFFFFF";</p&

93、gt;<p>  // obj.className="Hover";</p><p><b>  }</b></p><p>  function buttonOut()</p><p><b>  {</b></p><p>  var obj = window.

94、event.srcElement;</p><p>  window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);</p><p><b>  }</b></p><p><b>  </Script></b><

95、/p><p><b>  <Style></b></p><p>  Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}&

96、lt;/p><p>  .Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}</p><p>  .CalendarTD {font-family: verdana;font-siz

97、e: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}</p><p>  .Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #33

98、3333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #99

99、9999;border-bottom-color: #999999;border-left-color: #999999;}</p><p>  .Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}</p>

100、<p>  .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}</p><p>  .DaySun {font-family: verdana;font

101、-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}</p><p>  .DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;ba

102、ckground-color: #FFFFFF;height: 20px;text-align: center;}</p><p>  .DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}</p>

103、;<p>  .DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}</p><p>  .DaySunTitle {font-family: v

104、erdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}</p><p>  .DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;c

105、olor: #243F65;cursor:hand;text-decoration: none;}</p><p><b>  </Style></b></p><p>  <table border="0" cellpadding="0" cellspacing="1" class=&qu

106、ot;Calendar" id="caltable"></p><p><b>  <thead></b></p><p>  <tr align="center" valign="middle"> </p><p>  <td colsp

107、an="7" class="Title"></p><p>  <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="

108、;text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.

109、replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value

110、=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a hre</p><p><b>  </td></b></p><p><b> 

111、 </tr></b></p><p>  <tr align="center" valign="middle"> </p><p>  <Script LANGUAGE="JavaScript"> </p><p>  document.write(&quo

112、t;<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); </p><p>  for (var intLoop = 1; intLoop < days.length-1;intLoop++) </p><p>  document.write("<TD c

113、lass=DayTitle id=diary>" + days[intLoop] + "</TD>"); </p><p>  document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); </p>

114、<p><b>  </Script></b></p><p><b>  </TR> </b></p><p><b>  </thead></b></p><p>  <TBODY border=1 cellspacing="0&qu

115、ot; cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()"></p><p>  <Script LANGUAGE="JavaScript"></p><p>  for (var intWeeks = 0; intW

116、eeks < 6; intWeeks++)</p><p><b>  {</b></p><p>  document.write("<TR style='cursor:hand'>");</p><p>  for (var intDays = 0; intDays < days.

117、length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");</p><p>  document.write("</TR>");&l

118、t;/p><p><b>  } </b></p><p><b>  </Script></b></p><p><b>  </TBODY></b></p><p><b>  </TABLE></b></p>

119、;<p>  <Script LANGUAGE="JavaScript"></p><p>  Calendar();</p><p><b>  </Script></b></p><p>  4、每張網(wǎng)頁都通過同一個層疊樣式表touming.css來控制屬性,框架CSS代碼如下:&

120、lt;/p><p>  在這里我用的是外部樣式表,因為這樣既可以使得網(wǎng)頁代碼看起來簡單又可以方便的同時設(shè)置多個網(wǎng)頁的屬性。外部層疊樣式表的連接方式為<link type="text/css" rel="stylesheet" href="js和css/touming.css" /></p><p>  @charset

121、"utf-8";</p><p>  /* CSS Document */</p><p>  body { background-image:url(../image/background.jpg) }</p><p><b>  .content{</b></p><p>  font-size

122、:14px;</p><p>  background-color:#D5DFDC;</p><p>  FILTER: Alpha(opacity=50);</p><p>  width:800px;</p><p>  position:absolute;</p><p>  left:313px;</p&

123、gt;<p>  top:184px;</p><p>  width: 586px;</p><p>  height: 712px;</p><p><b>  }</b></p><p>  .alpha{filter:alpha(opacity=50);width:300px; } /*設(shè)置圖片

124、透明*/</p><p><b>  .zz {</b></p><p>  position:relative;</p><p>  left:30px;</p><p>  width:263px;</p><p>  height:275px;</p><p>  t

125、op:155px;</p><p>  font-size:14px;</p><p>  background-color:#D5DFDC;</p><p>  FILTER: Alpha(opacity=50);</p><p><b>  }</b></p><p>  #guide{ pa

126、dding:0; margin:0; border-bottom:1px solid #fff; float:left; width:100%;filter:alpha(opacity=90);-moz-opacity:0.9}</p><p><b>  #warp1 {</b></p><p>  position:relative;</p><

127、;p>  left:243px;</p><p><b>  top:30px;</b></p><p>  width:900px;</p><p>  height:850px;</p><p><b>  }</b></p><p>  #kongjian {&l

128、t;/p><p>  position:absolute;</p><p>  left:28px;</p><p>  top:-61px;</p><p>  width:739px;</p><p>  height:66px;</p><p>  z-index:2;</p>

129、<p><b>  }</b></p><p><b>  #index {</b></p><p>  position:relative;</p><p><b>  left:0px;</b></p><p>  top:110px;</p>&l

130、t;p>  width:900px;</p><p>  height:28px;</p><p>  z-index:3;</p><p><b>  }</b></p><p><b>  #me {</b></p><p>  position:absolute;

131、</p><p>  left:73.5px;</p><p><b>  top:42px;</b></p><p>  width:121px;</p><p>  height:132px;</p><p><b>  }</b></p><p>

132、;  #introduce {</p><p>  position:absolute;</p><p><b>  left:8px;</b></p><p>  top:-13px;</p><p>  width:260px;</p><p>  height:35px;</p>

133、<p>  z-index:1;</p><p><b>  }</b></p><p>  #xiaodaohang {</p><p>  position:absolute;</p><p>  left:285px;</p><p>  top:427px;</p>

134、;<p>  width:239px;</p><p>  height:57px;</p><p>  z-index:4;</p><p><b>  }</b></p><p><b>  #indry{</b></p><p>  position:re

135、lative;</p><p>  left:30px;</p><p>  width:273px;</p><p>  height:255px;</p><p>  top:155px;</p><p>  font-size:14px;</p><p>  background-colo

136、r:#D5DFDC;</p><p>  FILTER: Alpha(opacity=50);</p><p><b>  }</b></p><p><b>  #rili{</b></p><p>  position:absolute;</p><p>  left:2

137、83px;</p><p>  top:506px;</p><p>  width:264px;</p><p>  height:160px;</p><p>  z-index:3;</p><p><b>  }</b></p><p><b>  #ap

138、Div4 {</b></p><p>  position:absolute;</p><p>  left:24px;</p><p><b>  top:63px;</b></p><p>  width:914px;</p><p>  height:1px;</p>

139、<p>  z-index:4;</p><p><b>  }</b></p><p>  #d1,#d2,#d3,#d4,#d5{</p><p>  background-color:#EA8371;</p><p>  position:absolute;</p><p> 

140、 border:1px black solid;</p><p>  margin-left:0;</p><p>  margin-right:auto;</p><p>  width:87px;</p><p>  height:28px;</p><p>  text-align:center;</p&g

141、t;<p><b>  top: 1px;</b></p><p><b>  }</b></p><p><b>  #d1 {</b></p><p>  left:30px;</p><p>  z-index:1;</p><p>

142、<b>  }</b></p><p><b>  #d2 {</b></p><p>  left:130px;</p><p>  z-index:2;</p><p><b>  }</b></p><p><b>  #d3 {<

143、/b></p><p>  left:230px;</p><p>  z-index:3;</p><p><b>  }</b></p><p><b>  #d4{</b></p><p>  left:330px;</p><p>  z

144、-index:4;</p><p><b>  }</b></p><p><b>  #d5 {</b></p><p>  left:430px;</p><p>  z-index:5;</p><p><b>  }</b></p>

145、<p>  .contents{</p><p>  padding:10px;</p><p>  display:none;</p><p><b>  }</b></p><p><b>  #content{</b></p><p>  position:

溫馨提示

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

評論

0/150

提交評論