Html5 1.4 figure和figcaption的实例

最新推荐文章于 2025-04-13 19:49:15 发布

原创最新推荐文章于 2025-04-13 19:49:15 发布 · 539 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#figure元素 #figcaption元素

Html Note 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用figure和figcaption元素实现商品分类展示的方法，通过具体的HTML代码示例，展示了如何将不同类别的商品图片分组并添加描述标题。

一、figure和figcaption元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Title</title>
    <style type="text/css">
        hgroup{
            position: relative;
            top: 10px;
            left: 10px;
        }
        body{
            margin: 0px;
            width: auto;
            height: 736px;
        }
        a{
            text-decoration: none;
        }
        h4{
            display: inline;
        }
        header{
            width: 100%;
            height: 10%;
            background: gainsboro;
            float: left;
        }
        aside{
            width: 20%;
            height: 80%;
            background: cornflowerblue;
            float: left;
            text-align: center;
        }
        section{
            width: 80%;
            height: 80%;
            background: lightcyan;
            float: left;
            overflow: auto;
        }
        footer{
            width: 100%;
            height: 10%;
            background: peachpuff;
            clear: left;
        }

      #e {
            list-style: none;
            position: relative;
            right: 15px;
        }
        #f{
            list-style: none;
            position: relative;
            bottom: -15px;
            left: 50px;
        }
        #f li{
            display: inline;
        }
        hgroup img{
            width: 30px;
            height: 30px;
            position: relative;
            top: 15px;
        }
    </style>
</head>
<body>
    <header>
        <hgroup><!--<hgroup> 标签对网页或区段（section）的标题进行组合-->
            <img src="imges/ss.png" alt="">
            <input type="text" placeholder="请输入搜索">
        </hgroup>

    </header>
    <aside>
        <ul id="e">
            <li><a href=""><img src="imges/ding.png" width="44px" height="44px" alt=""></a></li>
            <li><a href=""  alt=""><img src="imges/cu.png"  width="44px" height="44px" alt=""></a></li>
            <li><a href=""  alt=""><img src="imges/ding.png"  width="44px" height="44px"alt=""></a></li>
            <li><a href=""  alt=""><img src="imges/dl.png"  width="44px" height="44px" alt=""></a></li>
            <li><a href=""  alt=""><img src="imges/qq.png"  width="44px" height="44px" alt=""></a></li>
            <li><a href=""  alt=""><img src="imges/ka.png" width="44px" height="44px" alt=""></a></li>
        </ul>
    </aside>
    <section >
        <figcaption>食品/家电</figcaption>
        <figure><!--标签规定独立的流内容-->
            <img src="sp/sp1.png" width="50%"  alt=""><img src="sp/sp2.png" width="50%"  alt="">
        </figure>
        <figcaption>汽车/居家</figcaption><!--应该被置于 "figure" 元素的第一个或最后一个子元素的位置,定义figure元素标题-->
        <figure>
            <img src="sp/sp3.png" width="50%"  alt=""><img src="sp/sp4.png" width="50%"  alt="">
        </figure>
        <figcaption>数码/珠宝</figcaption>
        <figure>
            <img src="sp/sp5.png" width="50%"  alt=""><img src="sp/sp6.png" width="50%"  alt="">
        </figure>
    </section>
    <footer>
        <nav><!--用于存放超链接-->
            <ul id="f">
                <li><a href=""><img src="imges/zy.png" alt="" width="40px"%></a> </li>
                <li><a href=""><img src="imges/zhi.png" alt="" width="40px"></a></li>
                <li><a href=""><img src="imges/vip.png" alt="" width="40px"></a></li>
                <li><a href=""><img src="imges/tuan.png" alt="" width="40px"></a></li>
                <li><a href=""><img src="imges/sc.png" alt="" width="40px"></a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

二、效果展示