<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ position: relative; width: 1200px; height: 700px; margin: 10px auto; border: 10px solid blue; } .box ul{ position: absolute; top: 0; bottom: 0; left: 10px; height: 520px; margin: auto; list-style-type: none; } .box ul li{ width: 150px; margin: 10px 0; line-height: 30px; text-align: center; box-shadow: 0 0 20px 0 green inset; } .box iframe{ position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; width: 1000px; height: 600px; border: 5px solid purple; } </style> </head> <body> <!--<iframe src="https://www.baidu.com/" name="咸鱼" frameborder="1"></iframe>--> <div class="box"> <ul> <li><a href="作业/1.html" target="咸鱼">第1次作业</a></li> <li><a href="作业/2.html" target="咸鱼">第2次作业</a></li> <li><a href="作业/3.html" target="咸鱼">第3次作业</a></li> <li><a href="作业/4.html" target="咸鱼">第4次作业</a></li> <li><a href="作业/5.html" target="咸鱼">第5次作业</a></li> <li><a href="作业/6.html" target="咸鱼">第6次作业</a></li> <li><a href="作业/7.html" target="咸鱼">第7次作业</a></li> <li><a href="作业/8.html" target="咸鱼">第8次作业</a></li> <li><a href="作业/9.html" target="咸鱼">第9次作业</a></li> <li><a href="作业/10.html" target="咸鱼">第10次作业</a></li> <li><a href="作业/11.html" target="咸鱼">第11次作业</a></li> <li><a href="作业/3.html" target="咸鱼">第12次作业</a></li> <li><a href="作业/4.html" target="咸鱼">第13次作业</a></li> </ul> <iframe src="https://www.baidu.com/" name="咸鱼" frameborder="0"></iframe> </div> <!-- iframe (和行内块属性一样) src 网址的路径 name 框架的名字 frameborder 框架的边框 行内块 --> </body> </html>