CSS--沃顿商学院网页布局
源代码：
<head>
右键CSS样式--附加样式表
</head> <body>
<div id="dd">
<div id="menu" class="container">
<ul>
<li>PENN</li>
<li>WHARTON HOME</li>
<li class="drop">CAMPUSES</li>
<li>DIRECTORIES</li>
<li>NEWS</li>
<li class="drop">QUICKLINKS</li>
</ul>
</div>
<div id="head" class="container">
<div id="logo">
<div id="divsearch">
<form>
<input type="text" id="txtSearch" />
<input type="button" value="" id="btnSearch" />
</form>
</div>
<img src="../../../../学习1/0121沃顿网页布局/Images/header_logo.gif" />
</div>
<div id="nav">
<ul>
<li>Recruiters and Corporations</li>
<li>Alumin</li>
<li>About Wharton</li>
<li>Faculty And Research</li>
<li>Academics</li>
</ul>
</div>
</div>
<div id="main" class="container">
<div id="slider">
<div id="whartonmenu">
<div class="fulltime">UNDERGRADUATE</div>
<div class="fulltimeMBA" id="MBA">MBA
<div class="MBAFullTIME">FULL-TIME</div>
<div class="MBAFullTIME">FOR EXECUTIVES</div>
</div>
<div class="fulltime">DOCTORAL</div>
<div class="fulltime">EXECUTIVE EDUCATION</div>
<div class="fulltime">ALUMNI NETWORK</div>
</div> </div>
<div style="clear:both;"></div>
<div id="MyWharton">
<div class="headline">
#MyWharton
</div>
<ul>
<li class="one">
<img src="../../../../学习1/0121沃顿网页布局/Images/Zhu_Jane_325.jpg" />
<div class="sound">
“We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15
</div>
</li>
<li class="one">
<img src="../../../../学习1/0121沃顿网页布局/Images/dehnad_kristal_325.jpg" />
<div class="sound">
“We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15
</div>
</li>
<li class="two">
<img src="../../../../学习1/0121沃顿网页布局/Images/graber_emmy_325.jpg" />
<div class="sound">
“We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div></div>
<div></div>
</body>
</html>
CSS:
*
{
margin:0px;
padding:0px;
}
body
{
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/body_bg.jpg);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#dd
{
width:950px;
margin:auto;
}
.container
{
/*border:1px solid red;*/
float:left;
width:100%;
}
ul
{
list-style-type:none;
}
/***********设计最上面区域的样式************/
#menu
{
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/metaNav_bg.jpg);
} #menu ul
{
float:right;
}
#menu ul li
{
float:right;
color:white;
font-weight:bold;
padding:5px 10px 5px 10px;
}
/***************************/
#menu li.drop
{
background-color:gray;
}
/************head和logo部份的样式************/
#head
{
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/header_bg.jpg);
}
#logo img
{
margin:15px 0px 17px 25px;
}
#divsearch
{
float:right;
margin:26px 10px 0px 0px;
}
#txtSearch
{
width:200px;
border:none;
padding:3px 5px 3px 5px;
}
#btnSearch
{
width:22px;
height:22px;
border:none;
margin:0px;
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/searchArrow.gif);
background-position:center;
position:relative;
top:6px;
}
#nav
{
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/mainNav_bg.jpg);
background-repeat:no-repeat;
background-position:right top;
float:left;
width:100%;
}
#nav ul
{
float:right;
width:100%;
margin-right:50px;
}
#nav ul li
{
float:right;
padding:5px 10px 5px 10px;
color:white;
border-right:1px solid #224889;
} /*************slider***************/
#slider
{
height:545px;
width:100%;
float:left;
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/hp_splash4.jpg);
background-repeat:no-repeat;
}
#whartonmenu
{
float:right;
width:235px;
margin:30px 60px; }
#whartonmenu .fulltime
{
padding:20px 5px 20px 5px;
background-color:#224889;
margin-bottom:15px;
color:white;
font-size:18px;
text-align:center;
}
#whartonmenu .fulltimeMBA
{
padding:20px 5px 20px 5px;
margin-bottom:15px;
color:white;
font-size:18px;
text-align:center;
}
#MBA
{
background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/grad-mba.png);
}
#MBA .MBAFullTIME
{
margin:10px;
background-color:#224889;
padding:10px 0px 10px 0px;
}
/************My Wharton****************/
#MyWharton
{
margin-top:20px;
}
#MyWharton .headline
{
text-align:center;
font-size:40px;
color:#aaaaaa;
font-weight:normal;
}
#MyWharton ul
{
float:left;
width:100%;
}
#MyWharton ul li
{
float:left;
width:300px;
}
#MyWharton ul li.one
{
margin-right:25px;
}
#MyWharton ul li.two
{
float:right;
}
#MyWharton ul li img
{
width:300px;
height:300px;
}
#MyWharton ul li div.sound
{
background:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/grad-mba.png);
color:white;
width:100%;
padding:10px;
width:280px;
position:relative;
bottom:68px;
}
CSS--沃顿商学院网页布局的更多相关文章
- css 实现的网页布局
css 实现网页布局,上中下三部分,中间为固定宽度且分为左右两部分 <!DOCTYPE html> <html> <head> <meta charset ...
- CSS简单的网页布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- Java线程——线程习题（一）子线程执行10次后，主线程再运行5次，这样交替执行三遍
题目:子线程执行10次后,主线程再运行5次,这样交替执行三遍 代码如下: package com.itheima.gan; /** * 子线程执行10次后,主线程再运行5次,这样交替执行三遍 * @a ...
- git配置报错fatal: Authentication failed for ''问题解决
如果在git配置中报错fatal: Authentication failed for '',其实就是凭证失败的意思 接着输入一下命令行没有出现要求输入用户名或密码,并报错 $ git config ...
- mongodb的常见使用命令行
由于cms工程要连接mongodb所以需要在在cms服务端工程添加如下依赖:项目使用spring data mongodb操作mongodb数据库 <dependency> <gro ...
- springboot+mybatis+通用mapper+多数据源(转载)
1.数据库准备 数据库表我们在springboot-mybatis数据之外,新建数据库springboot-mybatis2: springboot-mybatis数据库中有t_class表: spr ...
- curl命令简介
curl 文件传输工具 参数: -c --cokie-jar: 将cookie写入到文件 -b --cokie: 从文件中读取cookie -C --continue-at: 断点续传 -d --da ...
- DNS服务器搭建与配置
DNS服务器搭建与配置目录 1.DNS查询方式 2.DNS服务器类型 3.DNS主要配置文件组 4.name.conf文件配置介绍 5.DNS的资源记录格式 6.DNS服务器和客户端配置 7.简单搭建 ...
- Linux-进程关系
(1).无关系 (2).父子进程关系 (3).进程组(group):由若干个进程构成一个进程组 (4).会话(session):由若干个进程组构成一个会话
- HTML字符实体和转义字符串大全
转义字符串的组成 转义字符串(Escape Sequence),即字符实体(Character Entity)分成三部分:第一部分是一个&符号,英文叫ampersand:第二部分是实体(Ent ...
- JSONObject和JSONArray的基本使用
一.JSONObject和JSONArray的数据表示形式 JSONObject的数据是用 { } 来表示的, 例如: { "name" : "佩奇", ...
- MFC的程序，不想显示窗口，任务栏里也不显示
在dialog的oninitdialog里设置如下属性,很简单,网上一些乱七八糟的做法,一行代码就能搞定啊 SetWindowPos(&CWnd::wndNoTopMost,0,0,0,0,S ...