两侧背景自动延伸的CSS实现方法
作者:摄氏度 来源:Prower 发布时间:2010-02-24 09:42:00
方法来源于土豆网的导航,在这里纪录一下实现的思路。
主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的,通过position:absolute将需要平铺的背景层叠在另一背景上,这样即可以实现同一位置的两个背景,再使用z-index将内容提升到最高阶显示。
<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”https://www.aspxhome.com/asp/”>asp教程</a></li>
<li><a href=”https://www.aspxhome.com/javascript/”>javascript教程</a></li>
<li><a href=”https://www.aspxhome.com/photo/”>平面设计</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>
首先将其中一个背景样式写在<div id=”a”>上,然后是将另一个背景样式写在<div id=”d”>上,<div id=”b”>为内容层,<div id=”c”>是另一个背景样式层,可以自由的出现在<div id=”b”>里面的任何一个位置。如土豆网中间的那个有弧线的背景。
然后是样式方面:
#a {background:#f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
ul {line-height:50px; position:relative; z-index:9001;}
演示:
猜你喜欢
- 在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容、编码、IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有
- mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数据库
- 表一、运算符与特殊字符 运算符描述/选择子元素,返回左侧元素的直接子元素;如果"/"位于最左侧表示选择根结点的直接子元素
- 在设计主键的时候往往需要考虑以下几点: 1.无意义性:此处无意义是从用户的角度来定义的。这种无意义在一定程度上也会减少数据库的信息冗余。常常
- 一个用asp来处理jmail发信的过程,及使用方法. 发信时,直接调用这个过程就行了,很方便。<% dim
- 可以输入的下拉菜单,不错的一个效果,相信asp之家给大家收集的这个代码会有不少人需要!<html> <head> &
- XML被设计用来描述数据,其焦点是数据的内容。HTML被设计用来显示数据,其焦点是数据的外观。  
- 操作实现函数: 代码如下:Function AddWater(n) Set Photo = 
- 用asp程序进行网页设计,大多因为需要访问数据库,然后再将数据显示到页面,如果数据很多的话,页面的访问速度也就变慢了,为了解决这个问题,可以
- 如何远程注册DLL?试试下面的代码:<% Response.Buffer = True %&g
- 这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是J
- mysql数据库数据表和数据表关联--问题??用户数据表user 字词作品数据表article 短信 message外键ID 主键,之间的关
- MaxDB和MySQL是独立的数据库管理服务器。系统间的协同性是可能的,通过相应的方式,系统能够彼此交换数据。要想在MaxDB和MySQL之
- 【原文地址】 Fixes for Common VS 2008 and .NET 3.5 Beta2 Issu
- 很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细
- 我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊。新手或者对低层还不是很了解的人可以看看,帮助理解与记忆。XMLHttp
- 在了解了XHTML 2的进展之后,我们再来看看X/HTML 5 的进展。X/HTML 5酷在什么地方章节元素的构想X/HTML 5引入新的元
- 我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要。在网页
- 一:关于MySQL5 MySQL5系列数据库是MySQL的最新版本的数据库,比较流行的发行版是mysql-5.0.18。MySQL 英文官方
- Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客