如何把链接的东西放到同一个网页

想把其他链接放进中间部分显示，保留上下部分。

<!DOCTYPE html >
<html >
 <head>
  <title>document</title>
  <style>
/* 先取消默认样式 */
a { text-decoration: none; }
ul { list-style-type: none; }
ul, li {
    padding: 0;
    margin: 0;
}
.banner li {
    float: left;
}
.banner img {
    width: 600px;
    height: 400px;
}
/* relative和absolute用于控制切换按钮位置 */
.banner {
    position: relative;
    width: 600px;
    height: 400px;
    margin: auto;
}
.banner ul {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.banner ul li {margin-left: 5px;}
.banner ul li a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #8c8c8c;
    text-align: center;
    border-radius: 50%;
    color: #FFF
}
  </style>
 </head>
 <body>
  <div class="banner">
    <img src="1.png">
    <ul>
        <li><a href="1.png">1</a></li>
        <li><a href="2.png">2</a></li>
        <li><a href="3.png">3</a></li>
        <li><a href="4.png">4</a></li>
    </ul>
  </div>

  <script src="jquery.js"></script>
  <script>
$(document).ready(function(){    // 在一开始绑定a的点击切换轮播图事件
    $(".banner>ul>li>a").click(function(){
       banner(this);
       return false;
    });
    bannerRoll();
});
// 用a标签按钮切换轮播图
function banner(obj) {    // obj 当前标签
    var img = $(obj).parent().parent().prev();
    $(img).attr("src", $(obj).attr("href"));
}
function bannerRoll() {
    setInterval(showPic, 3000);        // 设置每三秒调用换图函数换张图
}
var x = 0;    // 全局变量，记录当前第几张轮播图
function showPic() {
    // 获取a父标签li的个数，轮流播放
    var arr_uls = $(".banner>ul");
    arr_uls.each(function() {    // 遍历ul标签，给它的img换张图
        if (x >= $(this).children().length) x = 0;
        $(this).prev("img").attr("src", arr_uls.children("li").eq(x).children("a").attr("href"));
    });
    x++;
}
  </script>
 </body>
</html>

iframe标签内嵌窗口

https://www.w3school.com.cn/tags/tag_iframe.asp

如有帮助，麻烦点个[采纳此答案]谢谢^O^

可以实现
div 绝对定位上左下右设置链接就是