实例
<!doctype html>
<html lang="zh-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>网页导航</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100%;
background: #FF4500 ;
}
ul{
list-style-type:none;
}
.nav {
width:900px;
height:70px;
margin: 0 auto;
color: #FFFFFF;
padding:0 20px;
text-align: center;
background-color: #FFB90F;
}
.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 #FF82AB;
}
</style>
<body>
<div class="header">
<div class="nav">
<a href="https://www.a5.net/"><img src="https://www.admin5.net/logo111.jpg" alt=""></a>
<ul>
<li><a href="https://www.so.com/" target="windows">360搜索</a></li>
<li><a href="https://www.sogou.com/" target="windows">搜狗搜索</a></li>
<li><a href="http://www.iqiyi.com/" target="windows">爱奇艺</a></li>
<li><a href="https://www.toutiao.com/" target="windows">今日头条</a></li>
</ul>
</div>
</div>
<div class="main">
<iframe src="https://www.so.com/" frameborder="0" name="windows"></iframe>
</div>
<div class="foot">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
