iframe实现左侧超链接,右侧显示内容

此方法常用在 后台管理系统 的页面布局上。

核心:利用 html 中的 iframe标签,结合超链接的 target 属性实现。
效果:在图中的粉色内容右边位置,显示对应的 html 链接的内容,而不是出现在一个新的、全屏的页面上。

  • 点击 a.html 超链接

iframe实现左侧超链接,右侧显示内容_第1张图片

  • 点击 b.html 超链接

iframe实现左侧超链接,右侧显示内容_第2张图片

  • 点击 c.html 超链接

iframe实现左侧超链接,右侧显示内容_第3张图片
HTML核心代码

<body>
<div class="header">
  header
div>
<div class="center">
    <div id="left">
        <ul>
            <li><a href="a.html" target="mainframe">a.htmla>li>
            <li><a href="b.html" target="mainframe">b.htmla>li>
            <li><a href="c.html" target="mainframe">c.htmla>li>
        ul>
    div>
    <div id="right">
        <iframe name="mainframe" id="frame_main" >iframe>
    div>
div>
body>

css:

        body{
            width:100%;
            margin: 0 auto;
        }
        #right{
            margin-left:300px;
        }
        #frame_main,.header,.center{
            width:100%;
        }
        #frame_main, #right,#left{
            height:600px;
        }
        #left{
            position: absolute;
            width: 300px;
            background-color:peachpuff;
        }
        .header{
            background-color:powderblue;
            height:150px
        }
        .center{
            margin:0 auto;
        }
        li{
            list-style-type: none;
            padding:15px;
        }

你可能感兴趣的:(随笔)