实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe框架的基础应用-网址导航</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100%;
background: #000;
}
ul{
list-style-type:none;
}
.nav {
width:900px;
height:70px;
margin: 0 auto;
color: #FFFFFF;
padding:0 20px;
text-align: center;
background-color: #000000;
}
.nav img{
float: left;
}
.nav ul li{
float: left;
margin-left:50px;
color:#FFFFFF;
line-height: 70px;
}
.nav ul li a{
display: inline-block;
width:90px;
height:62px;
color: #ffeeee;
text-decoration-line: none;
}
.nav ul li a:hover{
color: #ffffff;
text-decoration-line: none;
border-bottom:8px solid lightgreen;
}
.main{
width: 100%;
height: 100%;
}
.main iframe{
width: 100%;
height:800px;
margin: 0 auto;
}
.foot{
color: #b3b3cc;
height: 50px;
padding-top: 20px;
text-align: center;
background-color: #E9EAED;
border-top: 1px solid #000000;
}
</style>
<body>
<div class="header">
<div class="nav">
<a href="http://www.php.cn/"><img src="http://www.php.cn/static/images/logo.png" alt=""></a>
<ul>
<li><a href="https://www.baidu.com" target="windows">百度搜索</a></li>
<li><a href="https://landing.toutiao.com/" target="windows">头条资讯</a></li>
<li><a href="https://v.qq.com/" target="windows">腾讯视频</a></li>
<li><a href="https://www.wukong.com/" target="windows">悟空问答</a></li>
<li><a href="http://www.boohee.com/food/" target="windows">健康减肥</a></li>
</ul>
</div>
</div>
<div class="main">
<iframe src="https://www.baidu.com" frameborder="0" name="windows"></iframe>
</div>
<div class="foot">
.php中文网第七期作业案例.
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
