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>>
<!-- >--大于（>）号 < --小于(<) ； --》空格 -->
<a href="list.html">专辑</a>>
<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;
}