双飞翼布局模式,完成一个网站的首页的完整内容布局,2019年9月5日20时00分 - 前端学习

Community Learn Tools Library Leisure

English

Home > List of blog posts > 双飞翼布局模式,完成一个网站的首页的完整内容布局,2019年9月5日20时00分

Blogger Information

Blog 3

fans 0

comment 0

visits 1947

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style.css">
    <title>新千年板材 - 精品***，亲民价格</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>
                <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="static/images/1.jpg" alt="">
    </div>
    <!-- 主体 -->
    <div class="container">
        <!-- 双飞翼DOM结构 -->
        <!-- 主体 -->
        <div class="wrap">
            <div class="main">
                <h1>产品展示</h1>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </div>
                <div class="product">
                    <a href=""><img src="static/images/爱马士橙.jpg" alt=""></a>
                    <p>苏香桐</p>价格：
                    <span>250</span>   销量：
                    <span>150</span>
                    <a href="#"></a>
                    <div class="shop">点击***</div>
                    </a>
                </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="">osb板</a></li>
            </ul>
        </div>

        <!-- 右侧边栏 -->
        <div class="right">
            <h1>热销产品</h1>
            <ul>
                <li>
                    <a href="#">
                        <img src="static/images/爱马士橙.jpg" alt="">
                    </a>
                    <p>苏香桐</p>
                </li>
                <li>
                    <a href="#">
                        <img src="static/images/爱马士橙.jpg" alt="">
                    </a>
                    <p>苏香桐</p>
                </li>
                <li>
                    <a href="#">
                        <img src="static/images/爱马士橙.jpg" alt="">
                    </a>
                    <p>苏香桐</p>
                </li>
                <li>
                    <a href="#">
                        <img src="static/images/爱马士橙.jpg" alt="">
                    </a>
                    <p>苏香桐</p>
                </li>
            </ul>
        </div>

    </div>
    <!-- 底部 -->
    <div class="footer">
        <!-- 底部内容区 -->
        <div class="content">
            <p>
                <a href="">©新千年板材所有</a> | 
                <a href="">0571-83525119</a> | 
                <a href="">浙ICP备案123***666</a>
            </p>
        </div>
    </div>
</body>

</html>

运行实例 »

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

实例

.wrap {
    width: 100%;
    background-color: lightblue;
}
.wrap,
.left,
.right {
    float: left;
}

.container {
    overflow: hidden;
}

.main {
    padding-left: 200px;
    padding-right: 200px;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -200px;
}

运行实例 »

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

关于产品展示和热销产品也是采用流体布局，只要将单个产品div的显示样式设置成display: inline-block;就可以自动排序，不过要计算好单个div的宽度和高度，

实例

.wrap .main .product {
    display: inline-block;
    width: 320px;
    height: 370px;
    background-color: white;
    font-size: 1.2rem;
    text-align: center;
    box-shadow: 2px 2px 2px #444444;
    margin-left: 3px;
    margin-bottom: 7px;
}

运行实例 »

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

火狐截图_2019-09-07T06-52-09.860Z.png

双飞翼DOM结构布局需要将主体设置.container {overflow: hidden;}，消除class为wrap、left、right的div设置向左浮动影响，产品展示也可以采用将产品模块设置成向左浮动来实现。

Correction status：qualified

Teacher's comments：页面看上去非常的棒, 显得很干净, 也很安静, 不错... 代码也比较规范

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

CSS布局原理与实现总结（清除子元素浮动造成父元素高度折叠的影响及三列布局的实现原理）-2019年9月4日20时00分

2019-09-05 16:29:06