音悦Tai-音悦商城项目(专辑页面以及商品购买页面)

最新推荐文章于 2023-01-20 10:23:02 发布

VIP文章执笔丶画苍生

最新推荐文章于 2023-01-20 10:23:02 发布

阅读量563

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_63716324/article/details/126067978

版权

一、专辑页面

专辑页面分为两部分

上半部分使用自定义列表，flex布局完成

下半部分使用grid布局完成

html代码

 <div class="page">
        <div class="list_nav">
            <dl>
                <dt>分类</dt>
                <dd>
                    <a href="#">原版</a>
                    <a href="#">签名版</a>
                    <a href="#">内地引进版</a>
                    <a href="#">演唱会DVD/LIVE</a>
                    <a href="#">限量版</a>
                    <a href="#">贴纸/文件夹/笔记本</a>
                </dd>
            </dl>
            <dl>
                <dt>公司</dt>
                <dd>
                    <a href="#">MBK Entertainment</a>
                    <a href="#">环球唱片</a>
                    <a href="#">艺人工作室</a>
                    <a href="#">英皇娱乐</a>
                    <a href="#">Fantagio</a>
                    <a href="#">乐华娱乐</a>
                    <a href="#">Woolim</a>
                    <a href="#">WM Entertainment</a>
                    <a href="#">相信音乐</a>
                    <a href="#">TS Entertainment</a>
                    <a href="#">环球中国</a>
                    <a href="#">华纳唱片</a>
                    <a href="#">天娱传媒</a>
                    <a href="#">LOEN Entertainment</a>
                </dd>
            </dl>
        </div>
        <div class="list_content">
            <div>
                <a href="">
                    <img src="./img/pro/1.jpg" alt="">
                    <span>宇宙少女 迷你五级《WJ PLEASE?》</span>
                    <span>￥50</span>
                    <span></span>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img/pro/2.jpg" alt=&#