Practical Training Demo1-购买buy（10.29）

HTML内容部分：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/buy.css" />
    </head>
    <body>
        <iframe src="head.html" width="100%" height="196px"></iframe>
        <div class="content">
            <div class="nav">
                <!-- 导航部分 -->
                <!-- a[href=index.html]{首页}+a[href=list.html]{专辑}+span{【独家发售】张大伟2021专辑} -->
                <a href="index.html">首页</a>&gt;
                <!-- &gt;--大于（>）号 &lt; --小于(<)  ；&nbsp;--》空格 -->
                <a href="list.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/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中没有+时可以把（）去掉直接tab生成 -->
                <!-- 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/num.jpg" alt=""></div>
                    <div class="sp"><span class="cart"></span><span class="buy"></span></div>
                    <div><img src="img/zpbz.png" alt=""></div>
                </div>
            </div>
            <div class="img">
                <img src="img/tuangou20180126.jpg">
            </div>
            
        </div>
        <!-- <div class="dibu">
            <ul>
                <li><a href="">关于我们|</a></li>
            </ul>
        </div> -->
        <div class="tp">
            <img src="img/footer_v180123.png">
            <iframe src="foot.html"  width="100%" height="200px"></iframe>
        </div>
    </body>
</html>

 

CSS内容部分：

 

*{
    margin: 0;
    padding: 0;
}
iframe{
    /*  */
    overflow: hidden;
    border: none;
    margin-bottom: -4px;
}

.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: #999999;
}

.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-repeat: no-repeat;
    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 .money{
    color: #DE4767;
    font-size: 28px;
    font-weight: bolder;
}
.content .right .del{
    /*  line-through  一根经过它的线 */
    text-decoration: line-through;
    color: #999999;
}
.content .right div{
    min-height: 50px;
}
.content .right .sp{
    margin-top: 110px;
    margin-bottom: 30px;
}
.content .right .cart{
    display: inline-block;
    height: 60px;
    width: 200px;
    background-image: url(../img/detail_btn_v1_04.png);
    background-position: 0 -7px;
}
.content .right .buy{
    display: inline-block;
    height: 60px;
    width: 200px;
    background-image: url(../img/detail_btn_v1_04.png);
    background-position: 0 -64px;
}
/* 页脚 */
.tp{
    width: 100%;
    background: #FFFFFF;
    text-align: center;
}
.tp img{
    height: 70px;
    line-height: 70px;
}

 

posted @ 2021-10-29 16:50  小张同学的派大星吖  阅读(20)  评论(0)  编辑  收藏  举报