HTML代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<!--老师，您好，这里为什么不能用LI做浮动，麻烦您讲解一下，谢谢-->
<li class="item"><a class="url" href="">首页</a></li>
<li class="item"><a class="url" href="">公司介绍</a></li>
<li class="item">
<a class="url" href="">产品中心
<ul id="next-nav">
<!--老师，这里为什么加上 a 标签做链接会破坏整个布局，这里现在只能套用JS做链接，请问怎么用 a href 标签做，谢谢-->
<li onclick="lianjie('http://www.baidu.com')">
OPPO手机
</li>
<li onclick="lianjie('http://www.php.cn')">
HUAWEI手机
</li>
</ul>
</a>
</li>
<li class="item"><a class="url" href="">联系我们</a></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
<div class="container">
<div class="wrap">
<div class="main">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div style="clear:both;"></div>
</div>
<div class="footer">
<div class="footer-content"> 网站版权 <a href="http://www.php.cn">www.php.cn</a> 2019 Q1发行
</div>
</div>
<div class="ads">
<button onclick="this.parentNode.style.display='none'"">关闭</button>
广告窗口
</div>
<script>
function lianjie(url){
window.open(url);
}
</script>
</body>
</html>
CSS代码部分
.header{
width:100%;background-color: lightgray;
}
.header .content{
width:1000px;height:40px;background-color: lightcoral;margin:0 auto;
}
.nav{
padding: 0;
margin:0;
}
.item{
list-style-type: none;
}
.url{
float:left;width:100px;height:inherit;line-height: 40px;text-align: center;text-decoration: none;position: relative;margin:0 5px;border:0px solid #000;
}
.url:hover{
background-color: lightpink;
}
.url:hover #next-nav{display: block}
#next-nav{
margin:0;
padding:0;
display: none;
position: absolute;
font-size:10pt;
border:1px solid lightgray;border-top:none;
background-color:rgb(250, 250, 250)
}
#next-nav li{
list-style-type: none;width:100px;text-align:left
}
#next-nav li:hover{background-color: lightskyblue;}
.container{
width:1000px;
height:300px;
background-color: lightcoral;
margin:5px auto;
}
.wrap{
width:1000px;
height:inherit;
background-color: lightgreen;
}
.left{
width:200px;
height:inherit;
background-color: lightgray;
margin-left:-100%;
}
.right{
width:200px;
height:inherit;
background-color: lightseagreen;
margin-left:-200px;
}
.wrap ,.left ,.right{float:left;}
.main{
padding:0 200px;
}
.footer{
width:100%;height:100px;background-color:lightslategray;
}
.footer .footer-content{
width:1000px;margin:5px auto;text-align:center;padding-top:5px;
}
.ads{
width:300px;height:320px;background-color:lightgray;
position:fixed;
bottom:0px;right:0px;
}
.ads button{
float:right;margin-right:10px;
}
