HTML+CSS简单布局

最新推荐文章于 2024-05-30 21:20:12 发布

小番_番

最新推荐文章于 2024-05-30 21:20:12 发布

阅读量2.8k

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/entouger/article/details/82257435

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天在教程中看到flex布局的例子，之前没有接触过，所以晚上来总结一下。

有时候我们需要做出下图的效果

下方为缩略图，上面是大图，点击缩略图可以查看大图。

1.float布局

CSS中的float属性很强大，可以在一行放置多个块级元素，很适合多个div并列的情况，当然，也适合这种。

<head>
<style>
        .main {
            margin: 0 auto;
        }

        ul {
            padding: 0;
            width: 800px;
            height: 80px;
        }

        ul li a img {
            width: 100px;
            height: 60px;
        }

        li {
            list-style-type: none;
            float: left;
            margin: -10px 7px;
        }
</style>
</head>
<body>
<div class="main" style="width: 800px;height: 600px;">
    <img id="big_img" src="images/壁纸/18000.jpg" alt="">
    <ul id="bz">
        <li>
            <a href="images/壁纸/18000.jpg">
                <img src="images/壁纸/18000.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/壁纸/18001.jpg">
                <img src="images/壁纸/18001.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/壁纸/18002.jpg">
                <img src="images/壁纸/18002.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/壁纸/18003.jpg">
                <img src="images/壁纸/18003.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/壁纸/18004.jpg">
                <img src="images/壁纸/18004.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/壁纸/18005.jpg">
                <img src="images/壁纸/18005.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/壁纸/18006.jpg">
                <img src="images/壁纸/18006.jpg" alt="">
            </a>
        </li>
    </ul>
</div>
</body>

设置li标签float属性为left，即左浮动，使图片在同一行显示，再设置间距等细节即可完成效果。

2.flex布局

这是今天重点要说的。首先我们了解一下什么是flex布局。

Flex 是 Flexible Box 的缩写，翻译成中文就是 “弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

以上这段话是网上复制的，可以很明确地告诉我们： 1.flex布局不同于传统盒子模型的布局 2.不需要再考虑兼容性问题

Chrome21+,Opera12.1+,Firefox22+,Safari6.1+,IE10+

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称” 容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称” 项目”。

在这个案例中，如果将ul设置为flex容器，那么每个li对象都是flex item。

将上面的代码中style部分改成：

<style>
        .main{
            margin: 0 auto;
        }

        #big_img {
            width: 800px;
            height: 500px;
        }

        ul {
            padding: 0;
            margin: 0;
            display: flex;
            justify-items: center;
            align-items: center;
        }
        li {
            list-style-type: none;
            margin: 10px 7px;
        }

        ul li a img {
            width: 100px;
            height: 60px;
        }
    </style>

即可实现相同的效果

最后配合JavaScript可以实现点击缩略图更换大图的效果。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

文章中图片素材（图片来自网络，侵删）

小番_番

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS简单布局

今天在教程中看到flex布局的例子，之前没有接触过，所以晚上来总结一下。有时候我们需要做出下图的效果下方为缩略图，上面是大图，点击缩略图可以查看大图。1.float布局CSS中的float属性很强大，可以在一行放置多个块级元素，很适合多个div并列的情况，当然，也适合这种。&lt;head&gt;&lt;style&gt; .main { ...
复制链接

扫一扫

专栏目录