HTML-CSS设计----------沃顿商学院（高级山寨版）
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
{
width:100%;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
background-repeat:repeat-x;
background-image:url(../Images/body_bg.jpg);
}
#dd
{
height:auto;
width:993px;
margin:auto;
text-align:center;
}
ul
{
list-style:none;
}
a
{
text-decoration:none;
color:#fff;
}
/*************************/
/*********最上面标题部分**********/
#head
{
width: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
{
width: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
{
width:23px;
height:23px;
margin:0px;
top:6px;
right:5px;
position:relative;
}
#logo #b2 .b2name1
{
padding:3px 5px 3px 5px;
border:none;
width:200px;
}
/**********logo下部***************/
#menu
{
float:left;
width: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
{
width: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%;
width:80%;
position:relative;
}
/***********设置一放上就变色的超链接**************/
#content a:hover
{
width:100%;
height:29px;
background:#fff;
border:1px solid #333;
color:#666;
}
/*************************/
/**********MyWharton***************/
#content #d
{
width:100%;
height:383px;
float:left;
}
#content #d a:hover
{
background:none;
}
#content #d1
{
width:100%;
font-family:Arial, Helvetica, sans-serif;
color:#777777;
font-size:36px;
font-weight:normal;
margin-top:50px;
float:left;
}
#content #d2 .da1 a
{
width: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
{
width: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
{
width:325px;
margin:10px 0px 5px 5px;
float:left;
position:relative;
}
#content #d2 .d2name2
{
width:325px;
margin:10px 0px 5px 4px;
float:left;
position:relative;
}
#content #d2 .d2name3
{
width:325px;
margin:10px 5px 5px 0px;
float:right;
position:relative;
}
/*********文字****************/
#content #d3
{
width:305px;
color:#F6F6F6;
position:absolute;
padding:10px;
bottom:0;
}
#content #d3
{
width:305px;
background-color:#000;
opacity:0.5;
}
/***********Fuel Your Next Idea**************/
#content #e
{
width:100%;
height:309px;
float:left;
}
#content #e1
{
width:100%;
font-family:Arial, Helvetica, sans-serif;
color:#484848;
font-size:36px;
font-weight:normal;
float:left;
margin-top:100px;
}
#content #e2
{
padding:0;
width: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
{
width:846px;
height:249px;
float:left;
position:absolute;
left:74px;
}
#content #e3 li h3
{
font-weight:bold;
}
#content #e2 .ea1 a
{
width: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
{
width: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;
width:184px;
margin:10px;
}
/***********LOGO**************/
#content #f
{
width:100%;
height:100px;
float:left;
margin-top:150px;
}
#content #f1
{
width:447px;
height:47px;
float:left;
margin-left:273px;
}
#content #f1 .f2name1
{
float:left;
margin:1px 15px 1px 0px;
}
/*************************/
/***********PENN**************/
#g
{
width:100%;
height:250px;
float:left;
}
#g1
{
width:100%;
height:250px;
background:url(../Images/footer-bg.jpg) repeat-x;
float:left;
}
#g2
{
width: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、效果图
原文：http://www.cnblogs.com/dawasai/p/4248952.html