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布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- GitHub 中 readme 如何添加图片
一.Readme 是什么 readme文件一般是放在github 每个repo的根目录下,用来解释.说明本repo的主要内容和相关信息.而且在repo主页进去的时候会被自动加载.一般采用md标记的文本 ...
- Djang_框架
- 三、NOSQL之Memcached缓存服务实战精讲第二部
1.Memcached服务安装 Memcached的安装比较简单,很多平台都是支持Memcached,常见的有:Linux .Windows 服务端端: cd /home ...
- coursera课程视频
#!/usr/bin/env python # coding=utf-8 import urllib import urllib2 import cookielib def setcookie(ena ...
- Patroni 修改配置
Patroni 修改配置 背景 使用 Patroni 部署 postgresql 集群的时候,不能单独修改单点的配置,这里需要通过 Patroni 来修改配置. 修改步骤 1. 修改 postgres ...
- 通过TleChat插件一键Getshell
TleChat网站插件是一个发布到wordpress,typecho和emlog社区上的站长聊天插件,站长聊天室插件为站长和用户提供聊天室功能,让站长与用户之间的联系更加友爱,支持文本.长文本.语音聊 ...
- 前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目
流式布局思想 """ 页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比,就可以随屏幕 ...
- 异常处理和UDP协议
一.什么是异常? 程序在运行过程中出现了不可预知的错误,并且该错误没对应的处理机制,那么就会以异常的形式表示出来, 造成的影响就是整个程序无法再正常的运行,抛出异常. 二.异常的结构: 1:异常的类型 ...
- TPO3-2Depletion of Ogallala Aquifer
The vast grasslands of the High Plains in the central United States were settled by farmers and ranc ...
- windows下pip的安装
安装地址:https://pypi.python.org/pypi/pip#downloads 下载完成后,找到文件并进行解压,找到下面路径. 打开cmd,cd到当前目录下,然后执行下面命令: pyt ...