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布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- 201503-1 图像旋转 Java
思路: 观察输入和输出可以发现,第三列输出为第一行,第二列输出为第二行,第一列输出为第三行.循环即可 import java.util.Scanner; //得分80,本题最高需要输入100W次,因为 ...
- jsp动作标签学习
<jsp:useBean> <jsp:useBean>标签用于在指定的域范围内查找指定名称的JavaBean对象,如果存在则直接返回该JavaBean对象的引用,如果不存在则实 ...
- keyword排序-Es问题
问题:mapping索引registerordercount字段设置为keyword,但是在进行倒序排的视乎发现,没有按预期排序. keyword类型: "registerordercoun ...
- MySQL笔记（二)——查询数据
数据库管理系统的一个最重要的功能就是数据查询,数据查询不应只是简单的查询数据库中存储的数据,还应该是根据需要对数据进行筛选,以及确定数据以什么样的格式显示.本篇笔记主要介绍单表查询,子查询,连接查询. ...
- Linux轻量级自动化运维工具— Ansible
Ansible 是什么 ? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配 ...
- SQL Link Oracle
转自:http://www.2cto.com/database/201107/96105.html 做项目过程中常用到数据库同步,现把前一段时间做的一个项目部分,同步过程贴出来,供分享与自己参考! 本 ...
- sftp安装（linux）
--整理于网络 1. 查看openssh版本ssh -Vopenssh版本必须大于4.8p12. 创建sftp组groupadd sftp3. 创建sftp用户useradd -g sftp -s / ...
- 讯飞语音的中的bug用户校验失败
用户校验失败:原因是目录没有复制粘贴正确. 下面是刚刚下载的SDK目录: 下面的是自己Android工程中的目录:注意复制粘贴的文件路径要正确
- cat命令的一个用法
1: cat 1.txt 2.txt 3.txt > 4.txt 这个操作可以把前三个文件的内容全部复制到第四个文件中去
- Opencv笔记（九）——图像阈值
学习目标: 学习简单阈值,自适应阈值,Otsu's 二值化等 学习函数cv2.threshold,cv2.adaptiveThreshold 等. 一.简单阈值 与名字一样,这种方法非常简单.但像素值 ...