HTML+CSS简单布局

今天在教程中看到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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值