源代码：
<head> 右键CSS样式--附加样式表 </head> <body> <div id="dd"> <div id="menu" class="container"> <ul> <li>PENN</li> <li>WHARTON HOME</li> <li class="drop">CAMPUSES</li> <li>DIRECTORIES</li> <li>NEWS</li> <li class="drop">QUICKLINKS</li> </ul> </div> <div id="head" class="container"> <div id="logo"> <div id="divsearch"> <form> <input type="text" id="txtSearch" /> <input type="button" value="" id="btnSearch" /> </form> </div> <img src="../../../../学习1/0121沃顿网页布局/Images/header_logo.gif" /> </div> <div id="nav"> <ul> <li>Recruiters and Corporations</li> <li>Alumin</li> <li>About Wharton</li> <li>Faculty And Research</li> <li>Academics</li> </ul> </div> </div> <div id="main" class="container"> <div id="slider"> <div id="whartonmenu"> <div class="fulltime">UNDERGRADUATE</div> <div class="fulltimeMBA" id="MBA">MBA <div class="MBAFullTIME">FULL-TIME</div> <div class="MBAFullTIME">FOR EXECUTIVES</div> </div> <div class="fulltime">DOCTORAL</div> <div class="fulltime">EXECUTIVE EDUCATION</div> <div class="fulltime">ALUMNI NETWORK</div> </div> </div> <div style="clear:both;"></div> <div id="MyWharton"> <div class="headline"> #MyWharton </div> <ul> <li class="one"> <img src="../../../../学习1/0121沃顿网页布局/Images/Zhu_Jane_325.jpg" /> <div class="sound"> “We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15 </div> </li> <li class="one"> <img src="../../../../学习1/0121沃顿网页布局/Images/dehnad_kristal_325.jpg" /> <div class="sound"> “We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15 </div> </li> <li class="two"> <img src="../../../../学习1/0121沃顿网页布局/Images/graber_emmy_325.jpg" /> <div class="sound"> “We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15 </div> </li> </ul> </div> </div> </div> </div> <div></div> <div></div> </body> </html>
CSS:
* { margin:0px; padding:0px; } body { background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/body_bg.jpg); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:14px; } #dd { width:950px; margin:auto; } .container { /*border:1px solid red;*/ float:left; width:100%; } ul { list-style-type:none; } /***********设计最上面区域的样式************/ #menu { background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/metaNav_bg.jpg); } #menu ul { float:right; } #menu ul li { float:right; color:white; font-weight:bold; padding:5px 10px 5px 10px; } /***************************/ #menu li.drop { background-color:gray; } /************head和logo部份的样式************/ #head { background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/header_bg.jpg); } #logo img { margin:15px 0px 17px 25px; } #divsearch { float:right; margin:26px 10px 0px 0px; } #txtSearch { width:200px; border:none; padding:3px 5px 3px 5px; } #btnSearch { width:22px; height:22px; border:none; margin:0px; background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/searchArrow.gif); background-position:center; position:relative; top:6px; } #nav { background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/mainNav_bg.jpg); background-repeat:no-repeat; background-position:right top; float:left; width:100%; } #nav ul { float:right; width:100%; margin-right:50px; } #nav ul li { float:right; padding:5px 10px 5px 10px; color:white; border-right:1px solid #224889; } /*************slider***************/ #slider { height:545px; width:100%; float:left; background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/hp_splash4.jpg); background-repeat:no-repeat; } #whartonmenu { float:right; width:235px; margin:30px 60px; } #whartonmenu .fulltime { padding:20px 5px 20px 5px; background-color:#224889; margin-bottom:15px; color:white; font-size:18px; text-align:center; } #whartonmenu .fulltimeMBA { padding:20px 5px 20px 5px; margin-bottom:15px; color:white; font-size:18px; text-align:center; } #MBA { background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/grad-mba.png); } #MBA .MBAFullTIME { margin:10px; background-color:#224889; padding:10px 0px 10px 0px; } /************My Wharton****************/ #MyWharton { margin-top:20px; } #MyWharton .headline { text-align:center; font-size:40px; color:#aaaaaa; font-weight:normal; } #MyWharton ul { float:left; width:100%; } #MyWharton ul li { float:left; width:300px; } #MyWharton ul li.one { margin-right:25px; } #MyWharton ul li.two { float:right; } #MyWharton ul li img { width:300px; height:300px; } #MyWharton ul li div.sound { background:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/grad-mba.png); color:white; width:100%; padding:10px; width:280px; position:relative; bottom:68px; }