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>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-----样式表案例（沃顿商学院）之高级山寨版的更多相关文章

DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况通过使用 H ...
深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS样式表
CSS样式及属性样式标的基本概念样式表的分类 1.内联样式表和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
HTML基础（三）——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法一.样式表 (一)样式表的分类 1.内联样式表和HTML联合显示,控制精确, ...
一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
2016年10月27日--css样式表
CSS样式表样式表分类 1.内联样式表和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
CSS样式表选择器
1.内联样式表和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
HTML静态网页 css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法一.样式表 (一)样式表的分类 1.内联样式表和HTML联合显示,控 ...

随机推荐

Linux 常用命令全拼
pwd: print work directory 打印当前目录显示出当前工作目录的绝对路径 ps: process status(进程状态,类似于windows的任务管理器) 常用参数:-auxf ...
DDL&DML
SQL语言的DDL和DML DDL:数据定义语言它是用来定义管理数据对象(数据库和数据表)的. create(创建),alter(修改),drop(删除) 一.创建数据库create datebas ...
如何修改Jquery Mobile 设置默认选项
以下的默认配置可以通过$.mobile对象重新配置自定义命名空间s (字符, 默认: ""): 在jQuery Mobile中,甚至可以自定义象HTML5中的data-attrib ...
java -jar 和 java -cp 的区别
https://blog.csdn.net/weixin_38653290/article/details/84647019 1.pom中build指定mainClass 但是 META-INF\MA ...
01 语言基础+高级：1-3 常用API第一部分_day08【String类、static、Arrays类、Math类】
day08[String类.static.Arrays类.Math类] String类static关键字Arrays类Math类教学目标能够使用String类的构造方法创建字符串对象能够明确Stri ...
java 中static关键字注意事项
1.内存中存放的位置:(static修饰的方法和属性保存在方法区中,但是方法区也是堆的一部分) 内存的分区 2.什么样的属性可以定义为静态数据例如: class person{ public Str ...
关于Spring的使用总结
简介 Spring框架是一种轻量级的.一站式的企业级开发解决方案框架(framework):是一组设计思想.规范.API的精心组合,专门用来解决某一层次或领域的问题轻量级(lightweight) ...
HDU - 4578 线段树+三重操作
这道题自己写了很久,还是没写出来,也看了很多题解,感觉多数还是看的迷迷糊糊,最后面看到一篇大佬的才感觉恍然大悟. 先上一篇大佬的题解:https://blog.csdn.net/aqa20372995 ...
goweb-web服务
Web服务 Web服务可以让你在HTTP协议的基础上通过XML或者JSON来交换信息.如果你想知道上海的天气预报.中国石油的股价或者淘宝商家的一个商品信息,你可以编写一段简短的代码,通过抓取这些信息然 ...
机器学习总结（参考源码ml.hpp）
依据机器学习算法如何学习数据可分为3类: 有监督学习:从有标签的数据学习,得到模型参数,对测试数据正确分类: 无监督学习:没有标签,计算机自己寻找输入数据可能的模型: 强化学习(reinforceme ...

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

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

随机推荐

热门专题