【正文】 性進(jìn)行設(shè)置 */ width:69%。 display:inline。 display:inline。 backgroundattachment:fixed。 } .content .secondary{ /*對(duì)內(nèi)容中第一列布局的屬性進(jìn)行設(shè)置 */ float:left。 height:700px } body{ backgroundimage:url(D:/Mydcuments/MyPictures/ } /*為整體添加背景圖片 */ .content .primary { /*對(duì)內(nèi)容中右面主體部分的布局進(jìn)行設(shè)置 */ 交通運(yùn)輸學(xué)院課程設(shè)計(jì) 6 width:64%。 textalign:center。 padding:0。運(yùn)用本學(xué)期對(duì) css及腳本的相關(guān)知識(shí)，對(duì)布局進(jìn)行合理的安排。文檔撰寫須符合統(tǒng)一的格式規(guī)范。如有余力者，可以進(jìn)一步學(xué)習(xí)并應(yīng)用數(shù)據(jù)庫(kù)技術(shù)。 五、主要參考文獻(xiàn) [1] Andy Budd. 精通 CSS：高級(jí) Web標(biāo)準(zhǔn)解決方案（第二版） . 北京 . 人民郵電出版社 . [2] 張亞飛 . CSS開發(fā) . 北京 . 電子工業(yè)出版社 . 交通運(yùn)輸學(xué)院課程設(shè)計(jì) 4 審核批準(zhǔn)意見 系主任（簽字） 年 月 日 目 錄 1 說(shuō)明 ： 發(fā)現(xiàn)課程學(xué)習(xí)中的不足和薄弱環(huán)節(jié)，予以補(bǔ)充和加強(qiáng)。將設(shè)計(jì)成果寫入報(bào)告。相似部分可適當(dāng)省略。 要求所有設(shè)計(jì)為原創(chuàng)結(jié)果，布局合理，美觀大方，細(xì)節(jié)處盡可能應(yīng)用所學(xué)過(guò)的設(shè)計(jì)技術(shù)，如標(biāo)簽式導(dǎo)航、圖像翻轉(zhuǎn)等。綜合運(yùn)用在課程學(xué)習(xí)過(guò)程中所學(xué)知識(shí)，同時(shí)為了實(shí)現(xiàn)課程設(shè)計(jì)的規(guī)定成果進(jìn)行更深入的理論學(xué)習(xí)和實(shí)踐拓展。培養(yǎng)獨(dú)立思考和解決問(wèn)題的能力，探索和創(chuàng)新的能力。在此基礎(chǔ)上盡可能有所創(chuàng)新。文檔撰寫須符合統(tǒng)一的格式規(guī)范。 第 36 天：完成頁(yè)面內(nèi)容設(shè)計(jì)，進(jìn)行細(xì)節(jié)美化，加入特定效果；將設(shè)計(jì)成果寫入報(bào)告。綜合運(yùn)用在課程學(xué)習(xí)過(guò)程中所學(xué)知識(shí)，同時(shí)為了實(shí)現(xiàn)課程設(shè)計(jì)的規(guī)定成果進(jìn)行更深入的理論學(xué)習(xí)和實(shí)踐拓展。 ： 工作量方面，要求設(shè)計(jì)一個(gè)網(wǎng)站的主頁(yè)和其它至少兩個(gè)頁(yè)面，要求風(fēng)格統(tǒng)一。 2 設(shè)計(jì)過(guò)程 ： 總體上遵循從整體到部分的思路，由主及次，由大及小。再次，主要通過(guò)對(duì)類和塊的應(yīng)用，對(duì)每塊布局進(jìn)行內(nèi)容的設(shè)計(jì)和安排。 } .wrapper { /*對(duì)整體框架進(jìn)行設(shè)置 */ width: 1102px。 /*對(duì)日期的屬性進(jìn)行設(shè)置 */ } .footer{ /*對(duì)底部布局的屬性進(jìn)行設(shè)置 */ overflow:hidden。 height:480px。 height:500px。 filter:alpha(opacity=100)。 } /*對(duì)內(nèi)容中第二列部分的屬性進(jìn)行設(shè)置 */ .content .primary .secondary{ /*對(duì)內(nèi)容中第三列布局的屬性進(jìn)行設(shè)置 */ width:36%。 paddingright:3px。 height:300px。 height:300px。 } .footer .primary .primary{ width:66%。 filter:alpha(opacity=85)。 display:inline。 交通運(yùn)輸學(xué)院課程設(shè)計(jì) 8 } style 整體布局： Top Wrapper header .nav Content Primary .primary Primary .secondary Secondary Footer Secondary Primary .primary Primary .secondary 頂部分析： style .top{ /*對(duì)最頂部的布局進(jìn)行設(shè)置 */ width:1105px。 height:40px。 display:block。 borderbottom:5px solid 0066CC。 textdecoration:none。 textalign:center。 fontsize:25px。 filter:alpha(opacity=100)； } .content .secondary table a{ /*對(duì)表格下的錨標(biāo)簽的屬性的設(shè)置 */ color:000； } tr { height:35px。 margin:10px。 float:left。 fontweight:bold。 padding:2px。 } label{ color:000000。 top:840px。 width:250px。 border:5px solid CCCCCC。 color:000000。 fontweight:bold。 marginleft:。 color:6666FF。 } .cal thead th{ backgroundcolor:99CC99。 textshadow:1px 1px 1px white。 borderbottom:1px solid acacad。 backgroundcolor:c0c8d2。 textshadow:1px 1px 2px 22456b。 borderleft:1px solid 466080。 liststyletype:none。 } a, /*對(duì)導(dǎo)航條下的鏈接設(shè)置動(dòng)態(tài)效果 */ { display:block。 backgroundcolor:CCCCCC。 } a[rel=prev]:before{ content:\00AB。 } div id=mybox !對(duì)第一列下方的生活剪影部分照片的安排 a href=IMG SRC=D:/My Documents/My Pictures/ WIDTH=70 HEIGHT=130 /a div IMG RC=D:/My Documents/My Pictures/u=145fm=52amp。 borderleft:6px dotted 000000。 網(wǎng)頁(yè)二的源代碼及分析 style type=text/css *{ margin:0。 交通運(yùn)輸學(xué)院課程設(shè)計(jì) 26 margin:0 auto。 } .two{ position:absolute。 padding:0。 background:url( D:/My Documents/My Pictures/) epeatx。 display:block。 交通運(yùn)輸學(xué)院課程設(shè)計(jì) 27 borderleft:2px solid FFFFFF。 color:FF33FF。 } a:hover, a:focus, a:active, .selected, .selected a:link, .selected a:hover, .selected a:focus, .selected a:active{ backgroundcolor:6666FF。 height:200px。 } .secondary .row2 img { float:right。 } .left{ float:left。 borderstyle: solid。 padding:5px。 BR 陳老師，上海市干部培訓(xùn)中心特聘主講教師 …… 都受益匪淺 …… /p /div div class=row1 IMG SRC=D:/My Documents/My Pictures/u=143amp。 padding:0。 backgroundimage:url D:/MyDocuments/MyPictures/)。 backgroundimage:url (D:/My Documents/My Pictures/)。 float:left。 padding:80px 80px