HTML布局 - 链接在同一页面

时间:2017-08-28 10:32:04

标签: html

我已经开始学习HTML,并且负责创建一个类似于www.w3schools.com的页面。所以,它应该有一个侧栏(左侧)。当我点击这个侧栏的链接时,相应的页面应该在同一页面的主窗口中打开。

下面是代码(实际上是我从某些other site复制的)。

        body {
            margin:0;
            padding:0;
            font-family: Sans-Serif;
            line-height: 1.5em;
        }

        #header {
            background: #ccc;
            height: 100px;
        }

        #header h1 {
            margin: 0;
            padding-top: 15px;
        }

        main {
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            float: left;
            width: 100%;
        }

        #nav {
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            float: left;
            width: 230px;
            margin-left: -100%;
            background: #eee;
        }

        #footer {
            clear: left;
            width: 100%;
            background: #ccc;
            text-align: center;
            padding: 4px 0;
        }

        #wrapper {
            overflow: hidden;
        }

        #content {
            margin-left: 230px; /* Same as 'nav' width */
        }

        .innertube {
            margin: 15px; /* Padding for content */
            margin-top: 0;
        }

        p {
            color: #555;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul a {
            color: darkgreen;
            text-decoration: none;
        }

    </style>

</head>

<body>      

    <header id="header">
        <div class="innertube">
            <h1>Welcome to HTML World</h1>
        </div>
    </header>

    <div id="wrapper">

        <main id="main">
            <div id="content">
                <div class="innertube">
                    <h1>Open Google Page here</h1>
                </div>
            </div>
        </main>

        <nav id="nav">
            <div class="innertube">
                <h3>Left heading</h3>
                <ul>
                    <li><a href="http://www.google.com" target="main">google</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
            </div>
        </nav>

    </div>

    <footer id="footer">
        <div class="innertube">
            <p>Footer...</p>
        </div>
    </footer>

有人可以告诉我如何在同一窗口的主页面中打开谷歌页面。每次在新标签页面打开时。我用谷歌搜索,发现每个网站都提供页面布局,但不是互连。

与w3学校类似的任何其他工作示例的代码也很好。我将从那里学习。

提前致谢。

1 个答案:

答案 0 :(得分:1)

根据我对你的问题的理解,你应该尝试使用iframe。