博客列表 >5.CSS双飞翼布局-2019年01月15号

5.CSS双飞翼布局-2019年01月15号

万物皆对象
万物皆对象原创
2019年01月22日 11:59:20601浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.CSS双飞翼布局</title>
    <style>
        /* 头部导航样式 */
        .header{
            width: 100%; /* 通常宽度默认为100% */
            background: lightgray;
        }
        .header .content{
            width: 1000px;
            height: 40px;
            background: lightcoral;
            margin: 0 auto;
        }
        .header .content .nav{
            padding: 0;
            margin: 0;
        }
        .header .content .nav .item{
            list-style-type: none;
        }
        .header .content .nav .item a { 
            /*一定要将浮动设置在a标签上,否则无法实现导航区的点击与高度*/
            float: left;
            min-width: 80px;
            min-height: 40px;
            text-align: center;
            line-height: 40px;
            color: #444;
            font-size: 1.2rem;
            padding: 0 10px;
            text-decoration: none;
        }
        .header .content .nav .item a:hover{
            background: lightsalmon;
            color: white;
        }

        /**********************双飞翼样式***************************/
        /* 第一步:主体容器设置总宽度,并水平居中 */
        .container{
            width: 1000px;
            min-height: 600px;
            background: blue;
            margin: 5px auto; /* 上下为5px,左右自动 */
        }
        /* 第二步:左,右两侧固定宽度,中间区块自适应 */
        .wrap{
            width: inherit;
            min-height: inherit;
            background: gray;
        }
        .left{
            width: 200px;
            min-height: 600px;
            background: red;
        }
        .right{
            width: 200px;
            min-height: 600px;
            background: green;
        }
        /* 第三步:将中间区块,左,右全部浮动 */
        .wrap, .left, .right{
            float: left;
        }
        /* 第四步:将left和right拉回到他们正确的位置上 */
        /* 通过负外边距实现反向移动 */
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
        .main{
            padding-left: 200px;
            padding-right: 200px;
        }
        /**********************双飞翼样式***************************/
    
        /* 底部样式 */
        .footer{
            width: 100%;
            background: lightgray;
        }
        .footer .content{
            width: 1000px;
            height: 40px;
            background: lightblue;
            margin: 0 auto;
        }
        .footer .content p{
            text-align: center;
            line-height: 40px;
        }
        .footer .content a{
            text-decoration: none;
            color: #222;
        }
        .footer .content a:hover{
            text-decoration: underline;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a>首页</a></li>
                <li class="item"><a>电影</a></li>
                <li class="item"><a>电视</a></li>
                <li class="item"><a>动漫</a></li>
                <li class="item"><a>综艺</a></li>
                <li class="item"><a>科技</a></li>
                <li class="item"><a>娱乐</a></li>
                <li class="item"><a>搞笑</a></li>
                <li class="item"><a>日常</a></li>
                <li class="item"><a>留言</a></li>
            </ul>
        </div>
    </div>

    <!-- 双飞翼布局主体 start -->
    <!-- 
        1.创建DOM结构divdiv
        2.必须创建中间主体,确保它优先渲染出来
        3.中间的main需要创建一个父级容器来包裹
    -->
    <div class="container">
        <div class="wrap"> <!-- 内容必须写在main中 -->
            <div class="main">主体内容</div>
        </div>

        <!-- 左侧区块 -->
        <div class="left">左侧</div>

        <!-- 右侧区块 -->
        <div class="right">右侧</div>
    </div>
    <!-- 双飞翼布局主体 end -->

    <!-- 底部内容 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">测试测试</a>
                <a href="">测试测试</a>
                <a href="">测试测试</a>
            </p>
        </div>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

666.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议