《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 < div class=" Copy Righ">河南中医学院互联网应用技术研究所版权所有<div> <div style="clear: both; " ></div> CSS主要代码 LogoNavi background: url(/ images/LogoBanner Bg png) repeat-X; width: 980px Logo I float: left; margin-top: 13px; margin-left: 46px; 1 导航” Nav( margin-top: 10px; width: 475px; text-align: left; float: right; padding-top: 12px;) Nav ul li i position: relative; float: left; width: 68px; height: 28px; line-height: 28px; text-align: center; 1 Nav child[ background: url(/ images/Nav Child_bg png )no-repeat 60px 12px;] Nav child_short( background: url( /images/Nav Child_bg. png)no-repeat 50px 12px; 1 Nav ul li: hover i background: url( /images/NavBg. png) no-repeat; 1 Nav ul li: hover a( color #FFF Nav ul li ul i display: none; 1 Nav ul li: hover ul i display: block; 1 Nav ul ulI position: absolute: Z- index: 5: top: 27px; left: Opx; width: 120px background: #333: 1 Nav ul li Nav1 ul i width: 100px; text-align: center: 1 Nav ul li ul li float: left; width: 100%; height: 28px; line- height: 28px; 1 Nav ul li ul li a( color: #FFF: 1 Nav ul li ul li hover background: none; text-decoration: underline; 1 BottomContent I width: 980px; padding-bottom: 80px; border: 4px #707070 solid ackground: #FFF url(/images/ContentBg png) repeat-X; margin-top: 14px; JS主要代码: <script type="text/javascript"src="js/jquery js"><script> Sget(data/news.xml, function(xmlIData) ar news Title=S(xmlData) find("Contents").find"Title"). texto) var news Author=S(xmlData)find(Contents").find("Author"). texto) S#new ( time,). html(S(xmlData) find("Contents"). find("Time").text o) S#news_cont p). html(S(xmlData) find"Contents").find(News"). textO) ) 6.get( var MBLength=S(xmlData) find("Contents"). find("MicroBlog"). length; MBStr r(var i=0; i< MBLength; i++M MBStr +=<div class="TextItem"> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第5页《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 5 页 </div> </div> <div style="clear:both;"></div> </div> <div class="CopyRight">河南中医学院互联网应用技术研究所版权所有</div> <div style="clear:both;"></div> </div> </body> CSS 主要代码： /*Logo*/ .LogoNav { background: url(../images/LogoBannerBg.png) repeat-x; width: 980px; height: 73px; } .Logo { float: left; margin-top: 13px; margin-left: 46px; } /*导航*/ .Nav { margin-top: 10px; width: 475px; text-align: left; float: right; padding-top: 12px; } .Nav ul li { position: relative; float: left; width: 68px; height: 28px; line-height: 28px; text-align: center; } .NavChild { background: url(../images/NavChild_bg.png) no-repeat 60px 12px; } .NavChild_Short { background: url(../images/NavChild_bg.png) no-repeat 50px 12px; } .Nav ul li:hover { background: url(../images/NavBg.png) no-repeat; } .Nav ul li:hover a { color: #FFF; } .Nav ul li ul { display: none; } .Nav ul li:hover ul { display: block; } .Nav ul ul { position: absolute; z-index: 5; top: 27px; left: 0px; width: 120px; background: #333; } .Nav ul li.Nav1 ul { width: 100px; text-align: center; } .Nav ul li ul li { float: left; width: 100%; height: 28px; line-height: 28px; } .Nav ul li ul li a { color: #FFF; } .Nav ul li ul li:hover { background: none; text-decoration: underline; } .BottomContent { width: 980px; padding-bottom: 80px; border: 4px #707070 solid; background: #FFF url(../images/ContentBg.png) repeat-x; margin-top: 14px; } JS 主要代码： <script type="text/javascript" src="js/jquery.js"></script> <script> $(function(){ $.get('data/news.xml', function(xmlData){ var newsTitle=$(xmlData).find("Contents").find("Title").text(); $('#news_title a').html(newsTitle); var newsAuthor=$(xmlData).find("Contents").find("Author").text(); $('#news_author').html(newsAuthor); $('#news_time').html($(xmlData).find("Contents").find("Time").text()); $('#news_cont p').html($(xmlData).find("Contents").find("News").text()); }); $.get('data/microblog.xml', function(xmlData){ var MBLength=$(xmlData).find("Contents").find("MicroBlog").length;MBStr = ''; for(var i = 0; i < MBLength; i++){ MBStr +='<div class="TextItem">';