<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

html,body,div,ul,li,a{

margin:0;

padding:0;

list-style:none;

}

a, a:hover{

color:#000;

border:0;

text-decoration:none;

}

#warp,#head,#main,#foot

{

width: 962px;

}

/*设置居中*/

#warp{

margin: 0 auto;

}

#head{

height:132px;

position:relative;

}

.logo{

position:absolute;

top:17px;

}

.head_pic{

position:absolute;

top:17px;

left:420px;

}

.sc{

position:absolute;

right:5px;

top:12px;

}

.sc a{

padding-left:20px;

color:#666;

}

.nav{

width:960px;

height:42px;

line-height:42px;

position:absolute;

bottom:0px;

background:url(img/nav_bj.jpg) no-repeat center;

}

.nav ul{

float:left;

padding:0 10px;

}

.nav li{

float:left;

background:url(img/li_bj.jpg) no-repeat right center;

padding-right:40px;

padding-left:20px;

text-align:center;

display:inline;

}

.nav li a{

font-size:14px;

font-family:Microsoft YaHei !important;

white-space:nowrap;

}

.nav li a:hover{

color:#FBECB7;

}

</style>

<title></title>

</head>

<body>

<div id="warp">

<div id="head">

<div class="logo"><img src="img/logo.jpg" /></div>

<div class="head_pic"><img src="img/head_pic.jpg" /></div>

<div class="sc">

<a href=""><img src="img/sc_btn.jpg" /></a>

<a href=""><img src="img/sy_btn.jpg" /></a>

<a href=""><img src="img/kf_btn.jpg" /></a>

</div>

<div class="nav">

<ul>

<li><a href="">首页</a></li>

<li><a href="">关于我们</a></li>

<li><a href="">团队文化</a></li>

<li><a href="">公司动态</a></li>

<li><a href="">资讯参考</a></li>

<li><a href="">业务中心</a></li>

<li><a href="">合作银行</a></li>

<li><a href="">联系我们</a></li>

</ul>

</div>

</div>

<div id="main"></div>

<div id="foot"></div>

</div>

</body>

</html>

relative与absolute的结合使用的更多相关文章

  1. 关于relative和absolute的总结

    对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...

  2. relative 和 absolute

    relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层

  3. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  4. relative和absolute的效果

    我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...

  5. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  6. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  7. position relative和absolute区别

    看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置  但 ...

  8. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  9. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  10. position的static、relative、absolute、fixed、inherit

    网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...

随机推荐

  1. hdu 4632 Palindrome subsequence

    http://acm.hdu.edu.cn/showproblem.php?pid=4632 简单DP 代码: #include<iostream> #include<cstdio& ...

  2. [转载]Android 异步加载解决方案

    2013-12-25 11:15:47 Android 异步加载解决方案,转载自: http://www.open-open.com/lib/view/open1345017746897.html 请 ...

  3. 浏览器Firefox新标签页默认打开地址设置

    1.地址栏输入about:config 2.找到browser.newtab.url 修改它的值为你想要的地址,如:https://www.baidu.com

  4. Codeforces Round #326 (Div. 2)-Duff and Meat

    题意: Duff每天要吃ai千克肉,这天肉的价格为pi(这天可以买好多好多肉),现在给你一个数值n为Duff吃肉的天数,求出用最少的钱满足Duff的条件. 思路: 只要判断相邻两天中,今天的总花费 = ...

  5. android 通知栏 notifcation

    http://blog.csdn.net/guolin_blog/article/details/50945228  郭神的博客 final NotificationManager manager = ...

  6. 使用OTT处理oracle中的对象（一） OTT配置

    OTT是OCI中访问对象类型数据的重要工具,它将数据库中的对象数据类型或集合类型映射为C++中的结构体类型.OTT是Oracle自带的,但是使用前必须配置一下环境变量.在计算机->属性-> ...

  7. C语言输出规定长度的整数，不够位数前面补零

    今天在做ACM题目的时候,遇到了这么一个问题,还真别说,这个以前真的没用过,当时就傻掉了,还好这个世界有Google,通过搜索了解了输出这种格式的C语言实现方法.但是没有找到C++的实现方法,希望知道 ...

  8. SharePoint 2013 开发——开发并部署webpart

    博客地址:http://blog.csdn.net/FoxDave webpart我们就不详细阐述了,在APP的开发中,自定义属性设置通过APP webpart的URL查询字符串传递,它通过IFR ...

  9. 统计一段文字中出现频率最高的10个单词（c语言）

    注:这次使用C语言做的这个程序.个别不懂的地方和算法部分是请教的其他同学,交流并吸收,所以收获颇多! 在程序中每一个地方我都做了注释,方便同学之间交流.也让老师容易看.程序也有很多不足的地方,但限于本 ...

  10. Oracle 12c与GoldenGate 12c的一些问答

    1. 如何知道一个12c DB是否为容器数据库?(1) container DBSQL> select cdb from v$database;CDB---YES (2) non contain ...