源代码
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="Untitled-沃顿商学.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="dd"> <div id="menu" class="container"> <ul> <li><a href=#>PENN</a></li> <li><a href=#>WHARTON HOME</a></li> <li class="drop"><a href=#>CAMPUSES</a><img src="images/metaNav_arrow.gif"></a></li> <li><a href=#>DIRECTORIES</a></li> <li><a href=#>NEWS</a></li> <li class="drop"><a href=#>QUICK LINKS<img src="images/metaNav_arrow.gif"></a></li> </ul> </div> <div id="head" class="container"> <div id="logo"> <div id="divsearch"> <form> <input id="search" type="text"><input id="btn" type="button"> </form> </div> <img src="images/header_logo.gif"> </div> <div id="nav"> <ul> <li>CORPPORAATIONS</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 id="mba" class="fulltimemba"> <h1> MBA</h1> <div class="mbaa">FULL-TIME</div> <div class="mbaa">FOR EXECUTIVES</div> </div> <div class="fulltime">DOCTORAL</div> <div class="fulltime">EXECUTIVE EDUCATION</div> <div class="fulltime">ALUMNI NETWWORK</div> </div> </div> <div style="clear:both"></div> <div id="mywharton"> <div class="headline">#My Wharton</div> <ul> <li class="one"> <img src="images/graber_emmy_325.jpg"> <div class="sound">Creating a start-up while at Wharton is almost risk-free. They give you time and support.” Jim Chabas, WG’13</div> </li> <li class="one"> <img src="images/Kim_Matthew_325.jpg"> <div class="sound">Creating a start-up while at Wharton is almost risk-free. They give you time and support.” Jim Chabas, WG’13</div> </li> <li class="two"> <img src="images/Chiam_Tat-Seng_325.jpg"> <div class="sound">Creating a start-up while at Wharton is almost risk-free. They give you time and support.” Jim Chabas, WG’13</div> </li> </ul> </div> </div> </div> </body> </html>
css表
@charset "utf-8"; /* CSS Document */ *{margin:0px;padding:0px;} body{ background:url(images/body_bg.jpg); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px;} #dd{width:950px; margin:auto; } .container { /*border:1px solid red;*/ width:100%; float:left; } ul {list-style-type:none;} /************设计最上面的区域的样式******************/ #menu{ background:url(images/metaNav_bg.jpg); float:left; } #menu ul { float:right; } #menu ul li { float:right; color:white; font-weight:bold; padding:1px 10px 1px 10px;} #menu li.drop {background-color:#999;} #menu ul li a{color:#FFF; text-decoration:none; } /******************/ #head { background:url(images/header_bg.jpg); float:left; } #logo img { margin:15px 0px 17px 25px;} #divsearch { float:right; margin:25px 50px 0px 0px; } #search{ width:200px; border:none; padding:3px 5px 3px 5px; } #btn{width:20px; height:20px; border:none; margin:0px; background:url(images/searchArrow.gif); position:relative; top:5px; background-position:center;} #nav { background:url(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 {height:545px; width:100%; background:url(images/qqqqqqqqqq.jpg); float:left; } #whartonmenu { float:right; margin-top:8%; margin-right:5%; width:235px; } #whartonmenu .fulltime { padding:5px 5px 5px 5px; background-color:#244889; text-align:center; margin-bottom:5px; font-size:18px; border:2px solid #666; color:white; } #mba {background:url(images/grad-mba.png); } #whartonmenu .fulltimemba { padding:5px 5px 5px 5px; color:white; text-align:center; margin-bottom:5px; font-size:18px; } .mbaa {padding:5px 5px 5px 5px; background-color:#244889; text-align:center; margin-bottom:20px; font-size:18px; border:2px solid #666; color:white; } #mywharton .headline { font-size:28px; color:#999; padding-top:60px; text-align:center; } #mywharton ul {float:left; width:100%; } #mywharton ul li {float:left; position:relative; width:300px; } #mywharton ul li img { width:300px;} #mywharton ul li.one {margin-right:25px;} #mywharton ul li.two {float:right;} #mywharton ul li div.sound {width:280px; color:white; background:url(images/grad-mba.png); position:absolute; bottom:0px; padding:10px;}
效果
