两侧背景自动延伸的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;}
演示：
0
投稿猜你喜欢
- 最近学了一个关于省市级联简单的小例子，贴出来与大家分享一下：<!DOCTYPE html><html lang="
因项目需要，需要使用C#控制台程序执行python脚本，查询各种资料后可以成功调用了，记录一下，以备后面遗忘。只尝试了两种调用方式，第一种只- 传输层安全协议（Transport Layer Security，缩写：TLS），及其前身安全套接层（Secure Sockets Laye
- 一、多态多态是指一类事物有多种形态，比如动物类，可以有猫，狗，猪等等。（一个抽象类有多个子类，因而多态的概念依赖于继承）import abc
- 1. 安装PyYAMLpip install PyYAML2. 加载yaml文件直接使用yaml.load()函数demo.yml :kin
- 今天花了一些时间搭了一个博客系统，虽然并没有相关于界面的美化，但是发布是没问题的。开发环境操作系统：windows 7 64位 Django
- 本文实例讲述了Windows下安装Django框架的方法。分享给大家供大家参考，具体如下：在idea上运行Python项目时，出现了如下错误
- 在Dreamweaver 4.0中，我们就已接触了模板与库的概念，知道它们是批量生成风格类似的网页的好工具。如今在Dreamweaver M
- 方法1：cmd环境下，用pip install selenium可能会很慢方法2：下载selenium安装包手动安装下载地址：https:/
- PHP chr() 函数实例从不同 ASCII 值返回字符：<?php echo chr(52) . "<br>
- 不用库，写了很久，一直出bug，到网上一搜，可以直接输入之后，eval(str)即可得到结果！eval程序如下：s=input("
- 数据库性能优化普遍采用集群方式，oracle集群软硬件投入昂贵，今天花了一天时间搭建基于mysql的集群环境。主要思路简单说，实现mysql
- 在 SQL Server 中可以这样处理： if not exists (select 1 from t where id = 1
- Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布
- Git跟其他版本控制系统一样，可以打标签（tag）标记一个版本号。发布一个版本时，我们通常先在版本库中打一个标签，这样，就唯一确定了打标签时
- numpy库概述numpy库处理的最基础数据类型是由同种元素构成的多维数组，简称为“数组”数组的特点：数组中所有元素的类型必须相同数组中元素
- 已经获取微信公众号发布的图片，但不能正常显示 ，提示：此图片来自微信公众平台 未经允许不得引用。 这是怎么回事呢？遇到这
- 在缺失值填补上如果用前后的均值填补中间的均值，比如，0，空，1，我们希望中间填充0.5；或者0，空，空，1，我们希望中间填充0.33，0.6
- 说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）使用：在 HTML元素 中，添加ref属性，然后在JS
- 分页应该是在我们开发web应用时经常要做的工作，能够比较简洁的实现数据库和视图层的分页十分重要。在数据库层利用hibernate进行数据库的
