天猫前端系列教材（二十三）- 产品页面

工具版本兼容问题

15分13秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器。如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的视频下载插件会影响播放，如 IDM 等，请关闭或者切换其他浏览器

步骤 1 : 效果
步骤 2 : 布局
步骤 3 : 纯html
步骤 4 : 加上样式
步骤 5 : 样式讲解
步骤 6 : 再整合在一起

步骤 1 :

效果

edit 顶折

纠问

每种商品都有5个详细图片，而且这些图片都比较大。为了加快显示的速度，讲解的时候，只使用一个图片。

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> div.productDetailDiv{ width: 790px; margin: 40px auto; } div.productDetailTopPart{ border: 1px solid #DFDFDF; border-left-width: 0px; } a.selected{ border-left: 1px solid #cfbfb1; border-right: 1px solid #cfbfb1; color: #b10000; display: inline-block; font-weight: bold; line-height: 46px; width: 90px; text-align: center; position: relative; } a.selected:before{ content:""; display: block; border-width: 1px; border-color: #b00000; border-style: solid; width: 90px; height: 0; position: absolute; top: -1px; margin-left: -1px; } a.selected:after{ content: ""; display: block; border-color: #b00000 transparent transparent; border-style: solid; border-width: 5px; width: 0; height: 0; position: absolute; top: -1px; left: 50%; margin-left: -5px; } a.productDetailTopReviewLink{ padding: 0px 20px; border-right: 1px dotted #D2D2D2; color: #333333; } span.productDetailTopReviewLinkNumber{ color: #3355B9; } div.productParamterPart{ border: 1px solid #DFDFDF; padding: 40px; } div.productParamter{ color: #999999; font-weight: bold; margin-bottom: 20px; } div.productParamterList span{ display: block; width: 220px; float: left; padding: 8px 0px; color: #666666; } div.productDetailImagesPart img{ display: block; width: 790px; margin:20px 0px; } body{ font-size: 12px; font-family: Arial; } a:hover{ text-decoration:none; color: #C40000; } </style> <div class="productDetailDiv" style="display: block;"> <div class="productDetailTopPart"> <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a> <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a> </div> <div class="productParamterPart"> <div class="productParamter">产品参数：</div> <div class="productParamterList"> <span>材质成分: 聚酯纤维100% </span> <span>品牌: Emyche/艾米秋 </span> <span>货号: 129668 </span> <span>尺码: L M S XL X </span> <span>上市年份季节: 2016年夏季 </span> <span>颜色分类: 白色黑色浅蓝 </span> <span>适用年龄: 18-25周岁 </span> </div> <div style="clear:both"></div> </div> <div class="productDetailImagesPart"> <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg"> </div> </div>

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.productDetailDiv{
	width: 790px;
	margin: 40px auto;
}
div.productDetailTopPart{
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}
a.selected{
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}
a.selected:before{
	content:"";
	display: block;
	border-width: 1px;
	border-color: #b00000;
	border-style: solid;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}
a.selected:after{
	content: "";
	display: block;
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}
a.productDetailTopReviewLink{
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}
span.productDetailTopReviewLinkNumber{
	color: #3355B9;
}
div.productParamterPart{
	border: 1px solid #DFDFDF;
	padding: 40px;
}
div.productParamter{
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}
div.productParamterList span{
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}
div.productDetailImagesPart img{
	display: block;
	width: 790px;
	margin:20px 0px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.productDetailDiv{
	width: 790px;
	margin: 40px auto;
}
div.productDetailTopPart{
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}
a.selected{
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}
a.selected:before{
	content:"";
	display: block;
	border-width: 1px;
	border-color: #b00000;
	border-style: solid;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}
a.selected:after{
	content: "";
	display: block;
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}
a.productDetailTopReviewLink{
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}
span.productDetailTopReviewLinkNumber{
	color: #3355B9;
}
div.productParamterPart{
	border: 1px solid #DFDFDF;
	padding: 40px;
}
div.productParamter{
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}
div.productParamterList span{
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}
div.productDetailImagesPart img{
	display: block;
	width: 790px;
	margin:20px 0px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

渲染中渲染完成

效果

步骤 2 :

布局

edit 顶折

纠问

增值内容，请先登录

模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释），涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 3 :

纯html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

渲染中渲染完成

效果

步骤 4 :

加上样式

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.productDetailDiv{
	width: 790px;
	margin: 40px auto;
}
div.productDetailTopPart{
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}
a.selected{
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}
a.selected:before{
	content:"";
	display: block;
	border-width: 1px;
	border-color: #b00000;
	border-style: solid;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}
a.selected:after{
	content: "";
	display: block;
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}
a.productDetailTopReviewLink{
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}
span.productDetailTopReviewLinkNumber{
	color: #3355B9;
}
div.productParamterPart{
	border: 1px solid #DFDFDF;
	padding: 40px;
}
div.productParamter{
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}
div.productParamterList span{
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}
div.productDetailImagesPart img{
	display: block;
	width: 790px;
	margin:20px 0px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.productDetailDiv{
	width: 790px;
	margin: 40px auto;
}
div.productDetailTopPart{
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}
a.selected{
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}
a.selected:before{
	content:"";
	display: block;
	border-width: 1px;
	border-color: #b00000;
	border-style: solid;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}
a.selected:after{
	content: "";
	display: block;
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}
a.productDetailTopReviewLink{
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}
span.productDetailTopReviewLinkNumber{
	color: #3355B9;
}
div.productParamterPart{
	border: 1px solid #DFDFDF;
	padding: 40px;
}
div.productParamter{
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}
div.productParamterList span{
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}
div.productDetailImagesPart img{
	display: block;
	width: 790px;
	margin:20px 0px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

渲染中渲染完成

效果

步骤 5 :

样式讲解

edit 顶折

纠问

增值内容，请先登录

点击进入样式详解

步骤 6 :

再整合在一起

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.productDetailDiv{
	width: 790px;
	margin: 40px auto;
}
div.productDetailTopPart{
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}
a.selected{
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}
a.selected:before{
	content:"";
	display: block;
	border-width: 1px;
	border-color: #b00000;
	border-style: solid;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}
a.selected:after{
	content: "";
	display: block;
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}
a.productDetailTopReviewLink{
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}
span.productDetailTopReviewLinkNumber{
	color: #3355B9;
}
div.productParamterPart{
	border: 1px solid #DFDFDF;
	padding: 40px;
}
div.productParamter{
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}
div.productParamterList span{
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}
div.productDetailImagesPart img{
	display: block;
	width: 790px;
	margin:20px 0px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.productDetailDiv{
	width: 790px;
	margin: 40px auto;
}
div.productDetailTopPart{
	border: 1px solid #DFDFDF;
	border-left-width: 0px;
}
a.selected{
	border-left: 1px solid #cfbfb1;
	border-right: 1px solid #cfbfb1;
	color: #b10000;
	display: inline-block;
	font-weight: bold;
	line-height: 46px;
	width: 90px;
	text-align: center;
	position: relative;
}
a.selected:before{
	content:"";
	display: block;
	border-width: 1px;
	border-color: #b00000;
	border-style: solid;
	width: 90px;
	height: 0;
	position: absolute;
	top: -1px;
	margin-left: -1px;
}
a.selected:after{
	content: "";
	display: block;
	border-color: #b00000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -5px;
}
a.productDetailTopReviewLink{
	padding: 0px 20px;
	border-right: 1px dotted #D2D2D2;
	color: #333333;
}
span.productDetailTopReviewLinkNumber{
	color: #3355B9;
}
div.productParamterPart{
	border: 1px solid #DFDFDF;
	padding: 40px;
}
div.productParamter{
	color: #999999;
	font-weight: bold;
	margin-bottom: 20px;
}
div.productParamterList span{
	display: block;
	width: 220px;
	float: left;
	padding: 8px 0px;
	color: #666666;
}
div.productDetailImagesPart img{
	display: block;
	width: 790px;
	margin:20px 0px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>
<div class="productDetailDiv" style="display: block;">
    <div class="productDetailTopPart">
        <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
        <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span class="productDetailTopReviewLinkNumber">19</span> </a>
    </div>
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
        <div class="productParamterList">
                <span>材质成分:  聚酯纤维100% </span>
                <span>品牌:  Emyche/艾米秋 </span>
                <span>货号:  129668 </span>
                <span>尺码:  L M S XL X </span>
                <span>上市年份季节:  2016年夏季 </span>
                <span>颜色分类:  白色 黑色 浅蓝 </span>
                <span>适用年龄:  18-25周岁 </span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="productDetailImagesPart">
                <img src="https://how2j.cn/tmall/img/productDetail/8626.jpg">
    </div>
</div>

渲染中渲染完成

效果

天猫前端系列教材（二十二）- 产品页面 - 基本信息

天猫前端系列教材（二十四）- 产品页面 - 累计评价

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2019-05-03 站长这个项目突然报前端的CSS错误但不影响项目运行这是为什么丫

菜鸟何时变老鸟

关于实践项目-天猫前端-产品详情 -效果的提问

看报错信息不懂什么意思。。。。。好懵

1 个答案

how2j
答案时间：2019-05-04

是inline-block，不是 inilne-block

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-04-14 不太理解这的：before，：after的用法

xcwkobe

关于实践项目-天猫前端-产品详情的提问

为什么横条刚开始出现在上面

1 个答案

how2j
答案时间：2019-04-14

这是伪类，就表示在当前元素前(后）动态增加什么样式

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-06-11 可以把其他几张图片一起贴出来吗？

QQ会员	关于实践项目-天猫前端-产品详情的提问可以把其他几张图片一起贴出来吗？

4 个答案

QQ会员
答案时间：2018-06-14

谢谢

how2j
答案时间：2018-06-13

这里有下载： http://how2j.cn/k/tmall-front/tmall-front-861/861.html

QQ会员
答案时间：2018-06-12

就是商品详情里的其他几张图片

how2j
答案时间：2018-06-12

啊? 其他图片是指什么啊？

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-05-02 这里的选项卡中红色三角形的另一种解决方法

2018-03-28 天猫红色的小桃尖的大小调节不来

雪都晴了

关于实践项目-天猫前端-产品详情的提问

天猫红色的小桃尖的大小调节不来，还是不太清楚这个after具体的原理和方法，望站长指点。

.inner:after{
content:"";
border-color:#b00000 transparent transparent;
border-style:solid;
boder-width:5px;
display:block;
position:absolute;
top:49.5px;

width:3px;
height:5px;
left:21%;
margin-left:3px;
}
.colink{
margin:1px 13px 1px 21px;
color:#333333;
}
<div class="fira">
<div class="inner"><a href="#" class="selected">商品详情</a></div>
<a href="#" class="colink"><span>累计评价</span> <span class="conum">19</span></a>
<span class="line"></span>
</div>

1 个答案

how2j
答案时间：2018-03-28

after的意思就相当于通过js在当前元素后面又加了一个元素。不过区别是用css来达到这个效果

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 6 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫前端-产品详情的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图