返回 双飞翼布局的实...... 登陆

双飞翼布局的实战

世界的背影 2019-01-18 17:35:59 254

<style>

.header{

width: 100%;

background-color: lightgray;

}

.header .content{

width: 1000px;

height: 60px;

background-color: lightgreen;

margin: 0 auto;

}

.header .content .nav{

margin: 0;

padding: 0;

}

.header .content .nav .item{

list-style: none;

}

.header .content .nav .item a{

float: left;

padding:0 20px;

min-width: 10px;

min-height: 10px;

line-height: 60px;

text-decoration: none;

text-align: center;

}

.header .content .nav .item a:hover{

background-color: #444444;

color: azure;

}

/* 第一步:主体容器设置总宽度,并水平居中 */

.container{

width: 1000px;

min-height: 600px;

background-color: lightcyan;

margin:5px auto;

}


/* 第二步:左,右两侧固定宽度,中间区块自适应 */

/* 中间区块宽度设置在它的容器wrap中 */

.wrap{

width: inherit;

/* inherit关键字代表“使用指定给父元素的所有值” */

min-height: inherit;

background-color: cyan;

}

/* 设置左右区块的宽度和高度(因为无内容所以设置最小高度),并设置参考色块 */

.left{

width: 200px;

min-height: 600px;

background-color: lightcoral;

}


.right{

width: 200px;

min-height: 600px;

background-color: lightgreen;

}


/* 第三步:中间,左右区块全左浮动 */


.wrap,.right,.left{

float: left;

}

/* 第四步:将left和right拉回到他们正确的位置上 */

/* 通过设置区块的负边距的方式,实现向反方向移动区块 */


.left{

margin-left: -100%;

}


.right{

margin-left: -200px;

}


/* 第五步:将主体区块main显示出来 */

.main{

padding-left: 200px;

padding-right: 200px;

}



.footer{

width: 100%;

background-color: lightgray;

}

.footer .content{

width: 1000px;

height: 60px;

text-align: center;

margin:5px auto;

line-height: 60px;

}

.footer .content p a{

text-decoration: none;

}

.footer .content p a:hover{

color: aqua;

}


</style>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" media="screen" href="main.css" />

<script src="main.js"></script>

</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>

</ul>

</div>

</div>

<!--【双飞翼】中间主体的区块模拟 -->

<div class="container">

<!-- 创建双飞翼布局使用的DOM结构 -->

<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="">php中文网</a>&nbsp;&nbsp;

<a href="">89126620</a>&nbsp;&nbsp;

<a href="">安徽合肥</a>&nbsp;&nbsp;

</p>

</div>

</div>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网