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布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- WebAPI异常捕捉处理，结合log4net日志（webapi框架）
一:异常捕捉处理 首先,在我们需要区分controller的类型.是全部基层controller,还是Apicontroller.(当然一般API框架,用的都是Apicontroller).两者异常处 ...
- 17.3.10--C语言运行的步骤
编译-->生成-->调试-->链接-->运行 编译就是:将你编写的C语言程序翻译成机器能识别运行的指令集 生成就是:根据编译完成的指令集制造出机器可以具体执行的指令序列 调试就 ...
- 【MySQL参数】-innodb_flush_method
innodb_flush_method这个参数控制着innodb数据文件及redo log的打开.刷写模式,对于这个参数,文档上是这样描述的:有三个值:fdatasync(默认),O_DSYNC,O_ ...
- 针对Oracle的一系列操作
一.有关于数据库导出dmp的语句. 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:\daochu.dmp中exp system/manager@TEST file=d ...
- elasticsearch 大集群,双重别名，滚动更新分词方案
elasticsearch 滚动更新分词 国内用ik.hanlp.ansj或基于其二次开发的比较多 必然有分词变更的操作(主要是是加词) reindex+别名可以解决一部分问题,但在大集群上会影响业务 ...
- Macroevolution|Silent changes|CNEs|Transposable elements|Neutral sites
Interspecies genomic comparison 因为脊椎动物诞生早,在演化过程中有Macroevolution(因为自然选择或遗传漂变导致持续突变同时表型发生改变),但是存在一种基因缺 ...
- VS IDE调试下将打印日志输出到输出窗口
int aBeginTime = GetTickCount(); TRACE("Current time begin:%d \n", aBeginTime); 查看输出窗口:
- 48)PHP,工厂模式
为啥需要工厂模式啊: (原来是生产类的工具——————————) 工厂类的代码格式: <?php class factory{ //Instance表示“实例”,“对象” static func ...
- Qt HWND的句柄与QWidget的转换
QT中用到HWND的句柄在编程中遇到了问题,第三方API用了hwnd类型做形参,但是QT中又没有该类型,可以做如下操作来解决问题. 在.h中先声明: HWND m_hWnd; 再声明 public: ...
- day40-进程-生产者消费者模型进阶
#1.队列的数据是安全的,因为队列内置了一把锁,大家都来抢占资源的时候,A在操作数据的时候,B就无法操作该数据. # 下面代码有两个生产者和三个消费者,包子吃完之后,接着放的两个None被marry和 ...