实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<style>
*{margin:0; padding:0}
ul,li{list-style:none}
body{ font-family:"微软雅黑"; font-size:14px; line-height:24px; font-weight:400}
#box{ margin:50px auto; width:1000px; height:600px; border:1px solid #666; overflow:hidden}
.box-left{ float:left; width:200px; height:600px; overflow:hidden; background:#eee}
.box-left ul{ width:160px; margin: 40px;}
.box-left ul li{
width: 120px;
height: 30px;
line-height:30px;
border-bottom:1px solid #222;
border-right:1px solid #222;
border-top:1px solid #aaa;
border-left:1px solid #aaa;
background:#888
}
.box-left ul li:hover{
width: 120px;
height: 30px;
line-height:30px;
border-bottom:1px solid #aaa;
border-right:1px solid #aaa;
border-top:1px solid #222;
border-left:1px solid #222;
background:#888
}
.box-left li a{
text-align:center;
display:block;
color:#fff;
text-decoration: none;
}
.box-left li a:hover{
text-decoration:underline;
color:#ffff00;
}
#miframe{
width: 795px;
height: 598px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="box">
<div class="box-left">
<ul>
<li><a href="http://www.baidu.com" target="miframe" > 百度</a></li>
<li><a href="http://www.qq.com" target="miframe" >腾讯</a></li>
<li><a href="http://www.163.com" target="miframe" >网易</a></li>
<li><a href="http://www.sina.com.cn" target="miframe" >新浪</a></li>
</ul>
</div>
<iframe id="miframe" name="miframe" src="http://www.baidu.com">
</iframe>
</div>
<br/><br/><br/><br/>
<p>css优先级：内联最高，其次内部，最后外联</p>
<p>选择器优先级：id>class(越后越优先）>tag</p>
<p>margin,padding:第一位是上，第二位是右，第三是下，第四是左（按顺时针排序）</p>运行实例 »
点击 "运行实例" 按钮查看在线实例