HTML页面
<!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>>
<a href="list.html">专辑</a>>
<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>
</div>
<hr/>
<div>
<span class="dt">重量</span>
<span class="weight">0.33kg</span>
</div>
<div class="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="tubiao">
<img src="img/footer_v180123.png" >
</div>
<div class="bottom">
<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>
<div class="content">
<div class="left">
<div class="tu1">
<img src="img/culture.png" >
</div>
<span>Copyright @ 2009-2016 yinyuetai.com 广播电视节目制作经营 许可证编号(京)字第1891号 | 京网文[2014]2037-287号 | 网络视听许可证0110413号</span>
<div class="font2">
<p>京公网安备11010502014900号 | 京CP备11024134号-1 | 京ICPIE060716号 | 出版物经营许可证新出发京零字第朝130062号 | 增值电信业务经营许可证B2-20140501</p>
<p>食品经营许可s证:JY11105040485363 | 营业执照</p>
</div>
</div>
<div class="right">
<img src="img/biaoshi.gif" >
</div>
</div>
</div>
</body>
</html>
CSS页面
body{
padding: 0;
margin: 0;
}
.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 .love{
display: inline-block;
width: 12px;
height: 12px;
background-image:url(../img/icon/ico.png) ;
background-repeat: no-repeat;
background-position: 0px -72px; //背景图片位置
margin-right: 5px;
}
.content .left .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{
display: inline-block;
color: #999999;
width: 80px;
}
.content .right .money{
color: #DE4767;
font-size: 28px;
font-weight: bolder;
}
.content .right .del{
text-decoration: line-through; /*text-decoration: line-through; 删除线 经过它的一条线*/
color: #999999;
}
.content .right div{
line-height: 50px;
}
.content .right .div{
position: relative; //相对定位 在父元素上设置
}
.content .right .div img{
position: absolute; //绝对定位 在子元素上设置
top: 10px;
}
.content .right .sp{
margin-top: 115px;
}
.content .right .cart{
display: inline-block;
height: 55px;
width: 200px;
background-image: url(../img/detail_btn_v1_04.png);
background-position: 0 -7px;
}
.content .right .buy{
display: inline-block;
height: 55px;
width: 200px;
background-image: url(../img/detail_btn_v1_04.png);
background-position: 0 -64px;
}
.tubiao{
text-align: center;
margin-top: 20px;
}
.tubiao img{
margin-left:40px;
margin-right:40px;
}
.bottom{
background-color: #222222;
color: white;
font-size: 12px;
text-align: center;
padding-bottom: 15px;
}
.bottom .content{
margin: 0 auto;
}
.bottom ul{
list-style: none;
}
.bottom .tu1{
display: inline-table;
width: 20px;
height: 20px;
}
.bottom .tu1 img{
width: 20px;
height: 20px;
}
.bottom a{
text-decoration: none;
color: #CCCCCC;
}
.bottom ul li{
display: inline-block;
margin-top: 30px;
margin-bottom: -30px;
width: 80px;
padding: 0;
border-right:1px dashed #CCCCCC;
}
.bottom ul li:last-child{
border: none;
}
.bottom .left{
width: 900px;
text-align: center;
}
.bottom .right{
display: inline-table;
text-align: right;
width: 40px;
margin-left: -10px;
}
.bottom .content .font2{
text-align: center;
}
