码迷，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）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！