計(jì)科2班web前端大作業(yè)代碼說(shuō)明書

1、WEB 前端大作業(yè)代碼說(shuō)明書一、學(xué)號(hào)專業(yè)：學(xué)號(hào)：2014051603057專業(yè)：計(jì)科：學(xué)號(hào)專業(yè)：2014051603057計(jì)科 2 班二、WEB 大作業(yè)的首頁(yè)地址和平時(shí)作業(yè)地址等：1、WEB 大作業(yè)的首頁(yè)地址：（必須準(zhǔn)確填寫，2、 平時(shí)實(shí)驗(yàn)作業(yè)地址（不給得 0 分）：3、大作業(yè) ZIP 文件云盤：ht/s/1qX5cHdi三、大作業(yè)在本地虛擬機(jī)上的文件夾結(jié)構(gòu)：xampp 虛擬機(jī)上的大作業(yè)各目錄和文件的樹型結(jié)構(gòu)：服務(wù)器文檔根目錄 d:wwwgrwzindex.htmlindex1.htmljsimgcssindex2.htmlindex3.htmlindex4.html四、大作業(yè)功能介紹（最好不

2、要超過(guò) 2000 字）功能說(shuō)明：1、從首頁(yè)中介紹自己的特點(diǎn)想法等情況，跳轉(zhuǎn)到 MyFamily 頁(yè)面還有自己的家庭情況和父母介紹，跳轉(zhuǎn)到 my university 和 alma alter 介紹自己大學(xué)、高中等學(xué)校的情況，最后還有版面謝了自己喜歡的一些話還有一段。通過(guò)網(wǎng)頁(yè)了自己，還可以瀏覽別人的網(wǎng)頁(yè)，去了解認(rèn)識(shí)別人，學(xué)習(xí)別人做的好的地方。2、鍛煉網(wǎng)頁(yè)制作能力：對(duì)文字內(nèi)容的規(guī)劃，對(duì)排版布局的規(guī)劃，對(duì)顏色搭配使用的規(guī)劃。學(xué)了一學(xué)期的 WEB 總要做出一點(diǎn)東西才算位置的規(guī)劃和對(duì)吧。3、身為計(jì)算機(jī)專業(yè)的學(xué)生，網(wǎng)頁(yè)制作也是應(yīng)該學(xué)會(huì)的。算是一種技能的學(xué)習(xí)。以后是要從事計(jì)算機(jī)這方面的工作的，做好大作業(yè)對(duì)操

3、作說(shuō)明：以后也是有幫助的。先做的其他頁(yè)面最后做的主頁(yè)，都是采用 div 布局的方式，分塊操作的。1、當(dāng)用戶進(jìn)入“主頁(yè)”頁(yè)面，大標(biāo)題下鼠標(biāo)有一列導(dǎo)航，點(diǎn)擊任何一個(gè)網(wǎng)頁(yè)就會(huì)跳轉(zhuǎn)，鼠標(biāo)移上去會(huì)有變大效果。2、用戶進(jìn)入“家人”頁(yè)面，會(huì)看到我家庭的基本信息，頁(yè)面上方的導(dǎo)航可跳轉(zhuǎn)到其他頁(yè)面。3、用戶進(jìn)入“重師”頁(yè)面，重師標(biāo)題下面就是導(dǎo)航課跳轉(zhuǎn)頁(yè)面，會(huì)看到重師的一些當(dāng)然還有重師的一些介紹，還有我對(duì)專業(yè)的看法。，4、用戶進(jìn)入“高中母校”頁(yè)面，會(huì)看到我對(duì)高中母校的介紹，還有一些中三年感悟。標(biāo)題下面就是導(dǎo)航，可以跳轉(zhuǎn)頁(yè)面。和的高5、用戶進(jìn)入“”，會(huì)看到我收集的一些，還有我一次在學(xué)校騎自行車錄得。標(biāo)題下面就是導(dǎo)航，

4、可以跳轉(zhuǎn)頁(yè)面。優(yōu)點(diǎn)：網(wǎng)頁(yè)比較簡(jiǎn)潔大方，我一共做了 5 個(gè)頁(yè)面，每個(gè)頁(yè)面都是一樣的風(fēng)格和色調(diào)，所以看起來(lái)比較舒服。內(nèi)容都用 div 布局，整個(gè)頁(yè)面看起來(lái)不會(huì)很散。大量的運(yùn)用的在學(xué)到的一些布局和裝飾，整體感覺(jué)看上去不錯(cuò)。頁(yè)是缺點(diǎn)：內(nèi)容相對(duì)要少一點(diǎn)，網(wǎng)頁(yè)比較靜態(tài)，沒(méi)有太有質(zhì)感的感覺(jué)，雖然比較小清新，但是也不夠精致，沒(méi)有比較驚艷的細(xì)節(jié)。七、界面效果圖說(shuō)明：1、主頁(yè)：進(jìn)入主頁(yè)上面有導(dǎo)航2、家人進(jìn)入頁(yè)面導(dǎo)航3、重師進(jìn)入頁(yè)面導(dǎo)航4、母校進(jìn)入頁(yè)面導(dǎo)航5、進(jìn)入頁(yè)面導(dǎo)航八、代碼模塊說(shuō)明1、index.html 文件功能說(shuō)明：該頁(yè)主要介紹個(gè)人、優(yōu)勢(shì)、未來(lái)計(jì)劃等。2、index1.html 文件功能說(shuō)明：該頁(yè)主要介紹

5、家庭情況，還有父母的信息。3、index2.html 文件功能說(shuō)明：該頁(yè)介紹了重慶師范大學(xué)，有學(xué)校的簡(jiǎn)介，業(yè)的看法等。還有我多專4、index3.html 文件功能說(shuō)明:該頁(yè)面對(duì)我高中母校的介紹，學(xué)校簡(jiǎn)介，感悟。和我高中三年的5、index4.html 文件功能說(shuō)明：該頁(yè)有一些佳句和一段學(xué)校的小。九、代碼粘貼：1、index.html 文件代碼粘貼：My Universitybody background:url(img/bg.png);#contenter/*父塊*/ition:relative;/*相對(duì)位置*/ width:1100px;/*總寬度*/ left:50%;margin-le

6、ft:-550px;/*網(wǎng)頁(yè)居中*/padding:0px;/*內(nèi)邊距*/.zhuangshi/*右最頂上的花藤*/background: url(img/huabian.png);/* height: 343px;width: 280px;ition: absolute;/*絕對(duì)位置*/ top: -20px;/*與頂邊的距離*/ left:900px;.zhuangshi1/*左最頂上的花藤*/ background: url(img/huabian1.png);/* height: 343px;width: 280px;ition: absolute;/*絕對(duì)位置*/ top: -20p

7、x;left: -100px;/*與左邊的距離*/*導(dǎo)航*/*/*/.hang ulwidth:1100px;/*寬度*/ border:0px solid #000;/*邊框*/margin:0px auto 0px auto;/*外邊距 list-style:none;/*無(wú)列表樣式*/ition: absolute ; left: 10px;top: 180px;hang ul li頂右底左*/.eft;/*左浮動(dòng)*/flohang ul li awidth:150px; height:45px;line-height:40px;/*行高*/ background:url(img/bg1

8、.png); color:#000;margin:30px 30px;font-size:18px;/*文字大小18個(gè)像素點(diǎn)*/ display:block;text-decoration:none;/*無(wú)文字裝飾*/ border-radius: 20px;.hang ul li a:hover/*指針在導(dǎo)航上浮動(dòng)時(shí)*/ width:150px;height:35px;line-height:40px;/*行高*/ border:3px solid #555555; color:#030; background:#5F9EA0;/*背景顏色*/.#apDiv12 ition: relativ

9、e;/*相對(duì)位置*/ top:280px;left: 420px;width: 600px;/*寬度*/ height:400px;.content1 height:400px; width:600px;/*寬度*/overflow:hidden;/*隱藏多出的部分*/border:solid 10px;/*邊框*/ border-radius:10px;/*圓角裝飾*/.one/*banner*/ width: 900px;/*寬度*/height: 250px;/*高度*/ition: absolute; top:-20px ;left: 110px;.twobackground-colo

10、r:#B0E0E6 ; border: 10px solid #5F9EA0; border-radius: 20px;/*圓角邊框*/ width: 300px;height: 380px;/*高度*/ ition: absolute;top:300px ;/*與頂邊的距離*/ left: 60px;/*與左邊的距離*/.two1/*寸照*/border: 5px solid #5F9EA0;/*背景顏色*/width: 150px;height: 227px; ition: absolute;top:320px ;left: 135px;/*與左邊的距離*/.three/*資料*/ bac

11、kground-color:#B0E0E6 ;background-image: url(img/ali.png); background-repeat: no-repeat;/*不重復(fù)填充*/ background-ition: 100% 100%;border: 10px solid #5F9EA0; border-radius: 20px;/*圓角邊框*/ width: 400px;height: 530px;ition: absolute;/*絕對(duì)位置*/ left: 60px;/*與左邊的距離*/ top: 800px;.four/*未來(lái)職業(yè)規(guī)劃*/ background-color

12、:#B0E0E6 ;background-image: url(img/ali.png);background-repeat: no-repeat;/*背景 background-ition: 100% 100%; border: 10px solid #5F9EA0;border-radius: 20px; width: 520px; height: 530px;ition: absolute; top:800px;left: 530px;/*與左邊的距離*/p.title1/*字體設(shè)置*/ color:#566F89;font-family: 微軟雅黑;/*字體樣式*/ font-size

13、: 70px;text-align: center;/*文字居中*/p.title2/*文字設(shè)置*/font-family: 微軟雅黑;/*字體樣式*/ font-size: 40px;text-align: center;不重復(fù)*/margop: 5px;p.title3/*字體設(shè)置*/font-family: 微軟雅黑;/*字體樣式*/ font-size: 20px;text-align: center;margop: 15px;ition: absolute;top: 200px; left: 30px;p.title4font-family: 微軟雅黑;/*字體樣式*/ font-s

14、ize: 20px;text-align:justify;/*兩端對(duì)齊*/ margin: 0px 5px 0px 5px;.demo10 /*文字陰影裝飾*/color: #;text-shadow: 1px 1pxrgba(255, 250, 205,0.8),2px3px 4px 5px 6px2px3px 4px 5px 6pxrgba(255,rgba(255, rgba(255,250,250,250,205,0.8),205,0.8),205,0.8),rgba(255, 250, 205,0.8),rgba(255, 250, 205,0.8);.demo /*花邊*/bord

15、er-image :url(img/bi display : inline-block; border-width:10px;uang.png) 10round;#footer/*腳注*/font-family: 微軟雅黑; clear:both; font-size:15px; width:100%;/*寬度百分之百*/ font-weight: bold;/*字體加粗*/ padding:3px 0px 3px 0px;text-align:center;/*文字居中*/ margin:0px;background-color:#b0cition: absolute;top: 1450px

16、;/*與頂邊的距離*/divdivclass=zhuangshiclass=zhuangshi1Home pageMy FamilyMy UniversityAlma Matervar widths=600; /寬 var heights=400;/高 var counts=5;/數(shù)量img1=new Image ();img1.src=img/wo1.png; /的位置img2=newimg3=new img4=newImageImage Image();img2.src=img/wo3.png;();img3.src=img/wo4.png;();img4.src=img/wo5.png;

17、img5=new Image ();img5.src=img/wo2.png;url1=newurl2=new url3=new url4=new url5=new var nn=1;ImageImage Image Image Image();();();();();var key=0;function change_img()if(key=0)key=1;else if(.all).geementById(pic).filters0.Apply();.geementById(pic).filters0.Play(duration=2);eval(.geementById(pic).src=

18、img+nn+.src);eval(for (var.geementById(url).href=url+nn+.src);i=1;icounts)nn=1;tt=setTimeout(change_img(),2000); / function過(guò)渡時(shí)間長(zhǎng)度changeimg(n)nn=n;window.clear.write();erval(tt);change_img();.write(.axxpadding:30px20px;border-left:#cccccc 1px solid;);.write(a.axx:link,a.axx:visitedtext-decoration:non

19、e;color:#;line-height:30px;font:30pxsans-serif;background-color:#666;);.write(a.axx:active,a.axx:hovertext-decoration:no;line-height:30px;font:30pxne;color:#sans-serif;background-color:#999;);.write(.bxxpadding:30px 20px;border-left:#cccccc 1px solid;);.write(a.bxx:link,a.bxx:visitedtext-decoration:

20、none;color:#;line-height:12px;font:30pxsans-serif;background-color:#D34600;);.write(a.bxx:active,a.bxx:hovertext-decoration:none;line-height:12px;font:30pxcolor:#sans-serif;background-color:#D34600;);.write();.write();.write();.write(); for(var i=1;icounts+1;i+).write(+i+);.write(); change_img();My

21、Home Page .重慶師范大學(xué)計(jì)算機(jī)與信息科學(xué)學(xué)院14計(jì)科class=title2資料 class=title4：ppppp事物。class=title4生日：1996年11月11日：class=title4class=title4優(yōu)勢(shì)和特長(zhǎng)：性格溫和，樂(lè)于接受新做事專一， 待人誠(chéng)懇，對(duì)人和事都有耐心， 能靜下心來(lái)想事情。比較追求完美，什么事情都想盡量做到最好。：喜歡唱歌，想怎么唱就怎么唱那種。喜歡看動(dòng)作類和搞笑類的。戶外運(yùn)動(dòng)比較喜歡打乒乓球和羽毛球。平時(shí)沒(méi)什么事情的時(shí)候喜歡看書和發(fā)呆。未來(lái)職業(yè)規(guī)劃在上大學(xué)之前，從來(lái)都沒(méi)有想過(guò)自己喜歡什么專業(yè)，以后想要做什么，上大學(xué)一年多了，現(xiàn)在對(duì)于自己的

22、職業(yè)有兩個(gè)想法。第一個(gè)是和自己專業(yè)有關(guān)的職業(yè)，做WEB前端?，F(xiàn)在正在學(xué)習(xí)WEB網(wǎng)頁(yè)設(shè)計(jì)，自己對(duì)于這方面也比較感。但是要做好前端還要學(xué)習(xí)很多，所以現(xiàn)在需要做的就是好好學(xué)習(xí)。第二個(gè)想法就是自己畢業(yè)了先工作一段時(shí)間，攢一些錢，然后開一家小店自己當(dāng)。當(dāng)然不管以后自己從事什么工作，現(xiàn)在短期內(nèi)的計(jì)劃就是要做的就是多學(xué)一點(diǎn)東西，以后自己的簡(jiǎn)歷上也有東西可以寫。上大學(xué)不是來(lái)混的，除了把這段經(jīng)歷當(dāng)做人生的一個(gè)程序，更重要的是這也是學(xué)習(xí)知識(shí)和鍛煉動(dòng)手能力的契機(jī)。為將來(lái)走進(jìn)社會(huì)奠定基礎(chǔ)。重慶師范大學(xué)計(jì)算機(jī)與信息科學(xué)學(xué)院14級(jí)計(jì)科。制作，2、index1.html 文件代碼粘貼：My Familybodybackgr

23、ound: url(img/bg.png);#container/*父塊*/ ition:relative;/*相對(duì)位置*/width:1100px; left:50%;margin-left:-550px;/*網(wǎng)頁(yè)居中*/*總寬度*/ padding:0px;/*內(nèi)邊距*/*導(dǎo)航*/.hang ulwidth:1100px;/*寬度*/ border:0px solid #000;/*邊框*/margin:0px auto 0px auto;/*外邊距*/ list-style:none;/*列表樣式*/ition: absolute;/*絕對(duì)位置*/ left: 40px;top: 170

24、px;hang ul li.eft;/*左浮動(dòng)*/flohang ul li awidth:150px; height:45px;line-height:40px;/*行高*/ background:url(img/bg1.png);/*背景 color:#000;margin:30px 20px;/*外邊距*/ font-size:18px; display:block;/*塊*/text-decoration:none;/*沒(méi)有文字裝飾*/ border-radius: 20px;hang ul li a:hover/*指針在導(dǎo)航上浮動(dòng)時(shí)*/ width:150px;height:35px

25、;line-height:40px;/*行高*/ border:3px solid #555555;/*邊框*/ color:#030; background:#5F9EA0;/*背景顏色*/.*/.one/*大標(biāo)題*/height:250px ;/*高度*/ width: 900px;/*寬度*/ition:absolute;/*絕對(duì)位置*/ left: 350px;/*左邊距*/top: -50px;/*上邊距*/.two /*導(dǎo)航塊*/height:150px;width: 150px;border-radius: 25px;/*添加圓角邊框*/ border: 10px solid #

26、7F7F7F;/*邊框*/.three/*框*/height: 300px;width: 250px;border-radius: 20px;/*添加圓角邊框*/ border: 10px solid #5F9EA0;/*邊框*/ition: absolute;/*絕對(duì)位置*/ top:350px;left:80px;.four /*三口之家*/ background:#CAE1FF;background-image: url(img/xiaoxiong.png); background-repeat:no-repeat;/*不重復(fù)*/ition:100% 100%;/*位置*/backgro

27、und-height:380px; width: 680px;border-radius:25px;/*添加圓角邊框*/ border: 10px solid #5F9EA0;/*邊框*/ition: absolute;/*絕對(duì)位置*/ top: 320px;left: 380px;.five/*/background:#CAE1FF;background-image: url(img/xiaoxiong.png);/*背景 background-repeat:no-repeat;*/background-height:380px; width: 480px;ition:100% 100%;b

28、order-radius:25px;/*添加圓角邊框*/ border: 10px solid #5F9EA0;/*邊框*/ition: absolute;/*絕對(duì)位置*/ top: 750px;left:70px;.six/*/background:#CAE1FF;/*背景顏色*/background-image: url(img/xiaoxiong.png);/*背景 background-repeat:no-repeat;*/background-height:380px; width: 480px;ition:100% 100%;border-radius:25px;/*添加圓角邊框*

29、/ border: 10px solid #5F9EA0;/*邊框*/ition: absolute;/*絕對(duì)位置*/top: 750px;left: 580px;.zhuangshi/*右最頂上的花藤*/ background: url(img/huabian.png);/* height: 343px;width: 280px;ition: absolute;/*絕對(duì)位置*/ top: -20px;left:900px;.zhuangshi1/*左最頂上的花藤*/ background: url(img/huabian1.png);/* height: 343px;width: 280px

30、;ition: absolute;/*絕對(duì)位置*/ top: -20px;left: -100px;p.title1 /*大標(biāo)題字體設(shè)置*/*/*/font-family: Comic Sans MS;/*字體樣式*/ font-size: 90px;p.title2/*小標(biāo)題*/font-family: 微軟雅黑;font-size: 40px;/*字體大小 40個(gè)像素點(diǎn)*/ text-align: center;/*文字居中*/ margin:0px 0px 0px 0px ;p.title3/*文本字體*/font-family: 微軟雅黑; font-size:21px;text-al

31、ign:justify;/*文字兩端對(duì)齊*/ margin:5px 5px 5px 5px ;/*外邊距*/.demo12 /*文字裝飾*/color: #4A708B;text-shadow: 5px 5px 0 #F0#4A708B;#footer/*腳注*/font-family: 微軟雅黑;0, 7px 7px0clear:both;font-size:15px;font-weight: bold;/*字體加粗*/ width:1100px;padding:3px 0px 3px 0px;/*內(nèi)邊距*/ text-align:center;margin:0px;/*外邊距*/backg

32、round-color:#b0c;ition: absolute;/*絕對(duì)位置*/ left:30px;top: 1230px;MyFamilydiv class=hangHome pageMy FamilyMy UniversityAlma Mater 的代碼var widths=250; /寬 var heights=300;/高 var counts=5;/數(shù)量img1=new Image ();img1.src=img/baba2.png; /的位置img2=newimg3=new img4=new img5=newImageImage Image Image();img2.src=i

33、mg/mama.png;();img3.src=img/yijia.png; ();img4.src=img/mama2.png; ();img5.src=img/yijia2.png;url1=newurl2=new url3=new url4=new url5=newImageImage Image Image Image();();();();();var nn=1;var key=0;function change_img()if(key=0)key=1;else if(.all).geementById(pic).filters0.Apply();.geementById(pic).

34、filters0.Play(duration=2);eval(.geementById(pic).src=img+nn+.src);eval(for (var.geementById(url).href=url+nn+.src);i=1;icounts)nn=1;tt=setTimeout(change_img(),1500); / function過(guò)渡時(shí)間長(zhǎng)度changeimg(n)nn=n;window.clear.write();erval(tt);change_img();.write(.axxpadding:10px ;border-left:#cccccc1px solid;);.

35、write(a.axx:link,a.axx:visitedtext-decoration:none; color:#FFEC8B;line-height:20px;font:30pxsans-serif;background-color:#666;);.write(a.axx:active,a.axx:hovertext-decoration:no;line-height:30px;font:30pxne;color:#sans-serif;background-color:#FFEC8B;);.write(.bxxpadding:10px20px;border-left:#FFEC8B 1

36、px solid;);.write(a.bxx:link,a.bxx:visitedtext-decoration:none;color:#;line-height:12px;font:30pxsans-serif;background-color:#D34600;);.write(a.bxx:active,a.bxx:hovertext-decoration:none;line-height:12px;font:30pxcolor:#sans-serif;background-color:#FFEC8B;);.write(a.bxx:active,a.bxx:hovertext-decora

37、tion:none;line-height:12px;font:30pxcolor:#sans-serif;background-color:#FFEC8B;);.write();.write();.write();.write();for(var i=1;icounts+1;i+).write(+i+);.write(); change_img();三口之家家庭成員有：我。、和雖然三口之家人不多，但還是很溫馨。早年在省外做生意，基本是一兩個(gè)月回一次家，每次回家都給我?guī)Я撕芏嗪贸缘暮猛娴?。到暑假寒時(shí)候，我和也會(huì)坐火車到工作的地方去玩。好在在我三年級(jí)之后就回到家這邊工作了，一家就天天在一起了。但

38、是為了自己能得到更好的教育資源，在初中的時(shí)候我就到綿陽(yáng)市去讀書了，就開始了異地求學(xué)。只有寒暑假和長(zhǎng)假能回家和在一起。現(xiàn)在上了大學(xué)，離家更遠(yuǎn)了，但一直都保持著和家每周通兩到三次的頻率，一切都還好?，F(xiàn)在最期待的就是寒暑假，可以回家和親戚朋友團(tuán)聚。無(wú)論我遇到什么事情，家都是最好的港灣。團(tuán)聚，和我屬猴,今年48歲，2016年是他的本命年。唱歌不錯(cuò) 彈得一手好吉他，是一個(gè)比較幽默風(fēng)趣的中年大叔。年輕的時(shí)候長(zhǎng)得很帥，翩翩白衣少年。當(dāng)然，歲月是把殺豬刀，幾十年后硬是蹉跎成了冬瓜大叔。事業(yè)上有能力，人緣很好。有給晚輩取外號(hào)的惡趣味，取的外號(hào)手指頭已經(jīng)數(shù)不清了。小有文采。家里掌勺的，做飯很好吃。在成長(zhǎng)中扮演著朋

39、友和父親的角色，總是在我關(guān)鍵的時(shí)候給我支持，給我加油。今年43歲，比小五歲。 生活滋潤(rùn)安逸，是有一顆少女心的中年婦職小學(xué)教師，教書育人二十幾載 ，、電視劇 等。在大事上有主見(jiàn)有想法，在事業(yè)上能夠獨(dú)當(dāng)一面。和我是在一個(gè)level的，所以我什么事情都會(huì)給她說(shuō)。在成長(zhǎng)中扮演著朋友和母親的角色，總是在我關(guān)鍵的時(shí)候給我做工作，給我鼓勵(lì)。重慶師范大學(xué)計(jì)算機(jī)與信息科學(xué)學(xué)院14級(jí)計(jì)科。制作，3、index2.html 文件代碼粘貼：My Universitybody background:url(img/bg.png);#contenter/*父塊*/ition:relative;/*相對(duì)位置*/ width

40、:1100px;left:50%;margin-left:-550px;/*網(wǎng)頁(yè)居中*/*總寬度*/ padding:0px;/*內(nèi)邊距*/hang ul/*導(dǎo)航*/.width:100px;/*寬度*/ border:0px solid #000;/*邊框*/margin:0px auto 0px auto;/*外邊距*/ list-style:none;/*列表樣式*/ition: absolute;/*絕對(duì)位置*/ left: 925px;/*左邊距*/top: 280px;/*右邊距*/.hang ul lieft;/*左浮動(dòng)*/flo.hang ul li awidth:150px;

41、height:35px;line-height:40px;/*行高40個(gè)像素點(diǎn)*/ background:url(img/bg1.png);/*背景 color:#000;margin:40px 30px;font-size:18px;/*字體大小18個(gè)像素點(diǎn)*/ display:block;text-decoration:none;/*沒(méi)有文字裝飾*/*/.hang ul li a:hover/*指針在導(dǎo)航上浮動(dòng)時(shí)*/width:150px;height:35px;line-height:40px;/*行高40個(gè)像素點(diǎn)*/ border:3px solid #555555; color:#0

42、30;background:#5F9EA0;/*背景顏色*/.zhuangshi/*右最頂上的花藤*/background: url(img/huabian.png);/* height: 343px;*/width: 280px;ition: absolute;/*絕對(duì)位置*/ top: -90px;left:900px;.zhuangshi1/*左最頂上的花藤*/ background: url(img/huabian1.png);/* height: 343px;width: 280px;ition: absolute;/*絕對(duì)位置*/ top: -90px;left: -100px;.

43、onewidth: 900px; height: 250px;ition:relative; top:20px ;/*頂邊距*/ left: 100px;/*左邊距*/.two/*校徽*/background-image: url(img/bg2.png); ition: absolute;top: 30px; left: 100px;width: 100px;/*div寬度*/ height: 100px;*/.three/*校園簡(jiǎn)介*/ background-color:#ADD8E6 ; width: 650px;height: 700px;ition: absolute;/*絕對(duì)位置*

44、/ top:200px;left:320px;border: 10px solid #5F9EA0;/*邊框*/ border-radius:20px ;/*圓角邊框*/.four/*校園*/width: 240px;height: 900px; ition: absolute;top:200px;left: 50px;.five/*校區(qū)景色*/ background-color:#ADD8E6 ;background-image: url(img/liangren.png);/*背景 background-repeat: no-repeat;/*不重復(fù)填充*/*/ition: 120% 10

45、0%;/*相對(duì)div位置*/background-width: 300px;height: 650px; ition: absolute;top:940px; left:50px;border: 10px solid #5F9EA0;/*邊框的寬度10px樣式直線顏色藍(lán)色*/border-radius:20px ;.six/*專業(yè)*/ background:#ADD8E6;background-image: url(img/girl.png); background-repeat: no-repeat;background-ition: 120% 100%;ition: absolute;to

46、p:940px ; left:390px ;border:10px solid #5F9EA0; border-radius:20px ; width: 580px;height: 650px;p.title1/*大標(biāo)題字體*/text-align:center;/*文字居中*/font-family: 華文行楷;/*文字樣式*/ font-size:90px;/*字體大小*/font-weight: bold;/*加粗*/ margin-left: 50px;/*左外邊距*/p.title2/*小標(biāo)題字體*/ font-family: 微軟雅黑; font-size: 30px;font-w

47、eight: bold; text-align:center;margin: 5px 0px 20px 0px;/*外邊距 */p.title3/*文本字體*/ font-family:微軟雅黑 ; font-size: 20px; margin:5px;text-align:justify;/*字體兩端對(duì)齊*/p.title5/*文本字體*/ font-family: 微軟雅黑; font-size: 20px;text-align:center;font-weight: bold;/*加粗*/ margin: 0px;/*外邊距 都為0*/.demo /*相框*/border-image

48、:url(img/xiangkuang.png) 20 display : inline-block;/*行內(nèi)塊級(jí)元素*/ border-width:17px;#footer/*腳注*/ font-family: 微軟雅黑;clear:both;/*無(wú)浮動(dòng)*/ font-size:15px; font-weight: bold;width:1100px;/*寬度%*/padding:3px 0px 3px 0px;/*頂 右 底 左*/ text-align:center;margin:0px;round;background-color:#b0c;ition: absolute;/*絕對(duì)位置

49、*/ top: 1750px;left:30px;divdivclass=zhuangshi class=zhuangshi1Home pageMy FamilyMy UniversityAlma Mater 重 慶師范大學(xué)重慶師范大學(xué)簡(jiǎn)介重慶師范大學(xué)(英文簡(jiǎn)寫CQNU)創(chuàng)辦于1954年。是一所以文理為主，多學(xué)科協(xié)調(diào)發(fā)展的多科性高等學(xué)府，坐落在歷史文化名城重慶，校園面積2804畝，包括大學(xué)城校區(qū)、沙坪壩校區(qū)和北碚校區(qū)。學(xué)校是重慶市依校示、重慶市、重慶市文明十佳市容整潔、重慶市德育工作先進(jìn)集體、重慶市園林式、重慶市森林校園。學(xué)校擁有僑務(wù)辦公室華文教育、教育部重點(diǎn)建設(shè)職教師資培訓(xùn)兩個(gè)國(guó)家級(jí)，、重慶

50、市普通中小學(xué)教師市級(jí)培訓(xùn)、重慶市幼兒教育教師市級(jí)研修培訓(xùn)重慶市特殊教育教師市級(jí)培訓(xùn)、重慶市漢語(yǔ)國(guó)際推廣培訓(xùn)、中德(重慶)職業(yè)教育示范、重慶市職教師資培訓(xùn)、重慶市師資培訓(xùn)等多個(gè)市級(jí)。此外，重慶旅游學(xué)院、重慶音樂(lè)學(xué)院、重慶幼兒師范學(xué)院、重慶特殊教育學(xué)院也依托學(xué)校設(shè)立。截止到2013年，學(xué)校館擁有紙質(zhì)總量226萬(wàn)冊(cè)，全日制本?？粕?4000余人，在校2000余學(xué)位人。下設(shè)有17個(gè)學(xué)院，1個(gè)獨(dú)立二級(jí)學(xué)院，47個(gè)全日制本科專業(yè)，14個(gè)一級(jí)學(xué)科、86個(gè)專業(yè)學(xué)位。鴻德樓圖書館校友會(huì)堂馬鞭草校區(qū)景色我所就讀的校區(qū)是大學(xué)城校區(qū)，是沙坪壩校區(qū)和北碚校區(qū)之后的新校區(qū)。首批學(xué)生入住是在2005年10月，到現(xiàn)在已經(jīng)10

51、年了。學(xué)校周圍有美術(shù)學(xué)院、重慶大學(xué)和重慶醫(yī)學(xué)。交通便利，南門出去走幾分鐘就到輕軌站，校門外都有車站。在南門的對(duì)面就是熙街，購(gòu)物逛街都很方便。學(xué)校內(nèi)部的環(huán)境很好，樹木花草大面積覆蓋。有湖水碧綠，夏天開荷花的三春湖、石板拱型的泛月橋、擁有一大片草坪的坡、高高聳立的博望亭和馬鞭草花田。教學(xué)設(shè)施也比較完善。專業(yè)計(jì)算機(jī)科學(xué)與技術(shù) 專業(yè)是計(jì)算機(jī)科學(xué)與技術(shù)，屬于計(jì)算機(jī)與信息科學(xué)學(xué)院。之前報(bào)志愿的是時(shí)候，我填的是經(jīng)管類的專業(yè)，但是最后被調(diào)劑到計(jì)信學(xué)院。想到自己大學(xué)四年要學(xué)習(xí)計(jì)算機(jī)開始整個(gè)人都不好了，平時(shí)自己用計(jì)算機(jī)僅限于上網(wǎng)聊天、看和玩之類的，沒(méi)想到大學(xué)四年還要深入學(xué)習(xí)。雖然心情很忐忑，但還是抱著既來(lái)之，則安

52、之的心態(tài)開始了學(xué)習(xí)計(jì)算機(jī)。大一第一學(xué)期，沒(méi)有計(jì)算機(jī)基礎(chǔ)的我是很痛苦的，學(xué)習(xí)起來(lái)也比較費(fèi)勁。不過(guò)還好，后面慢慢對(duì)計(jì)算機(jī)熟悉了?，F(xiàn)在已經(jīng)大二了，第一學(xué)期也快要結(jié)束了。這三個(gè)學(xué)期以來(lái)，收收獲最大的就是戴老師交的Flas制作和WEB前端開發(fā)技術(shù)。每門課都有一本厚厚的講義，都是老師耗時(shí)耗力完成的。等到做完 Flash大作業(yè)后，看到自己的成果就有一種深深的成就感，付出努力是有回報(bào)的。雖然我一開始對(duì)計(jì)算機(jī)專業(yè)不討厭也不喜歡，但是現(xiàn)在我已經(jīng)喜歡上自己的專業(yè)，對(duì)當(dāng)初能調(diào)劑到計(jì)科這個(gè)專業(yè)來(lái)，感到的榮幸。這學(xué)期學(xué)的WEB前端，自己學(xué)的也是越來(lái)越有自信，雖然每次上完課都需要敲很多的代碼，但是到自己既然選擇了好好學(xué)習(xí)計(jì)

53、算機(jī)，就該有不怕苦的。對(duì)于我來(lái)說(shuō)，學(xué)習(xí)計(jì)算機(jī)是一條漫長(zhǎng)而艱辛的路。不過(guò)我相信我會(huì)堅(jiān)持走下去。重慶師范大學(xué)計(jì)算機(jī)與信息科學(xué)學(xué)院14級(jí)計(jì)科邱雨檬制作，。4、index3.html 文件代碼粘貼：Alma Masterbody background:url(img/bg.png);#container/*父塊*/ition:relative;/*相對(duì)位置*/ width:1100px;left:50%;margin-left:-550px;/*網(wǎng)頁(yè)居中*/*總寬度*/ padding:0px;/*內(nèi)邊距*/hang ul/*導(dǎo)航*/.width:1100px;/*寬度*/ border:0px so

54、lid #000;/*邊框*/ margin:0px auto 0px auto;/*外邊距*/ list-style:none;/*列表樣式*/ition: absolute;/*絕對(duì)位置*/ left: -30px;/*左邊距*/top: 180px;/*右邊距*/.hang ul lieft;/*左浮動(dòng)*/flo.hang ul li awidth:150px;height:35px;line-height:40px;/*行高40個(gè)像素點(diǎn)*/ background:url(img/bg1.png);/*背景 color:#000;margin:40px 30px;font-size:18

55、px;/*字體大小18個(gè)像素點(diǎn)*/ display:block;text-decoration:none;/*沒(méi)有文字裝飾*/*/.hang ul li a:hover/*指針在導(dǎo)航上浮動(dòng)時(shí)*/width:150px;height:35px;line-height:40px;/*行高40個(gè)像素點(diǎn)*/ border:3px solid #555555; color:#030;background:#5F9EA0;/*背景顏色*/.zhuangshi/*右最頂上的花藤*/background: url(img/huabian.png);/* height: 343px;width: 280px;i

56、tion: absolute;/*絕對(duì)位置*/ top: -20px;left:900px;.zhuangshi1/*左最頂上的花藤*/ background: url(img/huabian1.png);/* height: 343px;width: 280px;ition: absolute;/*絕對(duì)位置*/ top: -20px;left: -100px;.one/*banner*/ width: 900px; height: 250px;ition: absolute;/*絕對(duì)位置*/ top:-20px ;left: 110px;*/*/.two/*學(xué)校簡(jiǎn)介*/background-

57、color:#B9D3EE;/*背景顏色*/border: 10px solid #5F9EA0;border-radius: 25px;/*圓角邊框*/ width: 1000px; /*長(zhǎng)度*/height: 360px;ition: absolute;/*絕對(duì)位置*/ top: 300px;left: 30px;vertical-align:top; /*垂直對(duì)齊*/.threebackground-color: #B9D3EE;border: 10px solid #5F9EA0;/*邊框*/ border-radius: 25px;ition: absolute;/*絕對(duì)位置*/ l

58、eft:30px;top:700px;width: 280px;/*長(zhǎng)度*/ height: 960px;background-image:url(img/liangren.png);/*背景 background-repeat:no-repeat;/*不重復(fù)*/*/ition:120% 100%;/*相對(duì)div位置*/background-.fourbackground-color:#B9D3EE ;/*背景顏色*/ ition: absolute;top:700px ;/*與頂邊的距離*/ left:360px ;/*與左邊的距離*/ width:670px;/*長(zhǎng)度*/ height:9

59、60px ;border:10px solid#5F9EA0;border-radius: 25px;background-image:url(img/girl.png); background-repeat:no-repeat;background-ition:120% 100%;p.title1/*大標(biāo)題*/ color:#566F89;font-family: 微軟雅黑;/*文字樣式*/ font-size: 70px;/*字體大小 70px*/ text-align: center;/*文本居中*/ margin-bottom: 5px;/*外低邊距*/p.title2/*小標(biāo)題*/

60、font-size: 50px;font-weight: bold;/*加粗*/ font-family: 微軟雅黑; text-align:center; margin: 20px;p.title3/*標(biāo)題*/font-family: 微軟雅黑; font-size: 35px;text-align:center;/*文本居中*/ margin-bottom:10px ;font-weight: bold;p.title4/*文本字體*/ font-family: 微軟雅黑; font-size: 20px;text-align:justify;/*兩端對(duì)齊*/ margin: 5px;/*