双飞翼实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<!--<link rel="stylesheet" href="css/work.css">-->
<style>
/*******************头部header**********************/
.header{
background-color: black;
}
.header .content {
width:1000px;
height:60px;
margin:0 auto;
background-color: black;
}
/*设置导航条*/
.header .content .nav {
margin:0;
padding:0;
}
.header .content .nav .item {
list-style-type: none; /*去掉下划线*/
}
.header .content .nav .item a {
float:left; /*浮动*/
min-width: 80px; /*最小宽高*/
min-height: 60px;
color:white;
line-height: 60px; /*行高*/
padding:0 15px; /*左右间隔*/
text-align:center; /*文本居中*/
text-decoration: none; /*去掉A标签下划线*/
}
.header .content .nav .item a:hover {
font-size:1.1rem; /*鼠标移动上时字体放大*/
background-color:red;
border: 3px solid;
border-bottom-color: blue; /*鼠标移到上面边框底显示兰线*/
}
/*******************主体main**********************/
.container {
width:1000px;
margin:8px auto;
background-color: white;
overflow:hidden; /*包住浮动子元素*/
}
.wrap {
width:inherit; /*继承父级宽度*/
min-height:800px; /*最小高度，撑开主体*/
background-color: lightpink;
}
.left{
width:200px;
min-height: 800px;
background-color:lightblue;
}
.right{
width:200px;
min-height: 800px;
background-color:lightgreen;
}
.wrap, .left, .right{
float:left; /*元素浮动*/
}
.left {
margin-left: -100%; /*调整左窗口位置*/
}
.right {
margin-left: -200px; /*调整右窗口位置*/
}
.main {
padding-left: 200px;
padding-right: 200px;
/*padding: 0 200px;*/
}
/*******************底部footer**********************/
.footer {
background-color: lightgray;
}
.footer .content {
width:1000px;
height:60px;
background-color: lightgray;
/*background-color: lightslategray;*/
margin:0 auto;
}
.footer .content p {
text-align:center;
line-height:60px;
}
.footer .content a {
text-decoration: none;
color:black;
/*margin-left: 30px;*/
}
.footer .content a:hover {
/*font-size:1.1rem;*/
color:red;
}
</style>
</head>
<body>
<!--页面头部-->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司介绍</a></li>
<li class="item"><a href="">产品分类</a></li>
<li class="item"><a href="">服务支持</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<!--页面主体-->
<div class="container">
<div class="wrap">
<div class="main">主内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!--页面底部-->
<div class="footer">
<div class="content">
<p>
<a href="">XX***版权所有 </a> |
<a href="">010-12345678 </a> |
<a href="">京1234567890 </a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例