20-iframe
2024-09-06 07:16:13
<!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>
最新文章
- Win10 UI入门 SliderRectangle
- Centos下mysql数据库备份与恢复的方法
- Unity3d 枚举某个目录下所有资源
- 纪念逝去的岁月——C/C++排序二叉树
- C++标准库异常类
- sass初步认识1
- iOS 6编程Cookbook(影印版)
- SQLIO Disk Subsystem Benchmark Tool
- OpenCV3读取视频或摄像头
- php 学习笔记 数组2
- PHP文件夹操作2
- bzoj4817 [Sdoi2017]树点涂色
- redis数据库各种数据类型的增删改查命令
- mvn clean deploy
- JavaScript面试技巧（三）：开发环境、运行环境
- 【python】Numpy中stack()，hstack()，vstack()函数详解
- 自己实现IOC过程
- Java并发编程的艺术(七)——Executors
- OpenCV学习代码记录——canny边缘检测
- JQuery学习的尾声