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布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- Consul集群版容器化部署与应用集成
背景 由于公司目前的主要产品使用的注册中心是consul,consul需要用集群来保证高可用,传统的方式(Nginx/HAProxy)会有单点故障问题,为了解决该问题,我开始研究如何只依赖consul ...
- 【iOS入门】UITableView加载图片
学习带图片的列表 官方 LazyTableImages demo http://download.csdn.net/detail/jlyidianyuan/5726749 分析源码是学习的好方法. ...
- Java8必知必会
Java SE 8添加了2个对集合数据进行批量操作的包: java.util.function 包以及 java.util.stream 包. 流(stream)就如同迭代器(iterator),但附 ...
- 2019-2020-1 20199324《Linux内核原理与分析》第九周作业
第八章 进程的切换和系统的一般执行过程 1.进程调度的时机 硬中断和软中断 中断:在本质上都是软件或者硬件发生了某种情形而通知处理器的行为,处理器进而停止正在运行的指令流(当前进程),对这些通知做出相 ...
- 代码验证ncut和谱聚类的系数
W = rand(30); W = W+W'; I = cell(3,1); I{1} = 1:10; I{2} = 11:20; I{3} = 21:30; vol = -ones(3,1); fo ...
- ruoyi StringUtils
package com.ruoyi.common.utils; import java.util.Collection; import java.util.Map; import com.ruoyi. ...
- Docker容器化【Dockerfile编写&&搭建与使用Docker私有仓库】
# Docker 学习目标: 掌握Docker基础知识,能够理解Docker镜像与容器的概念 完成Docker安装与启动 掌握Docker镜像与容器相关命令 掌握Tomcat Nginx 等软件的常用 ...
- [WC2010]重建计划（长链剖分+线段树+分数规划）
看到平均值一眼分数规划,二分答案mid,边权变为w[i]-mid,看是否有长度在[L,R]的正权路径.设f[i][j]表示以i为根向下j步最长路径,用长链剖分可以优化到O(1),查询答案线段树即可,复 ...
- 吴裕雄--天生自然python学习笔记：python 用firebase实现英汉词典进阶版
用 post 方法创建的数据会自动产生一个 id (Key ),但有时也常常为了取得这个 id 而让程序难以处理 . 以英汉词典标准版来说,它的数据结构如下: 如果将每条数据都改为{eword:cwo ...
- VMware 三种网络配置解释
https://blog.csdn.net/noob_f/article/details/51099040 ifconfig -a 网卡名称