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

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>[email protected]</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、效果图

时间： 2024-12-14 10:12:31

CSS-----样式表案例（沃顿商学院）之高级山寨版的相关文章

1月24日 样式表案例

沃顿商学院(仿) 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-eq

4.1 什么是CSS样式表

上一章的课程里,我们学习了表单以及表单中的各种元素,常用的表单元素有:文本框( text).密码框(password).单选按钮(radio).复选框(checkbox).列表框(<select><option>).按钮(button.submit和reset).多行文本框(<textarea>).另外,还学习了框架,包括框架的基本结构.如何创建多个复杂的窗口.框架窗口之间的链接等. 从本章开始,我们将学习CSS(Cascading Style Sheet,层叠式样式表

CSS LINT,优化你的CSS样式表

CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题,使用方法很简单,只需要把 CSS 内容复制贴上,最后按下 LINT!按钮就可以检查.底下有一些设定项目可以调整检测的项目和规则,预设是全部勾取,如果没有特别的需求可以不用更动,完成之后 CSS Lint 会告诉使用者该样式表哪些部分发生问题,只要依照网站的指示修改就可以得到比较没有问题的 CSS 样式表啰! 网站名称:CSS Lint 网站链结:http://csslint.net/ 使用方法很简单,进入 CSS Lin

CSS基础概念 第一节 引用CSS样式表

引用CSS样式有四种方法,它们包含了:文档内部样式的引用.文档外部样式表的引用. 1.LINK 元素 LINK元素在HTML和XHTML中创建,用来引用外部样式表到当前文档中 通用的语法 <link rel="..." type="text/css" href="..." media="..."> 属性 rel="..." 此属性描述当前文档与链接文件的关系.对于外部样式表,有两种可能的值:st

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML基础（三）——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

css样式表分类

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="index.css"><!--用link标签引入的是外部样式表--> 7 8 9 &

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法: