2

我正在这个网站上工作：http ://www.justaddsolutions.com/SampleSite/

主要区域是 1024px 宽并且始终居中，这是实现的。但是，当浏览器窗口宽于 1024 像素时，我的客户希望黄色和红色条带延伸到浏览器窗口的相关边缘（左侧为黄色，右侧为红色）。

我想用基于 CSS 的 Liquid - Fixed - Liquid Layout 来解决它，其中中心部分居中，侧面部分具有相等的液体宽度。但是我自己无法弄清楚，也无法在任何地方找到如何做到这一点。

我确实在 mathewjamestaylor 液体布局网站上找到了 Liquid-Fixed-Liquid Layout，但是当浏览器的窗口缩小到小尺寸时，它会在 IE8 中中断。

然后我想通过在我的标题中使用 3 列表来实现这一点，并使用 background-image 和 repeat-x 设置我的 td 元素的样式，但这在 Chrome 和 Safari 中似乎效果不佳。

对此问题的任何帮助将不胜感激。

4

3 回答 3

1

我相信你是在想这个。由于您对标题元素使用绝对定位，因此我将简单地为正文元素使用背景图像（不重复）。基本上，它会像您当前的徽标一样，但颜色会从每一侧延伸。

由于它只是纯色，因此您可以将其设置为任意大的宽度（例如 9000 像素）以适应几乎任何浏览器尺寸，并且图像仍然相对较小。

于 2011-01-20T22:22:29.257 回答
1

刚刚测试了这个，

http://www.antiyes.com/test/4753259/

看看 html，它现在看起来有点糟糕，因为颜色配置文件和图像的东西，它们必须被更好地切割，但这显示了该做什么的基础知识。

<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>
于 2011-01-20T22:41:37.923 回答
0

我提出的解决方案适用于高达 3072px 宽的分辨率，这应该足够了。

您需要制作一个#body_background3072px 宽 x 140px 高的背景图像。这个的主要背景颜色显然是白色的。然后，您将在左侧部分制作一个 1024 像素宽的黄色条带，从顶部向下开始 86 像素，以与主要部分中的黄色条带对齐。然后，在黄色条在 1024 像素处结束的水平点，您将制作一个 2048 像素的红色条，该条在 32 像素的右边缘处与主要部分中的红色条对齐......所以基本上你会有看起来像这样的图像：

[ - - - - -1024px- - - - - - ]___________________________________________________
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

#body_background然后使用以下 CSS将其添加为背景图像：

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

那应该这样做！让我知道它是否有效！

于 2011-01-20T22:38:56.207 回答