音悦4

<!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;
<a href="#">【独家发售】花京辰,吴玉祥,詹鹏,陈奥,顾珈萌</a>
</div>
<div class="text">
<div class="left">
<img src="img/pro/7_418x418.jpg" alt="" />
<div><span class="love"></span><span class="num">999</span></div>
<img src="img/details-i.png" alt="" />
</div>
<!--div.right>div.title{【独家发售】花京辰,吴玉祥,詹鹏,陈奥,顾珈萌}+(div>span.dt+span.money+span.del)+(div>span.dt+span.weight)+(div>span.dt+img)+(div>span.cart+span.buy)+div>img-->

<div id="di" style="text-align: center;">
<img src="img/footer_v180123.png"/>
</div>
</body>
</html>

 

CSS

.content {
width: 1000px;
margin: 0 auto;
}

.content .nav{
color: #333333;
margin: 20px 0;
}

.content .nav a {
text-decoration: none;
color: #333333;
}

.content .nav a:last-child{
color: #999;
}

.content .left {
width: 418px;
display: inline-block;
}

.content .left div{
text-align: right;
color: #666;
}

.content .left div .love{
display: inline-block;
width: 12px;
height: 12px;
background-image: url(../img/icon/ico.png);
background-position: 0 -73px;
margin-left: 10px;
}

.content .right {
display: inline-block;
vertical-align: top;/*顶部对齐*/
margin-left: 30px;
width: 530px;
}

.content .right div{
line-height: 50px;
}

.content .right .title {
font-weight: bolder;/*字体变黑加粗*/
}

.content .right .dt{
color: #999999;
display: inline-block;
width: 100px;
}

.content .right .money{
font-size: 28px;
color: #FF407F;
font-weight: bolder;
}

.content .right .del{
color: #999999;
text-decoration: line-through;/*字体中加个划线*/
margin-left: 20px;
}

.content .right img{
vertical-align: middle;/*垂直排序*/

}

.content .right div:nth-child(5){
margin-top: 120px;

}

.content .right .cart{
display: inline-block;
height: 66px;
width: 190px;
background-image: url(../img/detail_btn_v1_04.png);
}

.content .right .buy{
display: inline-block;
height: 66px;
width: 190px;
background-image: url(../img/detail_btn_v1_04.png);
background-position: 0 -60px;
}

 

上一篇:学习笔记


下一篇:10月28日 项目1页面 详情页和头部页