<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/buy.css"/>
    </head>
    <body>
        <div class="content">
            <div class="nav">    
             <a href="index.html">首页</a>&gt;
             <a href="list.html">专辑</a>&gt;
             <span>【独家发售】大张伟2018全新专辑《人间精品》</span>
            </div>
            <div class="text">
                <div class="left">
                    <img src="img/pro/7_418x418.jpg" alt="">
                    <div>
                        <span class="love"></span>
                        <span class="num">0</span>
                    </div>
                    <img src="img/details-i.png" alt="">
                </div>
                 <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>
                        <hr />
                     </div>
                     <div><span class="dt">重量</span><span class="weight">0.33KG</span></div>
                     <div><span class="dt">数量</span><img class="imgnum" src="img/num.jpg" alt=""></div>
                     <div class="sp"><span class="cart"></span><span class="buy"></span></div>
                     <div class="fimg"><img src="img/zpbz.png" alt=""></div>
                 </div>
            </div>
            <div class="img">
                <img src="img/tuangou20180126.jpg" >
            </div>
        </div>
    </body>
</html>
.content{
    width: 1000px;
    margin: 0 auto;
}
.content .nav{
    margin: 15px 0px;
}
.content .nav a{
    text-decoration: none;
    color: #333;
    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;
    width: 12px;
    height: 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: 540px;
}
.content .right .title{
    font-weight: bold;
}
.content .right .dt{
    color: #999999;
    width: 80px;
    display: inline-block;
}
.content .right .imgnum{
    vertical-align: middle;
}
.content .right .money{
    color: #DE4767;
    font-size: 28px;
    font-weight: bolder;
}
.content .right .del{
    text-decoration: line-through;
    color: #999999;
    /*text-decoration: line-through￥83.1*/
}
.content .right div{
    line-height: 50px;
}
.content .right .sp{
    margin-top: 110px;
}
.content .right .cart{
    display: inline-block;
    width: 200px;
    height: 60px;
    background-image: url(../img/detail_btn_v1_04.png);
    background-position: 0 -5px;
    /* margin-top: 10px; */
    
}
.content .right .buy{
    display: inline-block;
    width: 200px;
    height: 60px;
    background-image: url(../img/detail_btn_v1_04.png);
    background-position: 0 423px;
    /* margin-top: 10px; */
    
}
 .content .right .fimg{
     margin-left: 10px;
 }

 ul>li>img[src=img/pro/$.jpg]+div.right>span.title+span.money+div>span.love+span.num

 

<ul>
                    <li>
                        <img src="img/pro/1.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/2.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/3.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/4.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/5.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/6.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/7.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/8.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                    <li>
                        <img src="img/pro/9.jpg" alt="">
                        <div class="right">
                            <span class="title"></span>
                            <span class="money"></span>
                            <div><span class="love"></span><span class="num"></span></div>
                        </div>
                    </li>
                </ul>

学会利用间接写法，先分析清楚结构状态

今天学习又学到了一个页面，有时光出错，老师来给查找错误，总是错在一个地方上，一定要改掉这个毛病哦~加油