HTML+SASS项目：音乐Tai

最新推荐文章于 2024-05-06 10:59:29 发布

云边有个--小卖部

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量104

点赞数 3

文章标签：前端 html scss

本文链接：https://blog.csdn.net/weixin_62115642/article/details/126063110

版权

导航部分

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.min.css">
    <base href="" target="_top">
</head>
<body>
    <header>
        <!-- 头部 -->
        <div class="head">
            <img src="./img/head/log.png" alt="">
            <ul>
                <li><a href="#">官方微博</a><img src="./img/head/weibo.png" alt=""></li>
                <li><a href="#">关注微信</a><img src="./img/head/weixin.jpg" alt=""></li>
                <li><a href="./Notice.html" >购物须知</a></li>
            </ul>
        </div>
        <!-- 中间部分 -->
        <div class="middle">
            <img src="./img/head/logo.png" alt="">
            <div class="search">
                <input type="text" placeholder="搜索偶像、商品">
                <a href="#"></a>
            </div>  
            <ul>
                <li>
                    <img src="./img/head/avatar.png" alt="">
                    <a href="./Sign in.html">登录</a>
                    <li><a href="#">我的订单</a></li>
                </li>
                <li>
                    <img src="./img/head/cart.png" alt="">
                    <a href="">购物车</a>
                </li>
            </ul>
        </div>
        <!-- 底部 -->
        <div class="foot">
                <div class="artist"> <a href="#">艺人分类</a></div>
                <ul>
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./list.html">专辑</a></li>
                    <li><a href="#">明星周边</a></li>
                    <li><a href="#">明星同款</a></li>
                    <li><a href="#">个护美妆</a></li>
                    <li><a href="#">影漫周边</a></li>
                    <li><a href="#">食品</a></li>
                    <li><a href="#">服装配饰</a></li>
                </ul>
        </div>
    </header>
</body>
</html>

scss代码

header {
    width: 100%;
    overflow: auto;
    background-color: #000;

    .head {
        display: flex;
        justify-content: space-between;
        margin-left: 50px;

        ul {
            li {
                display: inline-block;
                width: 150px;
                text-align: center;
                line-height: 30px;

                a {
                    color: gray;
                }

                img {
                    width: 131px;
                    height: 130px;
                    border: 10px solid white;
                    display: none;
                    position: absolute;
                }

                &:hover {
                    background-color: white;
                }

                &:hover img {
                    display: block;
                }

                &:nth-child(3):hover a {
                    display: block;
                    color: rgb(223, 38, 100);
                    background-color: #000;

                }

            }
        }
    }

    .middle {
        display: flex;
        justify-content: space-between;
        margin-left: 130px;

        .search {
            position: relative;

            input {
                width: 440px;
                height: 45px;
                outline: none;
                border: none;
                line-height: 70px;
                padding-left: 20px;
                background: url(../img/head/search_icon.png) no-repeat 0 -40px;

                &:focus {
                    background: url(../img/head/search_icon.png) no-repeat 0 2px;
                }

                &:focus+a {
                    background: url(../img/head/search_icon.png) no-repeat -464px -48px;
                }
            }

            a {
                display: inline-block;
                width: 30px;
                height: 30px;
                position: absolute;
                top: 8px;
                right: 20px;
                background-color: #fff;
                background: url(../img/head/search_icon.png) no-repeat -464px -5px;
            }
        }

        ul {
            line-height: 70px;
            margin-right: 100px;

            li {
                display: none;
                width: 100px;
                color: white;
                display: inline-block;

                img {
                    width: 16px;
                }

                a {
                    color: white;
                }
            }
        }
    }

    .foot {
        width: 100%;
        height: 45px;
        color: white;
        background-color: #000;
        border-top: 2px solid gray;

        .artist {
            font-weight: bold;
            float: left;
            width: 40%;
            height: 40px;

            a {
                display: block;
                width: 100px;
                height: 40px;
                margin-left: 200px;
                text-decoration: none;
                line-height: 40px;
                color: white;
                text-align: center;

                &:hover {
                    color: rgb(245, 42, 110);
                    border-bottom: 3px solid rgb(245, 42, 110);
                }
            }
        }

        ul {
            float: left;
            width: 60%;

            li {
                float: left;
                width: 100px;
                line-height: 40px;
                list-style: none;
                text-align: center;

                a {
                    color: #fff;
                }

                &:hover {
                    color: rgb(245, 42, 110);
                    border-bottom: 3px solid rgb(245, 42, 110);
                }

            }
        }
    }
}

底部

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/footer.min.css">
</head>
<body>
    <footer>
        <div class="footer-img">
            <img src="./img/footer/footer.png" alt="">
        </div>
        <div class="footer-text">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">版权声明</a></li>
                <li><a href="#">客服中心</a></li>
            </ul>
            <p><img src="./img/footer/culture.png" alt=""> Copyright c 2009 - 2016 yinyuetaicom广播电视节目制作经营许可证编号(京字第1891号|京网文[2014]2037-287号|网络视听许可证0110413号</p>
            <p>京公网安备11010502014900号|京CP备11024134号-1|京CP证060716号|出版物经营许可证新出发京零字第朝130062号|增值电信业务经营许可证B2-20140501<img src="./img/footer/biaoshi.gif" alt=""></p>
            <p>食品经营许可s证:JY11105040485363|营业执照</p>
        </div>
    </footer>
</body>
</html>

scss代码

footer {
    background-color: rgb(245, 245, 245);
    .footer-img {
        img {
            margin-top: 30px;
            width: 100%;
        }
    }

    .footer-text {
        width: 100%;
        height: 200px;
        background-color: #000;

        ul {
            text-align: center;
            padding-top: 50px;

            li {
                display: inline-block;
                width: 100px;
                border-right: 1px solid white;
                animation: name 3s;
                &:last-child {
                    border: none;
                }

                a {
                    color: rgb(101, 101, 101);
                }
            }
        }

        p {

            font-size: 14px;
            text-align: center;
            margin-top: 10px;
            color: rgb(147, 149, 151);

            &:nth-child(3),
            &:nth-child(4) {
                position: relative;
                top: -36px;
            }

            &:nth-child(2) img {
                width: 20px;
            }

            &:nth-child(3) img {
                width: 40px;
            }
        }

        @keyframes name {
            from {
                filter: blur(2px);
                transform: scale(0.9);
            }

            to {
                filter: blur(0px);
                transform: scale(1);
            }
        }
    }

}

首页部分

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe>
    <main>
        <div class="main-top">
            <section>
                <div><img src="./img/index/banner/1.jpg" alt=""></div>
                <div><img src="./img/index/banner/2.jpg" alt=""></div>
                <div><img src="./img/index/banner/3.jpg" alt=""></div>
                <div><img src="./img/index/banner/4.jpg" alt=""></div>
            </section>
        </div>
        <div class="main-middle">
            <div class="middle-top">
                <div class="top-one"></div>
                <div class="top-two">
                    <a href="#">
                        <img src="./img/index/necessary/1.png" alt="">
                        <p> 官方应援手灯专区</p>
                    </a>
                    <a href="#">
                        <img src="./img/index/necessary/2.gif" alt="">
                        <p>官方应援手幅专区</p>
                    </a>
                    <a href="#">
                        <img src="./img/index/necessary/3.png" alt="">
                        <p>签名商品专区</p>
                    </a>
                    <a href="#">
                        <img src="./img/index/necessary/4.gif" alt="">
                        <p>官方DVD专区</p>
                    </a>
                    <img src="./img/index/special.jpg" alt="">
                </div>
            </div>
            <div class="middle-middle">
                <div class="top-one"></div>
                <ul>
                    <li>
                        <img src="./img/index/top/a/toplist_a01.jpg" alt="">
                        <p>薛之谦</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a02.jpg" alt="">
                        <p>iKON</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a03.jpg" alt="">
                        <p>鹿晗</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a04.jpg" alt="">
                        <p>GoT7</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a05.jpg" alt="">
                        <p>EXO</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a06.jpg" alt="">
                        <p>Astro(韩国)</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a07.jpg" alt="">
                        <p>Winner</p>
                    </li>
                    <li>
                        <img src="./img/index/top/a/toplist_a08.jpg" alt="">
                        <p>BigBang</p>
                    </li>
                </ul>
            </div>
            <div class="middle-foot">
                <div class="top-one"></div>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./img/pro/1.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/2.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/3.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/4.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/5.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/6.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="./goods.html">
                                <img src="./img/pro/7.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/8.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./img/pro/9.jpg" alt="">
                                <p>【现货包邮】加—联创1more bear 万魔熊头</p>
                                <p>￥50</p>
                                <p><span></span>0</p>
                            </a>
                        </li>
                    </ul>
            </div>
        </div>
    </main>
    <iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body>

</html>

scss代码

main {
    background-color: rgb(245, 245, 245);

    .main-top {
        width: 90%;
        height: 398px;
        overflow: hidden;
        margin: auto;

        section {
            display: flex;
            width: 100%;
            height: 398px;
            transition-duration: 5s;

            div {
                width: 100%;
                height: 398px;
                float: left;

                img {
                    width: 1382px;
                    height: 398px;
                }
            }
        }

        &:hover section {
            transform: translateX(-300%);
        }
    }

    .main-middle {
        width: 90%;
        margin: auto;
        margin-bottom: 60px;
        .middle-top {
            width: 100%;

            .top-one {
                margin: 20px 0;
                width: 150px;
                height: 50px;
                background: url(../img/index/title.png) no-repeat 0 0;
            }

            .top-two {
                display: flex;

                a {

                    img {
                        width: 220px;
                    }

                    p {
                        width: 222px;
                        height: 20px;
                        color: gray;
                        background-color: #fff;
                        text-align: center;
                        margin-left: 24px;

                    }
                }

                img {
                    margin-left: 38px;
                }
            }
        }

        .middle-middle {
            width: 100%;

            .top-one {
                margin: 20px 0;
                width: 150px;
                height: 50px;
                background: url(../img/index/title.png) no-repeat 0 -50px;
            }

            ul {
                display: flex;

                li {
                    margin-left: 24px;
                    animation: name1 3s ease-out;
                    img {
                        width: 146px;
                    }

                    p {
                        width: 148px;
                        height: 35px;
                        font-weight: bold;
                        line-height: 35px;
                        background-color: #fff;
                        text-align: center;
                        &:hover{
                            color: rgb(255, 44, 158);
                        }
                    }
                }
            }
        }

        .middle-foot {
            width: 100%;
            margin: 0 auto;

            .top-one {
                width: 150px;
                height: 50px;
                background: url(../img/index/title.png) no-repeat 0 -82px;
            }

            ul {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                li {
                    width: 30%;
                    height: 175px;
                    margin: 20px 0;
                    background-color: #fff;
                    border-bottom: 3px solid transparent;
                    &:hover {
                        border-bottom: 3px solid red;
                    }
    
                    a {
                        img {
                            float: left;
                            width: 172px;
                            margin: 3px 0 0 3px;

                        }
    
                        p {
                            margin-top: 30px;
                            padding-left: 195px;
                            color: rgb(100, 94, 93);
    
                            &:nth-child(3) {
                                color: rgb(255, 44, 158);
                            }
                            &:nth-child(4)span{
                                display: inline-block;
                                width: 12px;
                                height: 12px;
                                background: url(../img/icon/ico.png) no-repeat 0 -72px;
                            }
                            &:nth-child(4)span:hover{
                                display: inline-block;
                                width: 12px;
                                height: 12px;
                                background: url(../img/icon/ico.png) no-repeat -12px -72px;
                            }
                        }
    
                    }
                }
            }
        }
        @keyframes name1 {
            25% {
                transform: scale(0.5);
            }
        
            50% {
                transform: scale(1);
            }
            75% {
                transform: scale(0.5);
            }
        
           100% {
                transform: scale(1);
            }
        }
    }

}

列表页面

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/list.min.css">
</head>
<body>
    <iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe>
    <div class="page">
        <div class="list-nav">
            <dl>
                <dt>分类</dt>
                <dd>
                    <a href="#">原版</a>
                    <a href="#">签名版</a>
                    <a href="#">内地引进版</a>
                    <a href="#">演会DVDILIVE</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="#">Fantaglo</a>
                    <a href="#">乐华娱乐</a>
                    <a href="#">Woolim</a>
                    <a href="#">VM Enterlainment</a>
                    <a href="#">相信音乐</a>
                    <a href="#">TS Entortainment</a>
                    <a href="#">环球中国</a>
                    <a href="#">华纳唱片</a>
                </dd>
            </dl>
        </div>
        <div class="list-content">
            <div>
                <a href="#">
                    <img src="./img/pro/1.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/2.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/3.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/4.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/5.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/6.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="./goods.html">
                    <img src="./img/pro/7.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/8.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/9.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/1.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/3.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/5.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/2.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/4.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="./goods.html">
                    <img src="./img/pro/7.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/5.jpg" alt="">
                    <p>宇宙少女迷你五辑《WJ PLEASE?》</p>
                    <span>￥50</span><span></span><span>7997655</span>
                </a>
            </div>
        </div>
    </div>
    <iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body>
</html>

scss代码

.page{
    background-color: rgb(245, 245, 245);
    .list-nav{
        width: 80%;
        margin: 20px auto;
        border: 1px solid rgb(209,209,209);
        dl{
            display: flex;
            margin-top: 20px;
            &:first-child{
                border-bottom: 1px dotted gray;
            }
            dt{
                width: 80px;
                height: 30px;
                font-size: 18px;
                font-weight: bold;
            }
            dd{
                margin-left: 30px;
                a{
                    display: inline-block;
                    height: 40px;
                    margin-left: 90px;
                    color: rgb(153,153,153);
                }
            }
        }
    }
    .list-content{
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(4,288px);//4列
        grid-template-rows: repeat(4,360px);//4行
        column-gap: 20px;
        row-gap: 20px;
        div{
            background-color: #fff;
            a{
                img{
                    width: 286px;
                }
                p{
                    color: rgb(157,157,157);
                }
                span{
                    margin: 20px 0 0 45px;
                    color: rgb(255, 44, 158);
                    &:nth-child(4){
                        display: inline-block;
                            width: 12px;
                            height: 12px;
                            background: url(../img/icon/ico.png) no-repeat 0 -72px;
                    }
                    &:nth-child(4):hover{
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        background: url(../img/icon/ico.png) no-repeat -12px -72px;
                    }
                    &:nth-child(5){
                    color: rgb(157,157,157);
                    }
                }
            }
        }
    }
}

商品页面

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/goods.min.css">
</head>
<body>
    <iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe>
    <div class="main-goods">
        <main>
                <div class="text">
                    <div>
                        首页>专辑>【独家发售】大张伟2018全新专辑《人间精品》
                    </div>
                    <img src="./img/goods/demo.jpg" alt="">
                </div>
                <div class="middle">
                    <h2>【独家发售】大张伟2018全新专辑《人间精品》</h2>
                    <p>商城价格<span> ￥99.9</span><del>￥198</del></p>
                    <hr>
                    <p class="weight">重量 <span>0.33kg</span></p>
                    <p>数量</p>
                    <p class="num"><img src="./img/goods/num.jpg" alt=""></p>
                    <p class="jlt"> 
                        <span class="gwc"></span>
                        <span class="gm"></span>
                    </p>
                    <p class="foot"><img src="./img/goods/zpbz.png" alt=""></p>
                </div>
                <footer>
                    <img src="./img/goods/tuangou.jpg" alt="">
                    <img src="./img/goods/footer.png" alt="">
                </footer>
        </main>    
    </div>
    <iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body>
</html>

scss代码

.main-goods{
    width: 100%;
    main {
        width: 80%;
        margin: 0 auto;
    
        .text {
            float: left;
            div {
                margin: 30px 0;
                color: rgb(174, 166, 166);
            }
            img{
                float: left;
            }
        }
    
        .middle {
            float: left;
            margin: 90px 0 0 40px;
    
            p {
                color: rgb(174, 166, 166);
                margin-top: 20px;
                span {
                    font-size: 25px;
                    color: rgb(222, 72, 103);
                    margin-right: 15px;
                }
            }
            .weight span {
                font-size: 16px;
                margin-left: 20px;
                color: rgb(174, 166, 166);
            }
            .num img{
                width: 60px;
                position: relative;
                bottom: 40px;
                left: 55px;
            }
            .jlt{
                height: 50px;
                margin-top: 115px;
            }
            .jlt .gwc{
                display: block;
                width: 172px;
                height: 55px;
                background: url(../img/goods/btns.png) no-repeat;
                background-position: -9px -8px;
            }
            .jlt .gm{
                position: relative;
                bottom: 56px;
                left: 180px;
                display: block;
                width: 172px;
                height: 55px;
                background: url(../img/goods/btns.png) no-repeat;
                background-position: -9px -66px;
            }
            .foot img{
                margin-top: 10px;
            }
    
        }
        footer{
            img{
                width: 100%;
            }
        }
    
    } 
}

购物须知页面

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物须知</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/Notice.min.css">
</head>

<body>
    <iframe src="./header.html" frameborder="0" width="100%" height="200px"></iframe>
    <div class="page">
        <div class="page-head">
            <h2>购物须知</h2>
            <ul>
                <li><a href="#mod1'">预定商品</a></li>
                <li><a href="#mod2">专辑价格</a></li>
                <li><a href="#mod3">发货周期</a></li>
                <li><a href="#mod4">快递</a></li>
                <li><a href="#mod5">售后相关</a></li>
            </ul>
        </div>
        <div class="page-middle">
            <!-- 预定商品 -->
            <div class="mod" id="mod1">
                <div class="middle-title"></div>
                <div class="middle-text">
                    <p>预定商品:非现货的商品，为确保供货数量以及避免过量囤积，因此将通过收取预定金的形式进行把控，且无论是哪种形式的预定商品，预定金一旦支付成功，均不予以退还。敬请周知。</p>
                    <p>如预定商品为全款预定金商品，那么商品正式发行后，则会直接发货;</p>
                    <p>如预定商品为定额预定金商品（众筹预定)，那么商品正式发行后，则需再补充支付尾款。如若不支付尾款，预定金则不予以退还。*预定金是指商品正式发行前夕，预定购买时所支付的一定数额的金钱作为担保。
                    </p>
                    <p>预定商品的预定金分为全款预定金和定额预定金两种形式。</p>
                </div>
            </div>
            <!-- 专辑价格 -->
            <div class="mod" id="mod2">
                <div class="middle-title"></div>
                <div class="middle-text">
                    <p>商城发售的海外专辑的全款价格内包含专辑定价+国际邮费+关税+增值税+审批费用，不含国内邮费。。</p>
                    <p>如专辑为众筹预定商品,则专辑发行后会短信通知补款,补款成功后同步计入专辑销量《韩国专辑计入Hanteo Chart诮量榜》。</p>
                </div>
            </div>
            <!-- 发货周期 -->
            <div class="mod" id="mod3">
                <div class="middle-title"></div>
                <div class="middle-text">
                    <p><img src="./img/buyer/1.jpg" alt=""></p>
                    <p>补充说明:</p>
                    <p>商城发售的海外进口专辑均为预售专辑;</p>
                    <p>进口外文原板专辑需要报批审核,并加财贴「国家专用进口防伪标识」贴纸。审核周期约为20个工作日,因需用实体专辑报批,所以在专辑正式发行后才可递交报批材料。</p>
                    <p>另外，国际运输+中国海关开箱验货+通笑周期约为2周左右。</p>
                    <p>预售海外专辑预计将于专辑正式发售后40个工作日内发货。当专辑发行时间与法定假日冲撞时,则会进行顺廷,具体时间将根据当时情况另行通知。(此为参考时间。发货时问以实际情况为准)</p>
                </div>
            </div>
            <!-- 快递 -->
            <div class="mod" id="mod4">
                <div class="middle-title"></div>
                <div class="middle-text">
                    <p>订购众筹商品时暂不需要支付邮费，商品补款时支付国内邮费。</p>
                    <p>全款预定订单下单时支付国内运费。</p>
                    <p>邮费计算说明: <span><img src="./img/buyer/2.jpg" alt=""></span></p>
                    <p>商城委托第三方快递公司为客户提供送货服务，客户无须向快递公司支付额外的费用。客户可在商城*我的订单"查询货物配送信息，也可以登录第三方快递网站查询快递信息。</p>
                    <p>注意:港澳台地区的用户下单后需联系商城QQ客服补运费后才能正常发货。</p>
                    <p>下单时请在留言区备注可以联系上的QQ,若没有QQ,请留下邮箱地址,以便工作人员与您取得联系。</p>
                </div>
            </div>
            <!-- 售后相关 -->
            <div class="mod" id="mod5">
                <div class="middle-title"></div>
                <div class="middle-text">
                    <p>商品售出后，如无质量问题不予退换。<span><strong>不接受如不喜欢、和想象的不一样、有色差</strong></span> 等主观因素的退换要求。</p>
                    <p>快递签收后7日内,如出现非人为因素的损坏。或密封包装内的商品有劫失等质量问题,需提供电子订单,商品和快递外包装完整图片,联系音悦商城售后含服进行退、换货。</p>
                    <p>如因商城的原因出现少发、漏发等情况,可联系商城客服凭商H购物订单号确认后进行补发;如出现发错件的情况，可在保持专辑包装完好、不影响二次销售的状态下，进行更换。已拆封的音像制品将无法受理退、换货，请您谅解。</p>
                    <p>缺失商品的补发、损坏商品换货的邹邽费均由商城承担。</p>
                    <p>要进行退、换货时,需将退、换商品寄回,请您先垫付寄回运费,后联系商城客服进行退邮费。寄回商品时请发普通快递,不要使用顺丰到付,否则将拒收。退邮费上限为15元,超出部分将由您自己承担，敬请谅解</p>
                    <p>请您一定要当快递员的面拆件检查货品是否完好后再行签收。如有破损请不要签收，并交与快逆员原件退回。如未检查就签收包裹而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担。</p>
                    <p><span><b>请您一定保证收货信息正确，联系电话畅通。如因买家原因，快遂公司人员未能与买家联系到，导致无法正常收货或货品退回出现的商城二次发货。需要买家补款二次邮费。</b></span></p>
                </div>
            </div>
        </div>
    </div>
    <iframe src="./footer.html" frameborder="0" width="100%" height="300px"></iframe>
</body>

</html>

scss代码

.page {
    .page-head {
        width: 70%;
        margin: 20px auto;
        text-align: center;

        h2 {
            color: rgb(211, 68, 98);
        }

        ul {
            width: 80%;
            margin: auto;

            li {
                display: inline-block;
                background: url(../img/buyer/mod_circle.png) 18px 10px no-repeat;

                a {
                    width: 70px;
                    display: inline-block;
                    padding-top: 40px;
                    color: rgb(204, 198, 199);
                }

                &:hover {
                    background: url(../img/buyer/mod_circle.png) 18px -92px no-repeat;

                    a {
                        color: rgb(211, 68, 98);
                    }
                }
            }
        }
    }

    .page-middle {
        width: 80%;
        margin: 30px auto;

        .mod {
            width: 80%;
            margin: auto;
            .middle-title {
                width: 270px;
                height: 60px;
                margin: 20px 0;
                background: url(../img/buyer/mod_title.png) no-repeat 0 -180px;
            }

            .middle-text {
                border: 2px solid gray;
                border-radius: 5px;

                p {
                    line-height: 20px;
                    padding: 0 20px;
                    margin: 20px 0;
                    text-indent: 34px;
                }
            }

        }

        #mod2 .middle-title {
            background-position: 0 10px;
        }

        #mod3 .middle-title {
            background-position: 0 -80px;
        }

        #mod4 .middle-title {
            background-position: 0 -275px;
        }

        #mod5 {
            .middle-title {
                background-position: 0 -586px;
            }
            .middle-text {
                p {
                    span {
                        color: rgb(211, 68, 98);
                        strong {
                            font-size: 18px;
                        }
                    }
                    &:nth-child(5){
                        font-weight: bold;
                        color: white;
                        margin: 0 20px;
                        padding: 10px 0;
                        background-color: rgb(211, 68, 98);
                    }
                }
    
            }
        }


    }
}

登录页面

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/Sign in.min.css">
</head>
<body>
    <div class="Sign">
        <form action="./index.html" method="get">
            <p class="Sign-in">登录</p><br>
            <input type="text" placeholder="手机号邮箱" required><br>
            <input type="password" placeholder="密码" required><br>
            <input type="checkbox" >自动登录<br>
            <button>提交</button><br>
        </form>
    </div>
</body>
</html>

scss代码

body{
    background-size: cover;
    background-image: url(../img/1.gif);
    background-repeat: no-repeat;
}
    .Sign{
        width: 300px;
        height: 270px;
        background-color: rgba(241, 207, 207,0.3);
        border-radius: 10px;
        margin: 240px auto;
        text-align: center;

        .Sign-in {
            font-size: 25px;
            font-weight: bold;
            padding-top: 10px;
        }
        input {
            width: 220px;
            height: 30px;
            border-radius: 10px;
            margin-top: 10px;
            outline: none;
        }
        input[type="checkbox"]{
            width: 20px;
            position: relative;
            top: 8px;
        }
        
        button {
            width: 205px;
            height: 30px;
            border-radius: 10px;
            margin-top: 10px;
            border: 1px solid red;
            background-color: red;
            color: white;
        }
        a {
            font-size: 10px;
            text-decoration: none;
            color: #000;
        }
        
        .dl {
            color: red;
        }
        
    }

注册页面

html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/register.min.css">
</head>

<body>
        <div class="register">
            <form action="./Sign in.html" method="get">
                <p class="hui">注册</p><br>
                <input type="text" placeholder="手机号邮箱" required><br>
                <input type="password" placeholder="密码" required><br>
                <input type="password" placeholder="确认密码" required><br>
                <input type="text" placeholder="验证码" required><br>
                <button>提交</button><br>
                <a href="./Sign in.html">已有帐号？<span class="dl">马上登录</span></a><br>
                <a href="#">其他方式登录<span class="dl">QQ登录 微信登录 微博登录</span></a><br>
            </form>
        </div>
</body>

</html>

scss代码

body{
    background-size: cover;
    background-image: url(../img/1.gif);
    background-repeat: no-repeat;
}
    .register{
        width: 300px;
        height: 350px;
        background-color: rgba(241, 207, 207,0.3);
        border-radius: 10px;
        margin: 150px auto;
        text-align: center;

        .hui {
            font-size: 25px;
            font-weight: bold;
            padding-top: 10px;
        }
        input {
            width: 220px;
            height: 30px;
            border-radius: 10px;
            margin-top: 10px;
            outline: none;
        }
        
        
        button {
            width: 205px;
            height: 30px;
            border-radius: 10px;
            margin-top: 10px;
            border: 1px solid red;
            background-color: red;
            color: white;
        }
        a {
            font-size: 10px;
            text-decoration: none;
            color: #000;
        }
        
        .dl {
            color: red;
        }
        
    }