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联合显示,控 ...
随机推荐
- Java时间格式化年-月-日-时间
Date d = new Date(); System.out.println(d); //Sat Mar 16 20:58:56 CST 2019 System.out.println(d.toLo ...
- UVALive 3942 字典树+dp
其实主要是想学一下字典树的写法,但这个题目又涉及到了DP:这个题目要求某些单词组成一个长子串的各种组合总数,数据量大,单纯枚举复杂度高,首先肯定是要把各个单词给建成字典树,但是之后该怎么推一时没想到. ...
- idea使用eclipse风格
说明,只是代码编辑区采用eclipse风格,其他用的是idea的IntelliJ(白色风格) 1.下载文件 2.配置
- MySQL--SHOW ENGINE INNODB STATUS
===================================== -- :: 0x7f305b965700 INNODB MONITOR OUTPUT =================== ...
- zabbix几个配置的关系
- 1. 现代 javascript 用法 简介 及 babel
简介 包含 ECMAScript 基本概念,babel 使用 ,eslint 使用 以及新语法的介绍 和使用经验 ECMAScript 概念 ECMASctipt 是一种由 Ecma (前身为欧洲计算 ...
- 每天一杯C_Visual Studio各个版本的区别和总结
细致区别如上图所示 企业版点满图中技能树,能够提供点对点的解决方案,充分满足正规企业的要求. PS:技能最多,肯定也就价格最贵 专业版中提供的专业开发者工具.服务和订阅就成了最佳选择. PS:技能多, ...
- Docker部署freeswitch
1. clone配置文件到本地服务器 git clone https://github.com/BetterVoice/freeswitch-container.git 相关Dockerfile如下: ...
- 12 Spring Data JPA：orm思想和hibernate以及jpa的概述和jpa的基本操作
spring data jpa day1:orm思想和hibernate以及jpa的概述和jpa的基本操作 day2:springdatajpa的运行原理以及基本操作 day3:多表操作,复杂查询 d ...
- Ubuntu---不能打开 exfat 文件系统格式的 U盘解决方法
出现问题:今天把 U 盘插入 Ubuntu 系统的电脑中,打开 U 盘发现弹出 系统格式不支持 的提醒,无法进入 U 盘进行操作. 环境: Ubuntu18.04 TSL; 格式化为 exfat 文件 ...