实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="ad.css">
</head>
<body>
<div class="w">
<div class="header">
<div class="header-1">
<h1>网站后台管理系统<small>(V1.0)</small></h1>
</div>
<div class="header-2">
<em>admin</em>
<button onclick="logout()">退出</button>
</div>
</div>
<div class="nav">
<ul>
<li><a href="https://www.2345.com/?39895" target="content">2345网址导航<span>></span></a></li>
<hr>
<li><a href="https://www.sina.com.cn/" target="content">新浪网<span>></span></a></li>
<hr>
<li><a href="https://www.sohu.com/" target="content">搜狐网<span>></span></a></li>
<hr>
<li><a href="https://www.taobao.com/?page_offline=true" target="content">淘宝网<span>></span></a></li>
<hr>
</ul>
</div>
<div class="content">
<iframe src="../html/default.html" frameborder="1" name="content"></iframe>
</div>
</div>
<script>
function logout(){
return confirm("是否退出")? alert("退出成功"):false
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS:
实例
* {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.w{
width:100%;
}
.header{
height:100px;
background-color:green;
color:white;
}
.header-1{
float: left;
margin:28px;
padding-left: 500px;
}
.header-2{
float:left;
padding-top: 40px;
}
.nav{
width:300px;
height:1200px;
background-color: blueviolet;
float:left;
}
.content{
width:2260px;
height:1200px;
background-color: rgb(177, 226, 43);
}
.nav ul li a{
font-size: 28px;
height:100px;
line-height: 100px;
padding-left: 40px;
color:rgb(228, 116, 12);
}
.nav span{
float:right;
}
.content iframe{
width:1200px;
height:1200px;
}
.nav ul li:hover{
background-color: blanchedalmond;
}运行实例 »
点击 "运行实例" 按钮查看在线实例