【導讀】發(fā)現(xiàn)課程學習中的不足和薄弱環(huán)節(jié)，予以補充和加強。綜合運用在課程學習過程。中所學知識，同時為了實現(xiàn)課程設計的規(guī)定成果進行更深入的理論學習和實踐拓展。培養(yǎng)獨立思考和解決問題的能力，探索和創(chuàng)新的能力。工、基本客戶端校驗等目的。如有余力者，可以進一步學習并應用數(shù)據庫技術。計技術，如標簽式導航、圖像翻轉等。在此基礎上盡可能有所創(chuàng)新。工作量方面，要求設計一個網站的主頁和其它至少兩個頁面，要求風格統(tǒng)一。相似部分可適當省略。文檔撰寫須符合統(tǒng)一的格式規(guī)范。本課程設計的所有內容在一周內完成。第1天：復習鞏固原有知識、查閱相關資料、構思出基本設計方案；第2天：搜集素材、應用相關工具設計網頁基本結構。將設計成果寫入報告。[1]AndyBudd.精通CSS：高級Web標準解決方案（第二版）.北京.人民郵電出版社.[2]張亞飛.CSS開發(fā).北京.電子工業(yè)出版社.保持其風格的一致。及腳本的相關知識，對布局進行合理的安排。進而達到最終目的。

　　

【正文】 dy{ background:url( D:/My Documents/My Pictures/)。 } .secondary .row1 img{ float:left。 height:200px。 } .secondary .row1 p{ float:right。 交通運輸學院課程設計 28 height:200px。 float:bottom。 } .secondary .row2 img { float:right。 height:200px。 } .secondary .row2 p{ float:left。 height:200px。 } .left{ float:left。 } p{ fontsize:20px。 color:000000。 textindent:2em。 borderstyle: solid。 borderwidth: 8px 3px 8px 3px。 bordercolor: ddd 676767 5B5B5B ddd。 textalign:left。 padding:5px。 } mybox img{ float:left。 border:3px double dashed CC66FF。 } /style /HEAD BODY 交通運輸學院課程設計 29 同主頁面的頭部，略 …… div class=left id=mybox IMG SRC=D:/My Documents/My Pictures/ WIDTH=260 HEIGHT=600 div class=two id=mybox IMG SRC=D:/My Documents/My Pictures/圖片 WIDTH=100 HEIGHT=440 /div /div div class=secondary id=shadow div class=row1 IMG SRC=D:/My Documents/My Pictures/ WIDTH=220 HEIGHT=210 p B班級簡介： /B2020 年九月，當我們來到蘭州交通大學時，就開始了我們人生中很重要的一段歷程… … 經過我們努力 奮斗最終改變原有的現(xiàn)狀，取得了好成績 ! /p /div div class=row2 IMG SRC=D:/My Documents/My Pictures/ WIDTH=225 HEIGHT=210 p B師資團隊： /B 杜老師 …… 率高達 85％以上。 BR 陳老師，上海市干部培訓中心特聘主講教師 …… 都受益匪淺 …… /p /div div class=row1 IMG SRC=D:/My Documents/My Pictures/u=143amp。fm=52amp。gp= WIDTH=220 HEIGHT=210 p 交通運輸學院課程設計 30 B專業(yè)介紹： /B本專業(yè)培養(yǎng)具備現(xiàn)代管理學理論基礎 …… 用所學知識分析和解決問題的基本能力。 /p /div 截圖如圖 ： 網頁三的源代碼及分析 style *{ margin:0。 padding:0。 } .wrapper { width: 932px。 margin:0 auto。 } .header{ width:932px。 backgroundimage:url D:/MyDocuments/MyPictures/)。 } .content{ width: 932px。 height:600px。 margin:0 auto。 backgroundimage:url (D:/My Documents/My Pictures/)。 } .primary{ width： 60%。 float:right。 } 交通運輸學院課程設計 31 .secondary{ width： 40%。 float:left。 margin:90px 0px 0 60px。 } .primary .primary{ width:70%。 float:left。 padding:80px 80px。 } { liststyle:none。 width:932px。 height:40px。 backgroundimage:url (D:/My Documents/My Pictures/)repeatx。 } li{ float:left。 width:185px。 display:block。 padding:5px。 bordertop:2px solid FFFFFF。 borderright:5px solid 0099FF。 borderbottom:5px solid 0066CC。 borderleft:2px solid FFFFFF。 } a{ display:black。 padding:15px。 textdecoration:none。 交通運輸學院課程設計 32 color:FF33FF。 fontfamily:Lucida Console 。 fontsize:26。 } .secondary ul{ float:left。 } .secondary ul li{ height:40px。 } .secondary ul li a{ float:left。 fontsize:20px。 color:CC00FF。 textdecoration:none。 } .one,.two,.three{ width:380px。 bordertop:3px solid D7FFFF。 borderright:5px solid 330099。 borderbottom:5px solid 330099。 borderleft:3px solid D7FFFF。 } .one img, .two img, .three img{ border:3px dashed FF9900。 margin:5px。 padding:5px。 } /style /HEAD BODY 交通運輸學院課程設計 33 頭部同主頁，略 …… div class=content div class=primary div class=primary div class=one IMG SRC=D:/My Documents/My Pictures/ WIDTH=100 HEIGHT=100 IMG SRC=D:/My Documents/My Pictures/ WIDTH=100 HEIGHT=100 IMG SRC=D:/My Documents/My Pictures/u=1p= WIDTH=100 HEIGHT=100 /div div class=two …… /div div class=three …… /div div class=secondary IMG SRC=D:/My Documents/My Pictures/圖片 WIDTH=150 HEIGHT=60 IMG SRC=D:/My Documents/My Pictures/ WIDTH=150 HEIGHT=80 UL LI a href=IMG border=0 SRC=D:/My Documents/My Pictures/ WIDTH=16 HEIGHT=16 ☆ java 比賽 ~~/a /LI …… /UL 交通運輸學院課程設計 34 …… 截圖如圖 ： 附件 交通運輸學院課程設計 35 圖 圖 交通運輸學院課程設計 36 圖 參考書目 [1] Andy Bud. 精通 CSS：高級 Web標準解決方案（第二版） . 北京 . 人民郵電出版社 . [2] 張亞飛 . CSS開發(fā) . 北京 . 電子工業(yè)出版社