relative与absolute的结合使用
- <!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的结合使用的更多相关文章
- 关于relative和absolute的总结
对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...
- relative 和 absolute
relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层
- position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别?
position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...
- relative和absolute的效果
我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...
- [转]关于position 的 static、relative、absolute、fixed、inherit
本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...
- relative、absolute和float
relative.absolute和float position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...
- position relative和absolute区别
看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置 但 ...
- 细谈position属性:static、fixed、relative与absolute
学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...
- relative 和 absolute 定位关系
问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative 相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...
- position的static、relative、absolute、fixed、inherit
网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...
随机推荐
- hduacm 5255
http://acm.hdu.edu.cn/showproblem.php?pid=5255 枚举a和c 求解b #include <cstdio> #include <cstri ...
- (转载)Java基础知识总结
写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言代码把思路体现出来. 学习新技 ...
- C#保存登录用户名供其他页面调用
一.保存登录用户名供其他页面调用 步骤: (1)项目自带的Program.cs,类方法里定义登录的用户名为全局变量loginid,这样整个项目都可以调用它 static class Program { ...
- (DFS)zoj1008-Gnome Tetravex
现在zoj暂时关了,实际上是在scuoj上做的. 题目地址 看起来题目比较复杂,实际上主要需要思维的是如何恰当的剪枝及合适的DFS角度. 问题等价于将n*n个可能相同的方块放到一个n*n的表中,使满足 ...
- [处理器、单片机]ARM
1.ARM简介: ARM是Advanced RISC Machines的缩写.1985年4月26日,第一个ARM原型在英国剑桥的Acorn计算机有限公司诞生,由美国加州San Jose VLSI技术公 ...
- Installing Cygwin and Starting the SSH Daemon
This chapter explains how to install Cygwin and start the SSH daemon on Microsoft Windows hosts. Thi ...
- SharePoint重置密码功能Demo
博客地址 http://blog.csdn.net/foxdave 本文将说明一个简单的重置SharePoint用户密码(NTLM Windows认证)的功能如何实现 重置密码功能,实际上就是重置域用 ...
- ButterKnife的配置
1.打开settings选择Plugins 安装 安装完成后会提示重启AS. 2.在build.gradle文件中添加: compile 'com.jakewharton:butterknife:7. ...
- (转)SoftReference
本文介绍对象的强.软.弱和虚引用的概念.应用及其在UML中的表示. 1.对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说, ...
- HDU 4737 A Bit Fun
题意:定义F(i,j)为数组a中从ai到aj的或运算,求使F(i,j)<m的对数. 思路:或运算具有单调性,也就是只增不减,如果某个时刻结果大于等于m了,那么再往后一定也大于等于m.所以可以用两 ...