0

我想做的可能很简单。我的 index.html 目前有框架。我有一个顶部，左侧，右侧底部和中心框架。这使我的页面看起来很尴尬。这是我的 index.html：

    <html>
    <head>
    <title>Support Portal</title>
    </head>
    <frameset rows="28,*,5" frameborder="0" border="0" framespacing="0">
        <frame name="topNav" src="top_nav.html" scrolling="no" noresize>
    <frameset cols="110,*,110" frameborder="0" border="0" framespacing="0">
        <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    </frameset>
        <frame name="footer" src="footer.html">
    <noframes>
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
    </noframes>

    </frameset>
    </html>

我希望做的是获取我的“content.html”和所有其他 html 文件并使背景颜色透明，然后在所有内容后面放置一个背景图像，这样页面看起来更像是 1 页，而不是 5 页放在一起。这是我的内容页面的顶部：

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    body {
        font-family:Ubuntu, sans-serif;
        font-size:10pt;
        margin:10px;
        background-color:transparent;
        }
    a {
        color:white;
        }

我将如何实现这一目标？

4

4 回答 4

1

你根本不应该使用框架。它很旧，不可靠。你应该使用的是div。如果您只想更改页面的一部分，可以使用 javascript 和 jQuery。

使用 div 时，可以使用backgroundCSS 中的属性来操作特定元素的背景，例如：

background-color: #FFF;

您还应该使用单独的 CSS 文件并在 head 标记中链接到它（在任何 javascript 文件之前）：

<link rel="stylesheet" type="text/css" href="styles.css">
于 2013-03-28T20:08:26.367 回答
1

不，使用框架，每个文档都是独立的，不允许其他任何内容（大多数情况下，底部的代码可能在某些浏览器中工作......）你可以像这样破解它：

在 top_nav.html 的 css 中： 

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

在 menu_1.html 的 CSS 中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px 0;
}

在 content.html 的 css 中： 

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px -110px;
}

在相关.html 的 css 中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px right;
    /* this may not work as the image may be too big... */
}

在 footer.html 的 css 中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom 0;
    /* this may not work as the image may be too tall... */
}

这将是最有可能跨浏览器工作的解决方案......但是，我认为以下内容适用于某些浏览器。

frameset {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}
于 2013-03-28T20:28:25.270 回答
0

做你想做的事的现代方式是使用 Javascript。例如，您希望拥有许多静态页面并构建一个网站，而不必每次要在菜单上添加内容时都编辑 10 个页面。

我不同意您的观点，但无论如何，您正在寻找 Ajax 内容加载（您将页面加载到一个中）。

或者您可以构建您的主页布局，然后将 iframe 与可以有页面背景。

我真的不认为你应该这样做，但是......

<html>
    <head>
        <title>Support Portal</title>
        <style>
            body{
                /*background-image here*/
            }
        </style>
    </head>
    <body>
        <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
            <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
            <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
                <div style="position:relative;height:100%;width:100%;">
                    <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
                    <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
                        <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
                    </div>
                    <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
                </div>
            </div>
            <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
        </div>
    </body>
</html>

这是工作

于 2013-03-28T20:38:54.230 回答
0

试试对我有用

<html>
<head>
    <title>Support Portal</title>
    <style>
        HTML{
            /*background-image here*/
        }
    </style>
</head>
<body>
    <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
        <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
        <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
            <div style="position:relative;height:100%;width:100%;">
                <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
                <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
                    <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
                </div>
                <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
            </div>
        </div>
        <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
    </div>
</body>

于 2018-02-04T19:02:27.143 回答