左右2边背景延展不同情况下的处理

最新推荐文章于 2024-10-09 11:42:00 发布

ahwingwu

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量511

点赞数

分类专栏：前端技术文章标签： html wrapper xhtml url class 浏览器

本文链接：https://blog.csdn.net/ahwingwu/article/details/5217126

版权

博客探讨了如何处理网页左右背景延展不一致的问题，提供了两种解决方案：一是使用JavaScript根据浏览器窗口大小动态调整背景div的宽度；二是利用CSS绝对定位和百分比宽度实现。通过实例代码展示了这两种方法的实现细节，指出第二种方法更为简洁实用。

摘要由CSDN通过智能技术生成

看到土豆首页中，左右背景延展不同，不知怎地，受到了些许打击。自己琢磨了一夜，今天继续纠结，不过总算想出了些办法。

1、首先想到了还是老式生硬的办法：js处理。
js处理很笨的原理，自然是在页面载入（onload）和浏览器尺寸改变时，自动修改左右2个div，bg1、bg2的尺寸了。代码如下：
[html]
<!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=gb2312" />
<title>test</title>
<style>
* { margin:0; padding:0;}
body { }
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x;