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联合显示,控 ...
随机推荐
- OSS 图片处理流程
1.步骤一 2.步骤二 3.步骤三 4.步骤四 5.步骤五(步骤4完成会自动添加cname用户解析,不需要自己去加,只需要点击进来看下是否添加成功即可) 通过以上步骤就可以实现了图片服务的配置
- 代码杂谈-or符号
看到别人的代码里用了 or, 有点巧用. 记录一下. def func(a,b, context=None): # .... ctx = context or global_context() # . ...
- 吴裕雄--天生自然MySQL学习笔记：MySQL DELETE 语句
可以使用 SQL 的 DELETE FROM 命令来删除 MySQL 数据表中的记录. 可以在 mysql> 命令提示符或 PHP 脚本中执行该命令. 语法 以下是 SQL DELETE 语句从 ...
- ZJNU 2356 - 六学家
“选出来三个六学家,他们的编号是i,j,k,满足i<j<k,且a[k]=a[j]-a[i]” 所以输入第i个数a[i]时,直接让答案加上前i-1个数中能构成差值为a[i]的数量即可 然后让 ...
- iview checkbox demo（文档改写）
<template> <div class="content"> <div style="border-bottom: 1px solid ...
- 量化交易alpha、beta、shape等基本概念梳理
1.期货型基金(CTA)的 Alpha 和 Beta 是指什么? https://zhuanlan.zhihu.com/p/20700337 1980S ...
- tomcat配置配置文件和war包进行分离
应用部署 war包.配置文件分离 部署主机路径规划以及tomcat中间件改造 1.新建存放war包路径 /appsystems/apps 将war包放置其中 2.新建存放配置文件路径 /apps ...
- 2019牛客暑期多校训练营（第七场）A.String【最小表示法】
传送门:https://ac.nowcoder.com/acm/contest/887/A 题意:大意就是给你一个只含有0和1的字符串,找出一种分割方法,使得每个分割出的字符串都是在该字符串自循环节中 ...
- Python列出文件夹中的文件
几乎所有的关于操作系统的内容可以在python 官方文档中找到:https://docs.python.org/3/library/os.html#module-os 其中os.path被单独列出:h ...
- IntelliJ IDEA2018.2.7安装和破解教程
一.安装 IntelliJ IDEA2018.2.7 IDEA官网下载地址链接:https://www.jetbrains.com/idea/download/previous.html 1.进入网站 ...