沃顿商学院（仿）
1、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>沃顿商学院</title> <link href="CSS/Whaeton.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="dd"> <div id="head" class="name"> <ul id="a1"> <li><a href="#">PENN</a></li> <li><a href="#">WHARTON HOME</a></li> <li class="aname1"><a href="#">CAMPUSES</a><img src="Images/metaNav_arrow.gif"></li> <li><a href="#">DIRECTORIES</a></li> <li><a href="#">NEWS</a></li> <li class="aname1"><a href="#">QUICKLINKS</a><img src="Images/metaNav_arrow.gif"></li> </ul> </div> <div id="middle" class="name"> <div id="logo"> <div id="b1"><img src="Images/header_logo.gif"> </div> <div id="b2"> <form> <input type="text" class="b2name1" /> <input type="image" class="b2name2" src="Images/searchArrow.gif";/> </form> </div> <div id="menu"> <ul> <li></li> <li><a href="http://recruiters-corp.wharton.upenn.edu/">Recruiters and Corporations</a></li> <li><a href="http://recruiters-corp.wharton.upenn.edu/">Aiumni </a></li> <li><a href="">About Wharton</a></li> <li><a href="">Facuilty and Research </a></li> <li><a href="">Academics</a></li> </ul> </div> </div> </div> <div id="content" class="name"> <div id="c"> <div id="c1"> <ul id="c2"> <li class="c2name1"><a href="">UNDERGRADUATE </a></li> <li class="c2name2"> <h1>MBA <ul id="c3"> <li class="c2name1"><a href=""> FULL-TIME</a></li> <li class="c2name1"><a href=""> FOR EXECUTIVES</a></li> </ul> </h1> </li> <li class="c2name1"><a href="">DOCTORAL</a></li> <li class="c2name1"><a href=""> EXECUTIVE EDUCATION</a></li> <li class="c2name1"><a href="">ALUMNI NETWORK </a></li> </ul> </div> </div> <div id="d"> <div id="d1">#MyWharton</div> <ul id="d2"> <li class="d2name1"><img src="Images/dehnad_kristal_325.jpg"> <div class="da1"><a href=""></a></div> <div id="d3"> “The EMBA program is the launch pad to the next phase of my career at my company.” Edmund Reese, WG’14 </div> </li> <li class="d2name2"><img src="Images/Daschle_Amy_325.jpg"> <div id="d3"> “Access to companies and executives around the world is completely unique to Wharton.” Gwendolyn McDay, WG’13 </div> </li> <li class="d2name3"><img src="Images/Grasso_Katlyn_325.jpg"> <div class="da2"><a href=""></a></div> <div id="d3"> “I used the skills I learned at Wharton to develop a leadership camp for 30 high school girls.” Katlyn Grasso, W’15 </div> </li> </ul> </div> <div style="clear:both"> </div> <div id="e"> <div id="e1">Fuel Your Next Idea</div> <div id="e2"> <ul> <li class="ea1"><a href="#"></a> </li> <li class="ea2"><a href="#"></a> </li> </ul> <ul id="e3"> <li class="e2name1"><img src="Images/knowledge-at-wharton_story.jpg"> <div id="e4"> <h3>Social Impact</h3> The hub for social impact activities, information and resources at Wharton, in the community, and in the world </div> </li> <li class="e2name1"><img src="Images/coursera_story.jpg"> <div id="e4"> <h3>Knowledge@Wharton</h3> Sharing the intellectual capital of the Wharton School </div> </li> <li class="e2name1"><img src="Images/Social-impact_story.jpg"> <div id="e4"> <h3>Coursera</h3> Open Learning to engage a broader community of learners </div> </li> <li class="e2name2"><img src="Images/Global-Initiative_story.jpg"> <div id="e4"> <h3>Business Radio</h3> Broadcasting business and management knowledge for your career success </div> </li> </ul> </div> </div> <div id="f"> <div id="f1"> <ul id="f2"> <li class="f2name1"> <img src="Images/HP-twitter.png"></li> <li class="f2name1"> <img src="Images/HP-linkedin.png"></li> <li class="f2name1"> <img src="Images/HP-facebook.png"></li> <li class="f2name1"> <img src="Images/HP-Instagram.png"></li> <li class="f2name1"> <img src="Images/google-plus.png"></li> <li class="f2name1"> <img src="Images/HP-Youtube.png"></li> <li class="f2name1"> <img src="Images/HP-flicker.png"></li> </ul> </div> </div> </div> <div id="g"> <div id="g1"> <div id="g2"> </div> <div id="g3"> © 2014 The Wharton School, University of Pennsylvania | Site Index | Privacy Statement </div> </div> </div> </div> </body> </html>
2、CSS样式表
@charset "utf-8"; /* CSS Document */ /*********全局设置**********/ * { margin:0px; padding:0px; } body { 100%; margin:auto; font-family:Arial, Helvetica, sans-serif; background-repeat:repeat-x; background-image:url(../Images/body_bg.jpg); } #dd { height:auto; 993px; margin:auto; text-align:center; } ul { list-style:none; } a { text-decoration:none; color:#fff; } /*************************/ /*********最上面标题部分**********/ #head { 100%; background-image:url(../Images/metaNav_bg.jpg); float:right; } #a1 { list-style:none; float:right; } #a1 li { font-size:14px; color:#FFF; padding:5px 15px 5px 15px; float:right; } #a1 li.aname1 { background-color:#3D3D3D; margin:auto; margin:0 10px 0 10px; } #a1 li.aname1 img { margin-left:10px; } /***********标题结束**************/ /***********LOGO部分**************/ /***********上部**************/ #logo { 100%; height:116px; background-image:url(../Images/header_bg.jpg); float:left; position:relative; } #logo #b1 { margin:25px 20px 20px 20px; float:left; } #logo #b2 { margin:30px 30px 20px 20px; float:right; } #logo #b2 .b2name2 { 23px; height:23px; margin:0px; top:6px; right:5px; position:relative; } #logo #b2 .b2name1 { padding:3px 5px 3px 5px; border:none; 200px; } /**********logo下部***************/ #menu { float:left; 100%; position:absolute; bottom:1px; right:0; background:url(../Images/mainNav_bg.jpg) no-repeat top right; } #menu li { font-size:13px; color:#FFF; border-right:1px solid #224889; border-left:1px solid #7b92bb; float:right; padding:7px 11px 5px 13px; } /***********设置一放上就变色的超链接**************/ #menu a:hover { padding:7px 11px 5px 13px; background-color:#981e32; } /***********LOGO结束**************/ /************最大的一副图*************/ #content #c { 100%; height:545px; background-image:url(../Images/hp_splash4.jpg); float:left; } #content #c2 { margin-top:40px; margin-right:30px; float:right; } /***********li的设置**************/ #content #c2 .c2name1 { font-size:16px; color:#FFF; margin:10px 0 10px 0; padding:15px 10px 15px 10px; background-color:#003178; } /**********MBA里面的内容***************/ #c2 h1 { color:#FFF; border:1px solid #cdcdcd; font-weight:normal; font-size:20px; padding-top:10px; background-image:url(../Images/grad-mba.png); } #c3 { position:relative; } #c3 li { left:5%; 80%; position:relative; } /***********设置一放上就变色的超链接**************/ #content a:hover { 100%; height:29px; background:#fff; border:1px solid #333; color:#666; } /*************************/ /**********MyWharton***************/ #content #d { 100%; height:383px; float:left; } #content #d a:hover { background:none; } #content #d1 { 100%; font-family:Arial, Helvetica, sans-serif; color:#777777; font-size:36px; font-weight:normal; margin-top:50px; float:left; } #content #d2 .da1 a { 56px; height:56px; border:none; background-image:url(../Images/circle_arrow_pre.png); position:absolute; bottom:120px; left:20px; float:left; } #content #d2 .da2 a { 56px; height:56px; border:none; background-image:url(../Images/circle_arrow_next.png); position:absolute; bottom:120px; right:20px; float:right; } /***********3张照片**************/ #content #d2 .d2name1 { 325px; margin:10px 0px 5px 5px; float:left; position:relative; } #content #d2 .d2name2 { 325px; margin:10px 0px 5px 4px; float:left; position:relative; } #content #d2 .d2name3 { 325px; margin:10px 5px 5px 0px; float:right; position:relative; } /*********文字****************/ #content #d3 { 305px; color:#F6F6F6; position:absolute; padding:10px; bottom:0; } #content #d3 { 305px; background-color:#000; opacity:0.5; } /***********Fuel Your Next Idea**************/ #content #e { 100%; height:309px; float:left; } #content #e1 { 100%; font-family:Arial, Helvetica, sans-serif; color:#484848; font-size:36px; font-weight:normal; float:left; margin-top:100px; } #content #e2 { padding:0; 100%; height:301px; float:left; position:relative; } #content #e2 .e2name1 { margin-right:10px; float:left; } #content #e2 .e2name2 { margin-right:0px; float:left; } #content #e3 { 846px; height:249px; float:left; position:absolute; left:74px; } #content #e3 li h3 { font-weight:bold; } #content #e2 .ea1 a { 43px; height:43px; border:none; background-image:url(../Images/circle_arrow_pre-gray.png); margin:50px 0 0 20px; float:left; } #content #e2 .ea2 a { 43px; height:43px; border:none; background-image:url(../Images/circle_arrow_next-g.png); margin:50px 20px 0 0; float:right; } #content #e4 { font-size:16px; color:#484848; 184px; margin:10px; } /***********LOGO**************/ #content #f { 100%; height:100px; float:left; margin-top:150px; } #content #f1 { 447px; height:47px; float:left; margin-left:273px; } #content #f1 .f2name1 { float:left; margin:1px 15px 1px 0px; } /*************************/ /***********PENN**************/ #g { 100%; height:250px; float:left; } #g1 { 100%; height:250px; background:url(../Images/footer-bg.jpg) repeat-x; float:left; } #g2 { 213px; height:100px; margin:100px 0px 0px 50px; background-image:url(../Images/logo.png); float:left; } #g3 { font-size:12px; color:#FFF; float:left; margin-top:150px; margin-left:50px; } /*************************/ /*************************/
3、效果图
