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联合显示,控 ...
随机推荐
- List、Set和Map详解及其区别和他们分别适用的场景
Java中的集合包括三大类 它们是Set(集).List(列表)和Map(映射),它们都处于java.util包中,Set.List和Map都是接口,它们有各自的实现类.Set的实现类主要有HashS ...
- JS高级学习笔记（2）之js多线程
参考大神:Javascript多线程 web worker ---- 6.Web Worker 概述 截图过来: 线程之间的通信 let worker = new Worker(‘js文件路径’) 主 ...
- nodejs（6）express学习
1.简单认识express express::一个快速的网站开发框架,封装了原生的http模块,用起来更方便:API更人性化 特点 基于Node.js平台之上,进一步封装了 http 模块,从而提供了 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： this 关键字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- OpenMP笔记(五)
任务调度主要用于并行的for循环中,当循环中每次迭代的计算量不相等时,如果简单地给各个线程分配相同次数的迭代的话,会造成各个线程计算负载不均衡,这会使得有些线程先执行完,有些后执行完,造成某些CPU核 ...
- sudo apt-get update数字签名错误解决方法
lzb@lzb:~/projects/curl-master$ sudo apt-get update 命中: http://mirrors.aliyun.com/ubuntu xenial InRe ...
- 吴裕雄--天生自然 PHP开发学习：函数
<?php function writeName() { echo "Kai Jim Refsnes"; } echo "My name is "; wr ...
- UML-SSD-为什么要画SSD？
需求文本看着过于抽象,采用SSD一目了然. 在设计软件之前,分析人员会关注系统会发生那些事件? 1.基本上,软件系统要对以下3种事件进行响应: 1).来自于参与者(人或计算机)的外部事件 2).时间事 ...
- Python程序中的线程操作(线程池)-concurrent模块
目录 Python程序中的线程操作(线程池)-concurrent模块 一.Python标准模块--concurrent.futures 二.介绍 三.基本方法 四.ProcessPoolExecut ...
- Android studio 3.0安装与配置(看这一篇就够了）
前言 为了完成数据库大作业,并充分利用学过的Java语言,决定开发一个简单完整成熟的安卓手机应用程序.于是下载安装Android Studio集成开发环境,第一次安装最新版本,因为墙的原因安装失败,第 ...