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联合显示,控 ...
随机推荐
- hdu 3483 矩阵乘法
这个题目上周对抗赛题目,搞了我好久 对数学这种不是很敏感 其实都不是自己想出来的,看其他的资料和博客的推导 还是有点难度的,反正我是推不出来 通过二项式定理的化简 有两个博客写得比较好 http:// ...
- pycharm使用常见设置
字体修改: file——setting——Editor——font(快捷键:ctrl+alt+s) 修改项目编译器:a,b方法二选一 a.ctrl+alt+s,调出设置窗口——选中想要换的版本即可,如 ...
- Cf水题B - Combination
地址: https://vjudge.net/problem/27861/origin Ilya plays a card game by the following rules. A player ...
- JAVE官方文档
官网地址:http://www.sauronsoftware.it/projects/jave/manual.php JAVE manual Installation and requirements ...
- STM32F407读编码器没上拉电阻遇见的问题
在调试之前由于本科阶段参加飞思卡尔智能汽车的竞赛,一直在使用与竞赛相关的单片机和编码器,后来由于工程的需要开始使用STM32的板子,在调试编码器的时候遇见了,使用了STM32的官方标准库中的定时器正交 ...
- gradle配置多个代码仓库repositories
repositories { mavenCentral() maven { url "https://jitpack.io" } maven { url "http:// ...
- 1. 现代 javascript 用法 简介 及 babel
简介 包含 ECMAScript 基本概念,babel 使用 ,eslint 使用 以及新语法的介绍 和使用经验 ECMAScript 概念 ECMASctipt 是一种由 Ecma (前身为欧洲计算 ...
- POJ 1201 Intervals【差分约束】
传送门:http://poj.org/problem?id=1201 题意: 有n个如下形式的条件:,表示在区间[, ]内至少要选择个整数点.问你满足以上所有条件,最少需要选多少个点? 思路:第一道差 ...
- python学习笔记-字符串的拼接
1.百分号方式拼接 %[(name)][flags][width].[precision]typecode (name) 可选,用于选择指定的key flags 可选,可供 ...
- request请求生命周期
request请求生命周期 一.request请求分析 1.1. request数据请求 # views.py from rest_framework.views import APIView fro ...