随着电商的发展，越来越多的人开始选择在淘宝上购物。淘宝作为全球最大的电子商务平台，其产品页面的设计非常值得参考。

/* 代码1：淘宝产品页的整体布局 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.product {
display: flex;
justify-content: space-between;
}
.product-info {
flex: 1;
margin-right: 50px;
}
.product-img {
width: 500px;
}
/* 代码2：淘宝产品页的商品信息样式 */
.product-title {
font-size: 24px;
margin-bottom: 20px;
}
.product-price {
font-size: 20px;
color: #FF4400;
margin-bottom: 20px;
}
.product-desc {
font-size: 18px;
line-height: 1.5;
}
/* 代码3：淘宝产品页的购买、加入购物车按钮 */
.btn-buy {
display: inline-block;
text-align: center;
background-color: #FF4400;
color: #fff;
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-right: 20px;
}
.btn-cart {
display: inline-block;
text-align: center;
background-color: #fff;
color: #FF4400;
border: 1px solid #FF4400;
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

通过以上CSS代码可以实现淘宝产品页的布局和样式，其中代码1定义了整体布局，将.product和.product-info两个元素设置为flex布局，并使用justify-content属性实现两者之间的间距。代码2定义了商品信息区块的样式，通过设置字体大小、颜色和行高等属性，实现了网页最核心的内容呈现。代码3用于定义购买和加入购物车按钮的样式，其中.btn-buy按钮的背景色为红色，而.btn-cart按钮的背景色为白色，边框为红色，两者之间呈现明显对比，方便用户根据需求进行选择。