详情页面怎样写
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/xq.css"/>
</head>
<body>
<div class="qb">
<div class="nav">
<a href="sy.html">首页</a> >
<a href="zj.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><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 class="db">
<div class="tu1"></div>
<div class="tu2"></div>
<div class="tu3"></div>
<div class="tu4"></div>
<div class="tu5"></div>
</div>
</div>
<div class="db2">
<div class="top">
<p>关于我们</p>
<span>|</span>
<p>人才招聘</p>
<span>|</span>
<p>联系我们</p>
<span>|</span>
<p>友情链接</p>
<span>|</span>
<p>版权声明</p>
<span>|</span>
<p>客服中心</p>
</div>
<div class="xia">
<div class="z">
<p><img src="./img/culture.png" >Copyright @ 2009-2016 yinyuetai.com 广播电视节目制作经营 许可证编号(京)字第1891号 | 京网文[2014]2037-287号 | 网络视听许可证0110413号</p>
<p>京公网安备11010502014900号 | 京CP备11024134号-1 | 京ICPIE060716号 | 出版物经营许可证新出发京零字第朝130062号 | 增值电信业务经营许可证B2-20140501</p>
<p>食品经营许可s证:JY11105040485363 | 营业执照</p>
</div>
<div class="r">
<img src="img/biaoshi.gif" >
</div>
</div>
</div>
</div>
</body>
</html>
css代码
.qb{
width: 1000px;
margin: 0 auto;
}
.qb .nav{
margin: 15px 0;
}
.qb .nav a{
text-decoration: none;
color:#333333;
margin-right: 5px;
}
.qb .nav span{
color:#999;
}
.qb .left div{
text-align: right;
}
.qb .left{
width: 418px;
display: inline-block;
}
.qb .left div .love{
display: inline-block;
width: 12px;
height: 12px;
background-image: url(../img/icon/ico.png);
background-position: 0 -73px;
margin-right: 5px;
}
.qb .left div .num{
color: #999999;
}
.qb .right{
display: inline-block;
vertical-align: top;
margin-left: 30px;
width: 540px;
}
.qb .right .title{
font-weight: bold;
}
.qb .right .dt{
color: #999999;
width: 80px;
display: inline-block;
}
.qb .right .money{
color: #DE4767;
font-size: 28px;
font-weight: bolder;
}
.qb .right .del{
text-decoration: line-through; /* 经过的一条线 */
color: #999999;
}
.qb .right div{
line-height: 50px;
}
.qb .right .sp{
margin-top: 110px;
}
.qb .right .cart{
display: inline-block;
height: 60px;
width: 200px;
background-image: url(../img/detail_btn_v1_04.png);
background-position: 0 -5px;
}
.qb .right .buy{
display: inline-block;
height: 60px;
width: 200px;
background-image: url(../img/detail_btn_v1_04.png);
background-position: 0 423px;
}
.qb .db{
margin-top: 40px;
}
.qb .db div{
display: inline-block;
width: 190px;
height: 50px;
background-position: -84px -4px;
background-repeat:no-repeat ; /* 不平铺显示 不重复 */
background-image: url(../img/footer_v180123.png) ;
}
.qb .db .tu2{
background-position: -273px -4px;
}
.qb .db .tu3{
background-position: -462px -4px;
}
.qb .db .tu4{
background-position: -651px -4px;
}
.qb .db .tu5{
background-position: -875px -4px;
width: 220px;
}
.db2{
background: black;
height: 200px;
margin-top: 25px;
text-align: center;
color: #999999;
}
.db2 .top p{
display: inline-block;
margin: 0px;
padding: 0px;
margin-top: 25px;
color:#999999;
}
.db2 .z p{
line-height: 15px;
font-size: 15px;
color: #CCCCCC;
}
.db2 .z img{
width: 30px;
height: 30px;
}
.db2 .r img{
width: 50px;
height: 60px;
}
.db2 .xia{
display: flex;
justify-content: center;
align-items: center;
}
使用了flex布局 书写更方便
标签：right,width,qb,详情,background,页面,margin,display,怎样 来源： https://www.cnblogs.com/nky1215/p/15477840.html