详情页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/xiangqing.css"/>
    </head>
    <body>
        <div class="content">
            <div class="nav">
                <!-- a[href=index.html]{首页}+a[href=t1.html]{专辑}+span{【独家发售】大张伟专辑首发2018} -->
                <a href="index.html">首页</a>&gt;
                <a href="t1.html">专辑</a>&gt;
                <span>【独家发售】大张伟专辑首发2018</span>
                        
                    </div>
                    <div class="text">
                        <!-- div.left>img+(div>span.love+span.num)+img -->
                        <div class="left">
                            <img src="img/img/pro/7_418x418.jpg" alt="">
                            <div><span class="love"></span><span class="num">9999</span></div>
                            <img src="img/img/details-i.png" alt="">
                        </div>
                        
                        
                        
                    
                    
                    <!-- div.right>div.title{【独家发售】大张伟专辑首发2018}+(div>span.dt+span.money+span.del)+(div>span.dt+span.weight)+(div>span.dt+img)+(div>span.cart+span.buy)+div>img -->
                    <!-- div.right>div.title{独家发售】大张伟专辑首发2018}+(div>span.dt+span.money+span.del)+(div>span.dt+span.weight)+(div>span.dt+img)+(div>span.cart+span.buy)+div>img -->
<div class="right">
    <div class="title">【独家发售】大张伟专辑首发2018</div>
    <div>
        <span class="dt">商城价格</span>
        <span class="money">￥83.1</span>
        <span class="del">￥83.1</span>
    </div>
    <hr >
    <div><span class="dt">重量</span><span class="weight">0.33kg</span></div>
    <div><span class="dt">数量</span><img src="./img/img/num.jpg" alt=""></div>
    <div><span class="cart"></span><span class="buy"></span></div>
    <div class="sp"><img src="img/zpbz.png" alt=""></div>
                    
                    </div>
                    <div class="img">
                        <img src="img/img/tuangou20180126.jpg" >
                    </div>
                    
                <div class="down">
                
                    </div>
                </div>
                <div class="footer">
                    <tfoot>
                        <a href="#">关于我们&nbsp;|&nbsp;</a>
                        <a href="#">人才招聘&nbsp;|&nbsp;</a>
                        <a href="#">联系我们&nbsp;|&nbsp;</a>
                        <a href="#">友情链接&nbsp;|&nbsp;</a>
                        <a href="#">版权声明&nbsp;|&nbsp;</a>
                        <a href="#">客服中心</a>
                        <div class="footimg">
                                
                            <div class="foottext">
                        <p><img src="img/culture.png" >Copyright&copy;2009-2016yingyuetai.com广播电视节目制作经营&nbsp;许可证编号(京)字</p>
                        <p>Copyright&copy;2009-2016yingyuetai.com广播电视节目制作经营广播电视节目制作经营广播电视节目制作经营广播电视节目制作经营&nbsp;许可证编号(京)字</p>
                        <p>Copyright&copy;2009-2016yingyuetai.com广播电视节</p>
                            </div>
                            <div class="r">
                                
                            <img src="img/ghs.png" >
                            </div>
                        </div>
                    </tfoot>
                </div>    

    </body>
</html>
---------------------------------------------------css---------------------------------------------------

.content{
    width: 1000px;
    margin: 0 auto;
}
.content .nav{
    margin: 15px 0;
}
.content .nav a{
    text-decoration: none;
    color: #333333;
    margin-right: 5px;
}
.content .nav span{
    color: #999;
}
/* 右边 */
.content .left{
    width: 418px;
    display: inline-block;
    
}
.content .left div{
    text-align: right;
}
.content .left div .love{
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image: url(../img/icon/ico.png);
    background-position: 0 -73px;
    margin-right: 5px;
}
.content .left div .num{
    color: #999999;
}
.content .right{
    display: inline-block;
    vertical-align: top;
    margin-left: 30px;
    width: 500px;
}
.content .right .title{
    font-weight: bold;
}
.content .right .dt{
    color: #999999;
    width: 80px;
    display: inline-block;
}
.content .right .money{
    color: #DE4767;
    font-size: 32px;
    font-weight: bold;
}
.content .right .del{
    text-decoration: line-through;
color: #999999;    
}
.content .right div{
    line-height: 50px;
}
.content .right .sp{
    margin-top: 110px;
}
.content .right .cart{
    display: inline-block;
    height: 60px;
    width: 200px;
    background-image: url(../img/detail_btn_v1_04.png);
    background-position: 0 -5px;
}
.content .right .buy{
    display: inline-block;
    height: 60px;
    width: 200px;
    background-image: url(../img/detail_btn_v1_04.png);
    background-position: 0 423px;
}
/* 底部 */
.down{
        background-image: url(../img/footer_v180123.png);
        background-position: -85px 0px;
        background-repeat: no-repeat;
        width: 1010px;
        height: 100px;
    }
    .footer{
        background-color: black;
        height: 200px;
        text-align: center;
        
    }
    .footer a{
        color: #999999;
        font-size: 12px;
        text-decoration: none;
        line-height: 50px;
    }
    .footer p{
        font-size: 12px;
        color: #CCCCCC;
    }
    .footer .footimg .foottext img{
        width: 20px;
        height: 20px;
    }
    .footer .r img{
        width: 40px;
        height: 40px;
    }
    .footer .footimg{
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    /* .footer .footimg .foottext{
        display: block;
        margin: 0;
    }
     */

posted @ 2021-10-28 21:30  嘎嘣脆儿  阅读(16)  评论(0)    收藏  举报