码迷,mamicode.com
首页 > Web开发 > 详细

CSS-----样式表案例(沃顿商学院)之高级山寨版

时间:2015-01-25 22:17:17      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

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、效果图

技术分享

CSS-----样式表案例(沃顿商学院)之高级山寨版

标签:

原文地址:http://www.cnblogs.com/dawasai/p/4248952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!