实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼结构之---关于我们</title>
<link rel="stylesheet" href="static/css/style.css">
<style type="text/css" >
/******************* 头部样式开始 ******************/
p{
font-size: 15px;
line-height: 30px;
}
.header{
}
/*头部内容区*/
.header .content{ /*在.header和.content之间必须有个空格,否者这个样式不生效*/
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.header .content .nav{
list-style: none;
}
.header .content .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
min-width: 100px;
min-height: 60px;
float: left;
color: #fff;
line-height: 60px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
background-color: red;
/* 将导航文本设置为系统根字体大小的1.2倍 */
font-size: 1.2rem;
}
/******************* 主体样式开始 ******************/
/*双飞翼由大名鼎鼎的玉但提出, 淘宝网率先使用*/
/* 使用双飞翼布局实现主体部分 */
/***** 第一步: 主体容器设置总宽度,并水平居中 *****/
.container {
width: 1000px;
margin: 5px auto;
overflow: hidden;
padding-top: 5px;
}
.banner{
width: 1000px;
height: 200px;
margin-bottom: 10px;
}
/***** 第二步: 左,右二侧固定宽度,中间区块自适应 *****/
/* 1. 中间区块宽度设置在它的容器wrap中 */
.main {
width: 700px;
min-height: 800px;
box-sizing: border-box;
background-color:white;
float: right;
margin-top: 150px;
padding: 20px;
}
.main h2{
text-align: center;
}
/* 2. 设置左,右区块的宽度和高度(因为无内容,所以设置了最小高度),并设置参考色块 */
/* 左边栏样式 */
.left {
width: 200px;
min-height: 800px;
background-color: #444444;
float: left;
margin-top:100px;
}
.left .nav{
list-style: none;
}
.left .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
min-width: 100px;
min-height: 60px;
float: left;
color: #fff;
line-height: 60px;
text-decoration: none;
text-align: center;
}
.left .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
background-color: red;
font-size: 1.2rem;
}
/* 右边栏样式 */
.right {
width: 200px;
min-height: 800px;
float: left;
margin-left: -200px;
}
.footer{
}
.footer .content {
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
text-align: center;
line-height: 60px;
}
.footer .content p a{
color: #ffffff;
text-decoration: none;
}
.footer .content p a:hover{
background-color: red;
font-size: 1.2rem;
}
</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 class="container">
<!-- banner图-->
<div class="banner">
<img src="http://www.php.cn/static/images/index_banner7.jpg" alt="php中文网">
</div>
<!--创建中间内容块-->
<!-- 中间内容区需要创建一个父级容器进行包裹 -->
<div class="main">
<h2>关于我们</h2>
<hr style="color: black;">
<p>
艾媒网获悉，7月7日，沽空机构Muddy Waters Research浑水发布报告称，安踏通过控制大多数一级分销商来给利润注水，
建议沽空安踏。7月8日早盘，安踏体育跌近9%。午间，安踏体育公告，公司股票在港交所短暂停牌。停牌前，
安踏体育报每股51.25港元/股，较上一交易日跌7.32%，市值蒸发109亿。
不过，今天上午，安踏在港交所发布公告称， 9点开始复牌并对做空报告内容进行了澄清。
</p>
</div>
<!--左侧边栏栏目-->
<div class="left">
<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="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-65358899</a> |
<a href="">皖ICP备18***333-1</a>
</p>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
