宝贝详情页是电商平台上至关重要的一环，其中的CSS代码编写关系到整个页面的美观程度和用户体验。下面我们就来说一下如何编写宝贝详情页的CSS代码。

/* 布局部分 */
.container {
max-width: 1260px;
margin: 0 auto;
padding: 20px;
}
/* 标题部分 */
.title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
/* 商品图片部分 */
.product-img {
max-width: 600px;
margin-bottom: 20px;
}
/* 商品价格和属性部分 */
.price {
font-size: 18px;
color: #ff5353;
margin-bottom: 10px;
}
.attr {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
/* 商品描述部分 */
.desc {
font-size: 16px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
/* 购买按钮 */
.buy-btn {
display: inline-block;
background-color: #ff5353;
color: #fff;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.buy-btn:hover {
background-color: #ff7373;
}

以上代码是一个简单的宝贝详情页布局样式，其中调整了标题、商品图片、商品价格和属性、商品描述和购买按钮的样式。具体而言：

• .container设定了最大宽度、自动居中和间距。
• .title设定了字体大小、加粗、颜色和底部间距。
• .product-img设定了图片最大宽度和底部间距。
• .price设定了字体大小、颜色和底部间距。
• .attr设定了字体大小、颜色和底部间距。
• .desc设定了字体大小、颜色、行高和底部间距。
• .buy-btn设定了背景颜色、字体颜色、字体大小、内边距、边框和圆角。鼠标悬浮时背景颜色会变浅。

以上是一个简单的CSS样式，不同的电商平台还有不同的需求。但是无论怎样变化，关键是良好的代码风格和习惯，这样才能使代码可读性强、易于维护和扩展。