通用的布局实战案例_0905 - HTML5+CSS3

实例
<!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">
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <style>
        body,
        h1,
        p {
            margin: 0;
        }
        /* 头部信息 */
        
        .header {
            background-color: black
        }
        
        .header .content {
            width: 90%;
            background-color: black;
            margin: 0 auto;
            height: 60px;
            /* 防止导航溢出 自动移动到下面*/
            overflow: hidden;
        }
        
        .header .content .nav {
            margin: 0;
            padding: 0;
        }
        
        .header .content .nav .item {
            list-style: none;
        }
        
        .header .content .nav .item a {
            float: left;
            min-width: 80px;
            min-height: 60px;
            padding: 0 15px;
            line-height: 60px;
            text-decoration: none;
            text-align: center;
            color: white;
            font-size: 18px;
            font-family: 微软雅黑;
        }
        
        .header .content .nav .item a:hover {
            background-color: red;
            font-size: 1.3rem;
        }
        /* 底部信息 */
        
        .footer {
            width: 100%;
            background-color: #444444;
        }
        
        .footer .content {
            width: 90%;
            background-color: #444444;
            height: 60px;
            margin: 0 auto;
        }
        
        .footer .content p {
            line-height: 60px;
            text-align: center;
        }
        
        .footer .content p a {
            color: #999999;
            text-decoration: none;
        }
        
        .footer .content p a:hover {
            color: white;
        }
        /* 内容主题区 */
        
        .slider {
            width: 90%;
            height: 450px;
            margin: 0 auto;
        }
        
        .slider img {
            width: 100%;
            height: 100%;
        }
        
        .container {
            width: 90%;
            margin: 5px auto;
        }
        
        .left {
            min-height: 500px;
            width: 200px;
            background-color: seashell;
            margin-left: -100%;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #c9c6c6;
        }
        
        .right {
            min-height: 500px;
            width: 200px;
            background-color: seashell;
            margin-left: -202px;
            border: 1px solid #c9c6c6;
            box-sizing: border-box;
            padding: 10px;
        }
        
        .main {
            width: 100%;
            min-height: 500px;
            box-sizing: border-box;
            padding-left: 200px;
            padding-right: 200px;
        }
        
        .left,
        .right,
        .main {
            float: left;
        }
        
        .container {
            overflow: hidden;
        }
        
        .left h1 {
            color: #555;
            font-size: 1.5rem;
            border-bottom: 1px solid #555555;
        }
        
        .left ul {
            margin-top: 20px;
            padding: 0;
        }
        
        .left ul li {
            list-style: none;
            padding: 5px 20px;
        }
        
        .left ul li a {
            text-decoration: none;
            color: #555555;
        }
        
        .left ul li a:hover {
            color: crimson;
            text-decoration: underline;
            cursor: pointer;
        }
        /**/
        
        .right h1 {
            color: #555;
            font-size: 1.5rem;
            border-bottom: 1px solid #555555;
        }
        
        .right ul {
            margin-top: 20px;
            padding: 0;
        }
        
        .right ul li {
            list-style: none;
            padding: 5px;
        }
        
        .right ul li a {
            text-decoration: none;
            color: #555555;
        }
        
        .right ul li a:hover {
            color: crimson;
            text-decoration: underline;
            cursor: pointer;
        }
        
        .plate {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .plate .plate-title h1 {
            width: 95%;
            padding: 0;
            margin-left: 10px;
            margin-top: 10px;
            font-size: 24px;
            font-weight: bold;
            border-bottom: 1px solid #999999;
        }
        
        .plate .plate-list {
            padding: 0;
            margin: 0;
            border: 0;
        }
        
        .plate .plate-list .plate-box {
            width: 100%;
            min-width: 940px;
            margin-top: 5px;
            padding: 0;
        }
        
        .plate .plate-list .plate-box li {
            width: 290px;
            height: 200px;
            margin-left: 10px;
            list-style: none;
            float: left;
            border: 1px solid #ccc;
        }
        
        .plate .plate-list .plate-box .pic img {
            width: 290px;
        }
        
        .plate .plate-list .plate-box .banner {
            width: 75%;
            float: left;
        }
        
        .plate .plate-list .plate-box .button {
            width: 25%;
            float: right;
        }
        
        .plate .plate-list .plate-box .button .btn {
            border-radius: 15px;
        }
    </style>
    <title>Document</title>
</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="slider">
        <img src="http://img.zcool.cn/community/01cd0258d93766a801219c77b2642c.jpg">
    </div>
    <div class="container">
        <div class="main">
            <div class="plate">
                <div class="plate-title">
                    <h1>热卖推荐</h1>
                </div>
                <div class="plate-list">
                    <ul class="plate-box">
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="left">
            <h1>商品列表</h1>
            <ul>
                <li>
                    <a href="">热卖推荐</a>
                </li>
                <li>
                    <a href="">出境短线</a>
                </li>
                <li>
                    <a href="">出境长线</a>
                </li>
                <li>
                    <a href="">国内游</a>
                </li>
                <li>
                    <a href="">省内游</a>
                </li>
                <li>
                    <a href="">港澳游</a>
                </li>
                <li>
                    <a href="">自由行</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h1>热卖线路排行</h1>
            <ul>
                <li>
                    <a href="">1、沙巴.沙比岛5天游</a>
                </li>
                <li>
                    <a href="">2、新加坡|巴淡岛6天</a>
                </li>
                <li>
                    <a href="">3、曼谷芭提雅6天</a>
                </li>
                <li>
                    <a href="">4、东阪5大名城6天</a>
                </li>
                <li>
                    <a href="">5、土耳其蓝色浪漫全景游12天</a>
                </li>
                <li>
                    <a href="">6、德法瑞意12天</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="content">
            <p>
                <a href="">个人网站</a>   |  
                <a href="">400-****-1234</a>   |  
                <a href="">皖ICP备19***666</a>
            </p>
        </div>
    </div>
</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
1 left、right、main(wrap)浮动后，会飘出文档流，解决方式：在父级元素增加container {overflow: hidden;}，清除浮动；
3 双飞翼和圣杯布局原理基本相似，差别在main盒模型计算方式
计算标准设置到边框上，抵消到内边距对盒子的影响，这样就不会被撑开了；
批改状态：合格

老师批语：其实许多知识点, 大家完全可以通过自学, 但为什么要付费来学习, 一个重要的原因, 是想知道其它人是不是也不这样用的, 老师是不是也这样用的, 用验证的眼光来学习, 是最牛B的
首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

实例
