音悦Tai HTML+CSS/SCSS项目

最新推荐文章于 2023-05-22 08:53:35 发布

CYSDLN

最新推荐文章于 2023-05-22 08:53:35 发布

阅读量607

点赞数 1

分类专栏：学习笔记文章标签： html css scss

本文链接：https://blog.csdn.net/CYSNLD/article/details/126165107

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

导航部分

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

<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/two.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <base href="" target="_top">

</head>

<body>
    <header>
        <div class="head_1">
            <!--官方联系方式 -->
            <a href="#"><img src="../img/head/log.png" alt=""></a>
            <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="./one.html">购物须知</a></li>
            </ul>
        </div>
        <div class="head_2">
            <!--中间搜索栏 -->
            <!-- logo -->
            <img src="../img/head/logo.png" alt="">
            <!-- <span></span> -->
            <!-- 搜索框 -->
            <div class="search">
                <input type="text" placeholder="搜索偶像、商品">
                <a href="#"></a>
            </div>
            <div class="dl_1">
                <ul>
                    <li>
                      <img src="./img/head/avatar.png" alt="" />
                      <a href="./six.html">登录</a>
                    </li>
                    <li>
                      <a href="#">我的订单</a>
                    </li>
                    <li>
                      <img src="./img/head/cart.png" alt="" />
                      <a href="#">购物车</a>
                    </li>
                  </ul>
            </div>
        </div>
        <div class="head_3">
            <!--列表 -->
            <ul>
                <li><a href="#">艺人分类</a></li>
                <li><a href="./three.html">首页</a></li>
                <li><a href="./five.html">专辑</a></li>
                <li><a href="./goods.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>
            </ul>
        </div>
    </header>
    
</body>

</html>

顶部-SCSS代码

header {
    width: 100%;
    margin: 0 auto;
    background-color: #222222;

    .head_1 {
        display: flex;
        justify-content: space-between; //两端对其
        margin-left: 50px;
        background-color: #222222;

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

                a {
                    color: white;

                    &:hover {
                        color: #222222;
                    }
                }

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

                //给li标签添加一个鼠标停留效果，目前是让对应的二维码显示出来
                &:hover img {
                    display: block;
                }

                &:hover {
                    background-color: white;
                }

                &:hover:nth-child(3):hover {
                    background-color: #222222;
                }

                &:nth-child(3):hover a {
                    color: #fb02e4;
                }
            }
        }
    }

    .head_2 {
        height: 90px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #222222;
        border-bottom: 2px solid rgb(101, 101, 101);

        img {
            position: relative;
            left: -60px;
        }

        .search {
            position: relative;
            margin-top: 20px;

            input {
                width: 435px;
                height: 42px;
                outline: none;
                position: relative;
                left: -300px;
                border: 0;
                padding-left: 25px;
                background: url(../../img/head/search_icon.png) 0 -43px;

                &:focus {
                    background: url(../../img/head/search_icon.png)0 0;
                }

                &:focus+a {
                    background: url(../../img/head/search_icon.png) -457px -45px;
                }

                margin: 0 auto;
            }

            a {
                display: inline-block;
                width: 30px;
                height: 30px;
                position: absolute;
                background: url(../../img/head/search_icon.png) -457px -5px;
                top: 5px;
                right: 320px;
            }
        }

        
            ul {
                width: 128%;
                display: flex;
                justify-content: space-between;

                li {
                    display: flex;
                    align-items: center;

                    img {
                        width: 30px;
                        height: 30px;
                        left: -10px;
                    }

                    a {
                        color: #fff;
                        // display: flex;
                    }
                }
            }
        
    }

    .head_3 {
        width: 100%;
        height: 60px;

        ul {
            display: flex;
            justify-content: center;

            li {
                font-size: 25px;

                a {
                    color: white;
                    margin: 10px;

                    &:hover {
                        color: red;
                        border-bottom: 3px solid red;
                    }
                }
            }
        }
    }
}

首页部分

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

<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/three.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <base href="" target="_top">
</head>

<body>
    <iframe src="./two.html" width="100%" height="188" frameborder="0"></iframe>

    <header>
        <div class="demo1">
            <div><img src="../img/index/banner/1.jpg" alt="">
                <img src="../img/index/banner/2.jpg" alt="">
                <img src="../img/index/banner/3.jpg" alt="">
                <img src="../img/index/banner/4.jpg" alt="">
            </div>

        </div>
        <div class="jlt1"></div>
        <div class="demo2">
            <!-- <p>追星必备</p> -->

            <ul>
                <li>
                    <img src="../img/index/necessary/1.png" alt="">
                    <a href="#">官方应援手灯专区</a>
                </li>
                <li>
                    <img src="../img/index/necessary/2.gif" alt="">
                    <a href="#">官方应援手幅专区</a>
                </li>
                <li>
                    <img src="../img/index/necessary/3.png" alt="">
                    <a href="#">官方商品专区</a>
                </li>
                <li>
                    <img src="../img/index/necessary/4.gif" alt="">
                    <a href="#">官方DVD专区</a>
                </li>
                <li>
                    <img src="../img/index/special.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="jlt2"></div>
        <div class="demo3">
            <ul>
                <li>
                    <img src="../img/index/top/a/toplist_a01.jpg" alt="">
                    <a href="#">薛之谦</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a02.jpg" alt="">
                    <a href="#">iKON</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a03.jpg" alt="">
                    <a href="#">鹿晗</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a04.jpg" alt="">
                    <a href="#">GOT7</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a05.jpg" alt="">
                    <a href="#">EXO</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a06.jpg" alt="">
                    <a href="#">Astro(韩国)</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a07.jpg" alt="">
                    <a href="#">Winner</a>
                </li>
                <li>
                    <img src="../img/index/top/a/toplist_a08.jpg" alt="">
                    <a href="#">BigBang</a>
                </li>
            </ul>
        </div>
    </header>
    <div class="jlt3"></div>
    <div class="zb">
        <div>
            <img src="./img/1.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>
            <span></span>
        </div>
        <div>
            <img src="./img/2.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>

        </div>
        <div>
            <img src="./img/3.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>
        </div>
        <div>
            <img src="./img/4.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>

        </div>
        <div>
            <img src="./img/5.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>

        </div>
        <div>
            <img src="./img/6.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>

        </div>
        <div>
            <img src="./img/7.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>
        </div>
        <div>
            <img src="./img/8.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>

        </div>
        <div>
            <img src="./img/9.jpg" alt="">
            <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
            <p>￥50</p>

        </div>

    </div>
    <iframe src=".//four.html" width="100%" height="370" frameborder="0"></iframe>
</body>

</html>

首页-SCSS部分

header {
    width: 100%;
    overflow-x: hidden;
    .demo1 {
        width: 76%;
        margin: 0 auto;
        overflow: hidden;
        // border: 1px solid red;



        div {
            display: flex;

            &:hover {
                animation: xxx 5s;

            }
        }


    }

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

    .demo2 {
        width: 80%;
        margin-left: 155px;

        ul {
            display: flex;



            li {
                // background: url(../../img/index/title.png)0 0 no-repeat;
                background-color: rgb(225, 225, 225);
                margin: 10px;
                text-align: center;

                a {
                    color: rgb(162, 117, 57);
                }
            }

            img {
                width: 200px;

                margin: 0 auto;

                &:last-child {
                    height: 115%;
                    width: 300px;
                }
            }
        }
    }
    .jlt2 {
        width: 80px;
        height: 82px;
        background: url(../../img/index/title.png)0 0 no-repeat;
        margin-left: 170px;
        margin-top: -60px;
    }
    .demo3 {
        width: 100%;
        margin-left: 140px;

        ul {
            display: flex;

            li {
                background-color: rgb(225, 225, 225);
                margin: 10px;
                text-align: center;

                a {
                    color: black;
                }
            }

            img {
                width: 113px;
                height: 110px;
                border: 10px solid white;

            }
        }
    }
}
.jlt3 {
    width: 80px;
    height: 153px;
    background: url(../../img/index/title.png)0 0 no-repeat;
    margin-left: 165px;
    margin-top: -100px;
}
.zb {
    margin-top: 80px;
    width: 74%;
    height: 660px;
    margin: 0 auto;
    background-color: rgb(225, 225, 225);
    color: white;
    border: 1px solid red;

    div {
        width: 350px;
        height: 200px;
        background-color: rgb(245, 246, 250);
        float: left;
        margin: 12px;
        animation: name 3s;

        &:hover {
            box-shadow: 0 5px 0 rgb(255, 129, 150);
        }
    }

    img {
        width: 180px;
        height: 200px;
        position: absolute;
        line-height: 200px;


    }

    p {
        width: 145px;
        height: 100px;
        margin: 0 auto;
        position: relative;
        left: 90px;
        color: black;

        /*精灵图*/
        span {
            background-image: url(./img/ico.png);
            font-size: 12px;
        }
    }

    @keyframes name {
        from {
            filter: blur(5px);
            transform: scale(0.8);
        }

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

        }
    }
}

@keyframes xxx {
    25% {
        transform: translateX(-1200px);
    }

    50% {
        transform: translateX(-2400px);
    }

    75% {
        transform: translateX(-3600px);
    }

    100% {
        transform: translateX(0);
    }
}

商品分类界面

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

<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>Document</title>
    <link rel="stylesheet" href="./css/goods.min.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <iframe src="./two.html" width="100%" height="188" frameborder="0" ></iframe>
    <header>
        <div class="list_nav">
            <div class="zj-info">
                <ul class="f-type">
                    <li class="type-tit">分类</li>
                    <li>原版</li>
                    <li>签名版</li>
                    <li>内地引进版</li>
                    <li>演唱会DVD/LIVE</li>
                    <li>限量版</li>
                    <li>贴纸/文件夹/笔记本</li>
                </ul>
                <ul class="s-type">
                    <li class="type-tit">公司</li>
                    <li>MBK Entertainment</li>
                    <li>环球唱片</li>
                    <li>一人工作室</li>
                    <li>英皇娱乐</li>
                    <li>Fantagio</li>
                    <li>乐华娱乐</li>
                    <li>Woolim</li>
                    <li>WM Entertainment</li>
                    <li class="type-tit"></li>
                    <li>相信音乐</li>
                    <li>TS Entertainment</li>
                    <li>环球中国</li>
                    <li>华纳唱片</li>
                    <li>天娱传媒</li>
                    <li>LOEN Entertainment</li>
                </ul>
            </div>
        </div>
        </div>
        <div class="list_type">
            <div>
                <img src="./img/pro/1.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>
            </div>
            <div>
                <img src="./img/pro/2.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>
            </div>
            <div>
                <img src="./img/pro/3.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>            </div>
            <div>
                <img src="./img/pro/4.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>
            </div>
            <div>
                <img src="./img/pro/5.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>
            </div>
            <div>
                <img src="./img/pro/6.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>
            </div>
            <div>
                <img src="./img/pro/7.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>
            </div>
            <div>
                <img src="./img/pro/8.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>

            </div>
            <div>
                <img src="./img/pro/7.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>

            </div>
            <div>
                <img src="./img/pro/1.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>

            </div>
            <div>
                <img src="./img/pro/2.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>

            </div>
            <div>
                <img src="./img/pro/5.jpg" alt="">
                <p>【现货包邮】加一联创1more bear万魔熊 头戴式耳机支架公仔熊[K14]</p>
                <p>￥50                <span>5465454556</span></p>

            </div>
        </div>
    </header>
    <iframe src=".//four.html" width="100%" height="370" frameborder="0"></iframe>
</body>

</html>

商品分类界面-SCSS部分

header {
    .list_nav {
        width: 80%;
        margin: 0 auto;
        overflow: hidden;

        p {
            margin: 10px 0;
        }

        .zj-info {
            padding: 0 10px;
            border: 1px solid red;

            .type-tit {
                width: 50px;
                font-weight: bold;
                color: #000;
            }

            ul {
                width: 100%;

                &:first-child {
                    border-bottom: 2px dotted white;
                }

                li {
                    width: 140px;
                    height: 8px 0;
                    color: #979797;
                    display: inline-block;
                }
            }
        }
    }

}

.list_type {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    grid-template-rows: repeat(4, 350px);
    column-gap: 25px;
    row-gap: 25px;
    margin-left: 130px;
    margin-top: 50px;

    div {
        border: 1px solid red;
        background-color: aqua;

        img {
            width: 100%;
        }

        p {
            font-size: 12px;
            color: darkgray;
            background: url(./img/icon/ico.png)-381px -35px no-repeat;

            &:nth-child(3) {
                margin-left: 70px;
                color: red;
            }

            span {
                color: darkgray;
                margin-left: 100px;

            }
        }
    }
}

商品详情

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

<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/five.min.css">
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
</head>

<body>
    <iframe src="./two.html" width="100%" height="188" frameborder="0" ></iframe>
    <div class="ym">
        <div class="dh">
            <p>
                <a href="./three.html"><b>首页</b></a>
                <a href="">><b>专辑</b></a>
                > <span>【独家首发】大张伟2018全新专辑《人间精品》</span>
            </p>
        </div>

        <div class="tp">
            <img src="./img/goods/demo.jpg" alt="">
            <h3>【独家首发】大张伟2018全新专辑《人间精品》</h3>
        </div>
        <div class="jg">
            <p>商城价格
                <a href="#">￥99.9</a>
                <span><s>198</s></span>
            </p>
        </div>
        <div class="zl"></div>
        <p>重量<span>0.33kg</span></p>
        <p>重量<span><img src="./img/goods/num.jpg" alt="" width="75px"></span></p>
        <div class="zll">
            <a href="#" class="t1"></a>
            <a href="#" class="t2"></a>
        </div>
        <div class="z1"><img src="./img/goods/zpbz.png" alt=""></div>

    </div>
    <iframe src=".//four.html" width="100%" height="370" frameborder="0"></iframe>
</body>

</html>

商品界面-SCSS

body {
    width: 100%;
    height: 50%;
    margin: 0 auto;
}

.ym {
    width: 600px;
    width: 980px;
    margin: 0 auto;

    .dh {
        position: relative;
        left: -550px;
        a {
            text-decoration: none;
            color: black;

            span {
                color: #fff;
            }
        }
    }

    .jg {
        p {
            color: rgb(117, 81, 81);
        }

        a {
            font-size: 30px;
            color: red;
            text-decoration: none;
        }
    }

    .tp {
        img {
            float: left;
        }

        h3 {
            margin-left: 500px;
        }
    }

    .zl {
        margin-left: 450px;
        height: 1px;
        width: 400px;
        background-color: #cccccc;
    }

    p {
        color: #999999;
        font-size: 10px;
        margin-left: 500px;
        margin-top: 20px;

        span {
            margin-left: 30px;
        }
    }

    .zll {
        margin-top: 140px;
        margin-left: 430px;

        .t1 {
            display: inline-block;
            height: 60px;
            width: 190px;
            background-color: coral;
            background: url(../img/goods/btns.png) no-repeat 0 0;
        }

        .t2 {
            display: inline-block;
            height: 60px;
            width: 190px;
            background-color: coral;
            background: url(../img/goods/btns.png) no-repeat 0px -60px;
        }
    }

    .z1 {
        margin-top: 10px;
        margin-left: 450px;
    }

    .z2 {
        margin-top: 20px;
    }

    .z3 {
        margin-top: 20px;
    }
}

商品须知

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物须知</title>
    <link rel="stylesheet" href="./css/one.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <base href=""target="_top">
</head>
<body>
    <iframe src="./two.html" width="100%" height="188" frameborder="0" ></iframe>
    <div class="page">
        <div class="page_head">
            <h2 class="page_title">购物须知</h2>
            <ul><span></span>
                <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><br>
            </ul>
        </div>
        <div class="page_content">
            <div class="mod" id="mod1">
                <div class="content_title">
                </div>
                <div class="content">
                    <p>预定商品:非现货的商品，为确保供货数量以及避免过量囤积，因此将通过收取预定金的形式进行把控，且无论是哪种形式的预定商品，预定金一旦支付成功,均不予以退还，敬请周知.</p>
                    <p>如预定商品为全款预定金商品，那么商品正式发行后，则会直接发货;</p>
                    <p>如预定商品为定额预定金商品（众筹预定)，那么商品正式发行后，则需再补充支付尾款。如若不支付尾款，预定金则不予以退还。</p>
                    <p>预定金是指商品正式发行前夕，预定购买时所支付的一定数额的金钱作为担保。</p>
                    <p>预定商品的预定金分为全款预定金和定额预定金两种形式。</p>
                </div>
            </div>
            <div class="mod" id="mod2">
                <div class="content_zhuan"></div>
                <div class="content">
                    <p>商城发售的海外专辑的全款价格内包含专辑定价+国际邮费+关税+增值税+审批费用，不含国内邮费。</p>
                    <p>如专辑为众筹预定商品，则专辑发行后会短信通知补款，补款成功后同步计入专辑销量（韩国专辑计入Hanteo Chart销量榜)。</p>
                </div>
            </div>
            <div class="mod" id="mod3">
                <div class="content_fa"></div>
                <div class="content">
                    <img src="../img/buyer/1.jpg" alt="">
                    <p>补充说明:</p>
                    <p>商城发售的海外进口专辑均为预售专辑;</p>
                    <p>进口外文原版专辑需要报批审核，并加贴「国家专用进口防伪标识」贴纸。审核周期约为20个工作日，因需用实体专辑报批，所以在专辑正式发行后才可递交报批材料。</p>
                    <p>另外，国际运输+中国海关开箱验货+通关周期约为2周左右。</p>
                    <p>预售海外专辑预计将于专辑正式发售后40个工作日内发货。当专辑发行时间与法定假日冲撞时，则会进行顺延，具体时间将根据当时情况另行通知。(此为参考时间，发货时间以实际情况为准)</p>
                </div>
            </div>
            <div class="mod" id="mod4">
                <div class="content_kuai"></div>
                <div class="content">
                    <p>订购众筹商品时暂不需要支付邮费，商品补款时支付国内邮费。</p>
                    <p>全款预定订单下单时支付国内运费。</p>
                    <p>邮费计算说明:</p>
                    <img src="../img/buyer/2.jpg" alt="">
                    <p>商城委托第三方快递公司为客户提供送货服务，客户无须向快递公司支付额外的费用。客户可在商城“我的订单”查询货物配送信息，也可以登录第三方快递网站查询快递信息。</p>
                    <p>注意:港澳台地区的用户下单后需联系商城QQ客服补运费后才能正常发货。</p>
                    <p>下单时请在留言区备注可以联系上的QQ，若没有QQ，请留下邮箱地址，以便工作人员与您取得联系。</p>

                </div>
            </div>
            <div class="mod" id="mod5">
                <div class="content_tui"></div>
                <div class="content">
                    <p>商品售出后，如无质量问题不予退换，不接受如<strong>不喜欢、和想象的不一样、有色差</strong>等主观因素的退换要求.</p >
                    <p>快递签收后7日内，如出现非人为因素的损坏，或密封包装内的商品有缺失等质量问题，需提供电子订单，商品和快递外包装完整图片，联系音悦商城售后有服进行退、换货。<p>
                    <p>如因商械的原因出现少发、漏发等情况，可联系商城客服凭商城购物订单号确认后进行补发;如出现发错件的情况，可在保持专辑包装完好、不影响二次销售的状态下，进行更换，已拆封的音像制品将无法受理退、换货，请您谅解。</p >
                    <p style="color: #e64560;">缺失商品的补发、损坏商品换货的邮费均由商城承担。</p >    
                    <p style="background-color: #e64560; color: white; padding: 1% 1% 1% 1%; font-size: 18px;">要进行退、换货时，需将退、换商品寄回，请您先垫付寄回运费，后联系商城客服进行退邮费。寄回商品时请发普通快递，不要使用顺丰到付，否则将拒收，退邮费上限为15元，超出部分将由您自己承担，敬请谅解</p >
                    <p>请您—定要当快递员的面拆件检查货品是否完好后再行签收。如有破损请不要签收，并交与快递员原件退回。</p >
                    <p>如未检查就签收包裹而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担。</p >
                    <p>请惚—定保证收货信息正确，联系电话畅通。如因买家原因，快递公司人员未能与买家联系到，导致无法正常收货或货品退回出现的商城二次发货，需要买家补款二次邮费。</p >
                </div>
            </div>
        </div>
    </div>
    <iframe src=".//four.html" width="100%" height="370" frameborder="0"></iframe>
</body>
</html>

商品须知-SCSS


.page{
    width: 80%;
    margin: 0 auto;
    .page_head{
        text-align: center;
        margin-bottom: 50px;
    }
    h2{
        text-align: center;
        color: #de4767;
    }
    ul{
        margin-top: 15px;
        li{
            display: inline-block;
            background: url(../img/buyer/mod_circle.png) 0 0 no-repeat;
            background-position: center top;
            margin: 0px 20px;
            a{
                display: inline-block;
                padding-top: 35px;
            }
            &:hover{
                background: url(../img/buyer/mod_circle.png) 0 -99px no-repeat;
            }
            }
        }

        .page_content{
            .content_title{
                margin-top: 3%;
                margin-bottom: 1%;
                width: 800px;
                height: 60px;
                background: url(../../img/buyer/mod_title.png) 0 -185px no-repeat;
                margin-left: 10px;
            }
            .content{
                border: 1px solid #ccc;
                border-radius: 10px ;
                margin: 2px 2px 2px 2px ;
                padding: 15px 15px 15px 15px ;
                p{
                    padding-top: 1%;
                    text-indent:36px;
                }
                img{
                  margin: 0 auto;
                  margin-top:2% ;
                  margin-bottom: 3%;
                }
            }
        }
        .page_content{
            .content_zhuan{
                margin-top: 3%;
                margin-bottom: 1%;
                width: 800px;
                height: 60px;
                background: url(../img/buyer/mod_title.png) 0 0px no-repeat;
                margin-left: 10px;
            }
        }
        .page_content{
            .content_fa{
                margin-top: 3%;
                margin-bottom: 1%;
                width: 800px;
                height: 60px;
                background: url(../img/buyer/mod_title.png) 0 -90px no-repeat;
                margin-left: 10px;
            }
        }
        .page_content{
            .content_kuai{
                margin-top: 3%;
                margin-bottom: 1%;
                width: 800px;
                height: 60px;
                background: url(../img/buyer/mod_title.png) 0 -280px no-repeat;
                margin-left: 10px;
            }
        }
        .page_content{
            .content_tui{
                margin-top: 3%;
                margin-bottom: 1%;
                width: 800px;
                height: 60px;
                background: url(../img/buyer/mod_title.png) 0 -580px no-repeat;
                margin-left: 10px;
            }
        }
}

底部

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

<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/four.min.css">
       
    <link rel="stylesheet" href="./css/reset.css">
    <base href="" target="_top">
</head>

<body>

        <footer>
        <img class="footer-img " src="../img/footer/footer.png" alt="">
                <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 {
    .footer-img {
        margin: auto;
        width: 70%;
        
    }   

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

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

            li {
                display: inline-block;
                width: 100px;
                border-right: 1px solid white;

                &: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: -20px;
            }

            &:nth-child(2) img {
                width: 25px;
                position: relative;
                left: 285px;
                top: 21px;
            }

            &:nth-child(3) img {
                width: 40px;
                // position: relative;
                // left: 500px;
                margin-left: 1220px;
                margin-top: -65px;
                
            }
        }

    }
}