版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
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、導(dǎo)航欄動(dòng)態(tài)跳動(dòng)效果的腳本代碼8</p><p> 3、日歷腳本代碼和日歷CSS屬性設(shè)置9</p><p> 4、每張網(wǎng)頁都通過同一個(gè)層疊樣式表touming.css來控制屬性,框架CSS
3、代碼如下14</p><p><b> ?。ǘ┤罩?9</b></p><p> 1、日志局部代碼實(shí)現(xiàn)19</p><p> 2、相關(guān)日至導(dǎo)航圖和代碼20</p><p><b> ?。ㄈ┝粞?1</b></p><p> 1、留言局部代碼實(shí)現(xiàn)21<
4、;/p><p> 2、評(píng)論腳本代碼實(shí)現(xiàn)通過點(diǎn)擊事件onclick來實(shí)現(xiàn)22</p><p><b> ?。ㄋ模┫鄡?cè)23</b></p><p> 1、相冊(cè)局部代碼實(shí)現(xiàn)23</p><p> 2、實(shí)現(xiàn)相冊(cè)翻頁的腳本代碼如下24</p><p> 3、圖片滾動(dòng)效果圖和代碼25</p
5、><p><b> ?。ㄎ澹╆P(guān)于我27</b></p><p> 1、關(guān)于我局部代碼實(shí)現(xiàn):27</p><p><b> 五、總結(jié)29</b></p><p><b> 六、制作平臺(tái)29</b></p><p><b> 一、概述
6、</b></p><p> 現(xiàn)在網(wǎng)絡(luò)越來越趨于平常化,網(wǎng)絡(luò)一是生活正不可或缺的一部分。自己平時(shí)上博客、刷微博的時(shí)候就覺得有些網(wǎng)頁自己可嘗試著寫出來。自己也在網(wǎng)頁和腳本這方面學(xué)過一點(diǎn)知識(shí),因此可能上手比較塊,故本次課程設(shè)計(jì)課題我和李運(yùn)強(qiáng)選的題目是個(gè)人網(wǎng)頁的設(shè)計(jì)。 </p><p> 在整個(gè)網(wǎng)頁設(shè)計(jì)過程中主要是在模仿,模仿個(gè)人博客,個(gè)人空間的相關(guān)模塊設(shè)置和功能實(shí)現(xiàn)。個(gè)人在設(shè)計(jì)時(shí)
7、考慮的多為個(gè)人的興趣喜好,而不注重商業(yè)的展示。內(nèi)容以反映個(gè)人為中心,從而使個(gè)人網(wǎng)站真正的成為展示自己的網(wǎng)絡(luò)名片。 </p><p> 在網(wǎng)頁制作中,我借鑒了網(wǎng)絡(luò)上個(gè)人網(wǎng)頁的設(shè)計(jì)風(fēng)格,采用博客的形式來做整體框架。整個(gè)網(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)自我已成為當(dāng)前最為時(shí)髦和時(shí)尚的方式了。主題我是參考我自己的免費(fèi)空間里的網(wǎng)站唧唧歪歪網(wǎng)的博客形式。例如整個(gè)背景的透明色設(shè)置就是受到它的啟發(fā)。所以,我的關(guān)注的便是怎樣讓自己的網(wǎng)頁更具有個(gè)性魅力,使個(gè)人擅長的信息更全面的反映于瀏覽者。我的博客形式的個(gè)人主頁比較喜歡,所以主要是用博客的思想來展開我的設(shè)計(jì)思路。作品做好后我會(huì)上傳于我的空間,屆
9、時(shí)大家可以來訪問。訪問地址是: </p><p><b> 四、模塊介紹 </b></p><p> 以博客的形式展示自我,所以每張網(wǎng)頁的整體框架是一樣的,只是在<div id=content></div>中填充的內(nèi)容不同。故在介紹我首頁的結(jié)果后就不一一詳細(xì)介紹其他頁面的結(jié)構(gòu),而只是將各個(gè)頁面中<div id=content>&
10、lt;/div>的代碼寫下來。</p><p> 每張網(wǎng)頁所用到的腳本文件有所不同,故也會(huì)將所用到的腳本文件代碼寫下來。腳本文件是用javascript寫的,而且是用外部鏈接形式調(diào)入網(wǎng)頁的,以便于網(wǎng)頁代碼的優(yōu)化、修改和維護(hù)。</p><p> 受某些博客的影響,我非常喜歡導(dǎo)航欄的動(dòng)態(tài)效果和音頻效果。所在,在導(dǎo)航欄上我和搭檔一直在寫動(dòng)態(tài)抖動(dòng)的js代碼。當(dāng)然好的網(wǎng)頁是通過好的布局、絢
11、麗的層疊樣式表CSS的使用、動(dòng)態(tài)的實(shí)現(xiàn)等很多因素共同作用的結(jié)果。有些簡(jiǎn)單的腳本代碼自己實(shí)現(xiàn)的,當(dāng)然有些比較復(fù)雜的腳本代碼參考過網(wǎng)絡(luò)資源,像日歷這個(gè)腳本代碼是參考網(wǎng)絡(luò)上的資源。</p><p><b> ?。ㄒ唬┦醉?lt;/b></p><p><b> 1、整體框架代碼:</b></p><p> <!DOCTYPE
12、 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p> <html xmlns="http://www.w3.org/1999/xhtml"><
13、;/p><p><b> <head></b></p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p> <title>鄭偉的空間</title
14、></p><p> <link type="text/css" rel="stylesheet" href="js和css/touming.css" /></p><p> <script language="javascript" src="js和css/index.
15、js"></script></p><p> <style type="text/css"></p><p><b> <!--</b></p><p><b> #apDiv3 {</b></p><p> position
16、:absolute;</p><p> left:367px;</p><p> top:104px;</p><p> width:199px;</p><p> height:231px;</p><p> z-index:5;</p><p><b> }</b
17、></p><p><b> #apDiv4{</b></p><p> position:absolute;</p><p> left:36px;</p><p> top:415px;</p><p> width:175px;</p><p> h
18、eight:208px;</p><p> z-index:5;</p><p><b> }</b></p><p><b> #gengxin{</b></p><p> position:absolute;</p><p> left:804px;</p
19、><p> top:608px;</p><p> width:333px;</p><p> height:259px;</p><p> z-index:5;</p><p><b> }</b></p><p><b> #show{</b&g
20、t;</p><p> position:absolute;</p><p> left:36px;</p><p><b> top:87px;</b></p><p> width:309px;</p><p> height:258px;</p><p>
21、 z-index:6;</p><p><b> }</b></p><p><b> #apDiv5 {</b></p><p> position:absolute;</p><p> left:442px;</p><p> top:943px;</p&
22、gt;<p> width:609px;</p><p> height:56px;</p><p> z-index:6;</p><p><b> }</b></p><p><b> --></b></p><p><b> &
23、lt;/style></b></p><p><b> </head></b></p><p><b> <body></b></p><p> <div id="warp1"></p><p> <div id
24、="kongjian"><font face="華文隸書" > <h1>心醉公社</h1></font></div></p><p> <div id="index"></p><p> <a href="homepage.ht
25、ml"><div id="d1" onmouseover="dis(1);shake()" style="border:#FFF" ><font id="xuan" >首頁</font></div></a></p><p> <a href=&quo
26、t;log .html"><div id="d2" onmouseover="dis(2);shake()" style="border:#FFF"><font id="xuan" >日志</font></div></a></p><p> <a h
27、ref="comment.html"><div id="d3" onmouseover="dis(3);shake()" style="border:#FFF"><font id="xuan" >留言</font></div></a></p><p>
28、; <a href="photoalbum.html"><div id="d4" onmouseover="dis(4);shake()" style="border:#FFF"><font id="xuan" >相冊(cè)</font></div></a></p&
29、gt;<p> <a href="aboutme .html"><div id="d5" onmouseover="dis(5);shake()" style="border:#FFF"><font id="xuan">關(guān)于我</font></div></a
30、></p><p><b> </div></b></p><p> <div class="zz"></p><p> <div id="introduce"> <h2>個(gè)人中心</h2></div></p>
31、<p> <div id="me"> <img src="image/portrait.jpg" width="125" height="131" align="middle"/></div></p><p><b> </div><
32、;/b></p><p> <!--以下是主板塊內(nèi)容--></p><p> <div class="content" ></p><p> <div class="contents" id="content1"></div></p>
33、<p> <div class="contents" id="content2"></div></p><p> <div class="contents" id="content3"></div></p><p> <div cla
34、ss="contents" id="content4"></div></p><p> <div class="contents" id="content5"></div></p><p> <FONT color="#351DBE"f
35、ace=隸書 size=5> <MARQUEE direction="left" height=50 width=240>歡迎加盟心醉公社</MARQUEE></p><p><b> </FONT></b></p><p>
36、 <FONT color="#5BA0DF" face=隸書 size=5><MARQUEE direction="right" height=50 width=240>社公醉心盟加迎歡</MARQUEE></p><p><b> </FONT></b></p><p>
37、; <div id="apDiv3" style="background-image:url(image/15.jpg)" ></div></p><p> <div id="apDiv4" style="background-image:url(image/16.jpg)" ></div
38、></p><p> <div id="show"></p><p> <font face="幼圓" color="#000000"; size="+1">閉上眼睛,我看到了我的前途……<br/></p><p><b> &l
39、t;br/></b></p><p> 好朋友是一本書可以打開一個(gè)世界,<br /></p><p> 開創(chuàng)一個(gè)好生活; 朋友是一面鏡子,<br /></p><p> 可以照見自己的影子。<br /></p><p><b> <br /></b>
40、;</p><p> 左手邊的溫度 半邊床的幸福, <br /></p><p> 你的溫柔我仍然記得那么清楚, <br /></p><p> 幸福就在不遠(yuǎn)處。 <br /></p><p><b> <br /></b></p><p>
41、 午后陽光覆蓋的金黃色沙灘掩埋不掉心頭沁出的甜;<br /> </p><p> 海與天湛藍(lán)相愛的分界線分不出盡頭究竟有多遠(yuǎn) 。<br /></p><p><b> <br /> </b></p><p><b> <br /></b></p>&l
42、t;p><b> </font></b></p><p><b> </div></b></p><p><b> </div></b></p><p><b> </div></b></p><p
43、> <!--以下是日歷代碼--></p><p> <div id="rili"></p><p> <!--日歷腳本內(nèi)容--></p><p><b> </div></b></p><p> <div id="medi
44、a"><embed src="sound/自然卷-坐在巷口的那對(duì)男女(原版).mp3" width="284" height="28" autostart="true"></embed></div></p><p> <div id="xiaodaohang&qu
45、ot;></p><p><b> <center></b></p><p> <img src="image/talk.gif" align="absmiddle"><a href="comment.html">留言</a> |</p>
46、<p> <img src="image/message.gif" align="absmiddle"><a href="aboutme .html">關(guān)于我</a> |<br/><br/></p><p> <img src="image/team.gif&
47、quot; align="absmiddle"><a href="photoalbum.html">相冊(cè)</a> |</p><p> <img src="image/addto.gif" align="absmiddle"><a href="log .html"
48、>日志</a></p><p><b> </center></b></p><p><b> </div></b></p><p> <div id="gengxin"></p><p> <font colo
49、r="#0c2f86" ; style="font-weight:bold">最近更新</font><br /></p><p> <table width="100%" border="0" cellspacing="2" cellpadding="10"
50、; ></p><p><b> <tr></b></p><p> <td > <font size="+1"; color="#0000CC"><a href="log .html">用心詮釋著?不是幸福的幸福</a>
51、;</font><br/> 不知道從什么時(shí)候開始尋找一種叫幸福的東西```<hr color="#999999" /></td></p><p><b> </tr></b></p><p><b> <tr></b></p><
52、p> <td> <font size="+1"; color="#0000CC"><a href="log - 副本.html">小生活,小幸福</a></font><br />我常常在想,我究竟是一個(gè) ```<hr color="#999999"
53、/></td></p><p><b> </tr></b></p><p><b> <tr></b></p><p> <td> <font size="+1"; color="#0000CC"
54、><a href="log - 副本 (2).html">擁有你,我好幸福</a></font><br />曾經(jīng)看過這么一段話: 愛情是追到手的嗎? <hr color="#999999" /></td></p><p><b> </tr></b><
55、/p><p><b> </table></b></p><p><b> </div></b></p><p> <div id="apDiv5" class="content"><center>Copyright zhengwe
56、i0601web-64.com Some Rights Reserved.</center></p><p> <hr align="center" color="#0066CC" width="75%"/><center>Design By <a http://zhengwei0601.web-64.com
57、/zhengwei/file1/introduce.html target="_blank">心醉灣</a><script src="http://s11.#/stat.php?id=3410464&web_id=3410464&show=pic" language="JavaScript"></script&g
58、t;</center></div></p><p><b> </body></b></p><p><b> </html></b></p><p> 2、導(dǎo)航欄動(dòng)態(tài)跳動(dòng)效果的腳本代碼:</p><p> var currunt=0;<
59、/p><p> function dis(menu_number){</p><p> currunt=menu_number;</p><p><b> width=30;</b></p><p><b> speed=5;</b></p><p> position
60、X=0;</p><p> preSpeed=0;</p><p><b> flag=1;</b></p><p> document.getElementById("content"+menu_number).style.display="block";</p><p>
61、 hidRest(menu_number);</p><p><b> }</b></p><p> function hidRest(menu_clicked){</p><p> var MENU_LENGTH=5;</p><p> for(i=1;i<=MENU_LENGTH;i++){</
62、p><p> if(i!=menu_clicked){</p><p> document.getElementById("content"+i).style.display="none";</p><p><b> }</b></p><p><b> }</
63、b></p><p><b> }</b></p><p> function shake(){</p><p> if(flag==1){</p><p> speed=1-speed*0.8</p><p> positionX+=speed;</p><p
64、> positionX-=preSpeed;</p><p> document.getElementById("d"+currunt).style.top=positionX</p><p> if(Math.abs(speed)<1.0){</p><p> document.getElementById("d&
65、quot;+currunt).style.top=0;</p><p><b> flag=0;</b></p><p><b> }</b></p><p> preSpeed=speed;</p><p> setTimeout("shake()",50)</p
66、><p><b> }</b></p><p><b> }</b></p><p> 3、日歷腳本代碼和日歷CSS屬性設(shè)置:</p><p><b> 日歷效果圖</b></p><p> <Script LANGUAGE="Ja
67、vaScript"></p><p> var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一
68、", "十二");</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=today.year;</p><p> var month=today.mont
70、h;</p><p> var newCal; </p><p> function getDays(month, year) {</p><p> if (1== month) </p><p> return ((0 == year % 4) && (0 != (year % 100))) ||(0 == ye
71、ar % 400) ? 29 : 28;</p><p> else return daysInMonth[month];</p><p><b> }</b></p><p> function getToday() {</p><p> this.now = new Date();</p>&l
72、t;p> this.year = this.now.getFullYear();</p><p> this.month = this.now.getMonth();</p><p> this.day = this.now.getDate();</p><p><b> }</b></p><p> f
73、unction Calendar() {</p><p> newCal = new Date(year,month,1);</p><p> today = new getToday(); </p><p> var day = -1;</p><p> var startDay = newCal.getDay();</p
74、><p> var endDay=getDays(newCal.getMonth(), newCal.getFullYear());</p><p> var daily = 0;</p><p> if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMont
75、h()))</p><p><b> {</b></p><p> day = today.day;</p><p><b> }</b></p><p> var caltable = document.all.caltable.tBodies.calendar;</p>&
76、lt;p> var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());</p><p> for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)</p><p> for (var intDay = 0;intDay &l
77、t; caltable.rows[intWeek].cells.length;intDay++)</p><p><b> {</b></p><p> var cell = caltable.rows[intWeek].cells[intDay];</p><p> var montemp=(newCal.getMonth()+1)&l
78、t;10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); </p><p> if ((intDay == startDay) && (0 == daily)){ daily = 1;}</p><p> var daytemp=daily<10?("0&quo
79、t;+daily):(daily);</p><p> var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";</p><p> if(day==daily) cell.className="DayNow";&l
80、t;/p><p> else if(intDay==6) cell.className = "DaySat";</p><p> else if (intDay==0) cell.className ="DaySun";</p><p> else cell.className="Day";</p&
81、gt;<p> if ((daily > 0) && (daily <= intDaysInMonth))</p><p><b> {</b></p><p> cell.innerText = daily;</p><p><b> daily++;</b><
82、/p><p><b> } else</b></p><p><b> {</b></p><p> cell.className="CalendarTD";</p><p> cell.innerText = "";</p><p&g
83、t;<b> }</b></p><p><b> }</b></p><p> document.all.year.value=year;</p><p> document.all.month.value=month+1;</p><p><b> }</b>&l
84、t;/p><p> function subMonth()</p><p><b> {</b></p><p> if ((month-1)<0)</p><p><b> {</b></p><p><b> month=11;</b>&
85、lt;/p><p> year=year-1;</p><p><b> } else</b></p><p><b> {</b></p><p> month=month-1;</p><p><b> }</b></p><
86、;p> Calendar();</p><p><b> }</b></p><p> function addMonth()</p><p><b> {</b></p><p> if((month+1)>11)</p><p><b>
87、 {</b></p><p><b> month=0;</b></p><p> year=year+1;</p><p><b> } else</b></p><p><b> {</b></p><p> month=mon
88、th+1;</p><p><b> }</b></p><p> Calendar();</p><p><b> }</b></p><p> function setDate() </p><p><b> {</b></p>
89、<p> if (document.all.month.value<1||document.all.month.value>12)</p><p><b> {</b></p><p> alert("月的有效范圍在1-12之間!");</p><p><b> return;&l
90、t;/b></p><p><b> }</b></p><p> year=Math.ceil(document.all.year.value);</p><p> month=Math.ceil(document.all.month.value-1);</p><p> Calendar();</
91、p><p><b> }</b></p><p><b> </Script></b></p><p><b> <Script></b></p><p> function buttonOver()</p><p><
92、b> {</b></p><p> var obj = window.event.srcElement;</p><p> obj.runtimeStyle.cssText = "background-color:#FFFFFF";</p><p> // obj.className="Hover";
93、</p><p><b> }</b></p><p> function buttonOut()</p><p><b> {</b></p><p> var obj = window.event.srcElement;</p><p> window.setT
94、imeout(function(){obj.runtimeStyle.cssText = "";},300);</p><p><b> }</b></p><p><b> </Script></b></p><p><b> <Style></b>
95、</p><p> Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}</p><p> .Calendar {font-family: verda
96、na;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}</p><p> .CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;heig
97、ht: 20px;width:11%;text-align: center;}</p><p> .Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D
98、7;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: #999999;border-bottom-color: #999999;border-left-color
99、: #999999;}</p><p> .Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}</p><p> .DaySat {font-family: verdana;font-siz
100、e: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}</p><p> .DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;bac
101、kground-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}</p><p> .DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: ce
102、nter;}</p><p> .DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}</p><p> .DaySatTitle {font-family: verdana;fo
103、nt-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}</p><p> .DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoratio
104、n: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}</p><p> .DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}&l
105、t;/p><p><b> </Style></b></p><p> <table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable"></p
106、><p><b> <thead></b></p><p> <tr align="center" valign="middle"> </p><p> <td colspan="7" class="Title"></p&
107、gt;<p> <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4&qu
108、ot; onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input
109、 name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" on
110、paste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a hre</p><p><b> </td></b></p><p><b> </tr></b></p><p> <tr
111、 align="center" valign="middle"> </p><p> <Script LANGUAGE="JavaScript"> </p><p> document.write("<TD class=DaySunTitle id=diary >" + da
112、ys[0] + "</TD>"); </p><p> for (var intLoop = 1; intLoop < days.length-1;intLoop++) </p><p> document.write("<TD class=DayTitle id=diary>" + days[intLoop] +
113、"</TD>"); </p><p> document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); </p><p><b> </Script></b></
114、p><p><b> </TR> </b></p><p><b> </thead></b></p><p> <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar&quo
115、t; ALIGN=CENTER ONCLICK="getDiary()"></p><p> <Script LANGUAGE="JavaScript"></p><p> for (var intWeeks = 0; intWeeks < 6; intWeeks++)</p><p><b&
116、gt; {</b></p><p> document.write("<TR style='cursor:hand'>");</p><p> for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class
117、=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");</p><p> document.write("</TR>");</p><p><b> } </b></p>
118、;<p><b> </Script></b></p><p><b> </TBODY></b></p><p><b> </TABLE></b></p><p> <Script LANGUAGE="JavaScript
119、"></p><p> Calendar();</p><p><b> </Script></b></p><p> 4、每張網(wǎng)頁都通過同一個(gè)層疊樣式表touming.css來控制屬性,框架CSS代碼如下:</p><p> 在這里我用的是外部樣式表,因?yàn)檫@樣既可以使得網(wǎng)頁代碼看起來
120、簡(jiǎn)單又可以方便的同時(shí)設(shè)置多個(gè)網(wǎng)頁的屬性。外部層疊樣式表的連接方式為<link type="text/css" rel="stylesheet" href="js和css/touming.css" /></p><p> @charset "utf-8";</p><p> /* CSS Doc
121、ument */</p><p> body { background-image:url(../image/background.jpg) }</p><p><b> .content{</b></p><p> font-size:14px;</p><p> background-color:#D5DF
122、DC;</p><p> FILTER: Alpha(opacity=50);</p><p> width:800px;</p><p> position:absolute;</p><p> left:313px;</p><p> top:184px;</p><p> wi
123、dth: 586px;</p><p> height: 712px;</p><p><b> }</b></p><p> .alpha{filter:alpha(opacity=50);width:300px; } /*設(shè)置圖片透明*/</p><p><b> .zz {</b>
124、</p><p> position:relative;</p><p> left:30px;</p><p> width:263px;</p><p> height:275px;</p><p> top:155px;</p><p> font-size:14px;<
125、/p><p> background-color:#D5DFDC;</p><p> FILTER: Alpha(opacity=50);</p><p><b> }</b></p><p> #guide{ padding:0; margin:0; border-bottom:1px solid #fff; fl
126、oat:left; width:100%;filter:alpha(opacity=90);-moz-opacity:0.9}</p><p><b> #warp1 {</b></p><p> position:relative;</p><p> left:243px;</p><p><b>
127、top:30px;</b></p><p> width:900px;</p><p> height:850px;</p><p><b> }</b></p><p> #kongjian {</p><p> position:absolute;</p>
128、<p> left:28px;</p><p> top:-61px;</p><p> width:739px;</p><p> height:66px;</p><p> z-index:2;</p><p><b> }</b></p><p>
129、;<b> #index {</b></p><p> position:relative;</p><p><b> left:0px;</b></p><p> top:110px;</p><p> width:900px;</p><p> height:
130、28px;</p><p> z-index:3;</p><p><b> }</b></p><p><b> #me {</b></p><p> position:absolute;</p><p> left:73.5px;</p><
131、p><b> top:42px;</b></p><p> width:121px;</p><p> height:132px;</p><p><b> }</b></p><p> #introduce {</p><p> position:abso
132、lute;</p><p><b> left:8px;</b></p><p> top:-13px;</p><p> width:260px;</p><p> height:35px;</p><p> z-index:1;</p><p><b&g
133、t; }</b></p><p> #xiaodaohang {</p><p> position:absolute;</p><p> left:285px;</p><p> top:427px;</p><p> width:239px;</p><p> he
134、ight:57px;</p><p> z-index:4;</p><p><b> }</b></p><p><b> #indry{</b></p><p> position:relative;</p><p> left:30px;</p>
135、<p> width:273px;</p><p> height:255px;</p><p> top:155px;</p><p> font-size:14px;</p><p> background-color:#D5DFDC;</p><p> FILTER: Alpha(opac
136、ity=50);</p><p><b> }</b></p><p><b> #rili{</b></p><p> position:absolute;</p><p> left:283px;</p><p> top:506px;</p>&
137、lt;p> width:264px;</p><p> height:160px;</p><p> z-index:3;</p><p><b> }</b></p><p><b> #apDiv4 {</b></p><p> position:abs
138、olute;</p><p> left:24px;</p><p><b> top:63px;</b></p><p> width:914px;</p><p> height:1px;</p><p> z-index:4;</p><p><b&g
139、t; }</b></p><p> #d1,#d2,#d3,#d4,#d5{</p><p> background-color:#EA8371;</p><p> position:absolute;</p><p> border:1px black solid;</p><p> marg
140、in-left:0;</p><p> margin-right:auto;</p><p> width:87px;</p><p> height:28px;</p><p> text-align:center;</p><p><b> top: 1px;</b></p&g
141、t;<p><b> }</b></p><p><b> #d1 {</b></p><p> left:30px;</p><p> z-index:1;</p><p><b> }</b></p><p><b>
142、; #d2 {</b></p><p> left:130px;</p><p> z-index:2;</p><p><b> }</b></p><p><b> #d3 {</b></p><p> left:230px;</p>
143、<p> z-index:3;</p><p><b> }</b></p><p><b> #d4{</b></p><p> left:330px;</p><p> z-index:4;</p><p><b> }</b>
144、;</p><p><b> #d5 {</b></p><p> left:430px;</p><p> z-index:5;</p><p><b> }</b></p><p> .contents{</p><p> paddin
145、g:10px;</p><p> display:none;</p><p><b> }</b></p><p><b> #content{</b></p><p> position:absolute;</p><p> border:1px solid bl
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 《個(gè)人網(wǎng)頁設(shè)計(jì)》課程設(shè)計(jì)報(bào)告
- 網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告
- 網(wǎng)頁課程設(shè)計(jì)報(bào)告
- web網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告
- 網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告--網(wǎng)站設(shè)計(jì)報(bào)告
- 網(wǎng)頁制作課程設(shè)計(jì)報(bào)告
- 網(wǎng)頁制作課程設(shè)計(jì)報(bào)告總結(jié)
- 網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告---游戲類網(wǎng)站設(shè)計(jì)制作
- 個(gè)人博客課程設(shè)計(jì)報(bào)告
- 網(wǎng)頁設(shè)計(jì)課程報(bào)告
- 動(dòng)態(tài)網(wǎng)頁課程設(shè)計(jì)
- jsp課程設(shè)計(jì)《動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)》
- 《網(wǎng)站設(shè)計(jì)與網(wǎng)頁制》課程設(shè)計(jì)
- 《網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作》課程設(shè)計(jì)
- 個(gè)人記賬系統(tǒng)課程設(shè)計(jì)報(bào)告
- 《國際結(jié)算課程設(shè)計(jì)》個(gè)人報(bào)告
- 網(wǎng)頁編程課程設(shè)計(jì)評(píng)分表
- flash網(wǎng)頁多媒體課程設(shè)計(jì)
- 課程設(shè)計(jì)報(bào)告java實(shí)現(xiàn)華容道智力游戲 有源碼
- 個(gè)人課程設(shè)計(jì)報(bào)告---網(wǎng)上書店
評(píng)論
0/150
提交評(píng)論