<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://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="http://how2j.cn/tmall/img/productDetail/8626.jpg">
</div>
</div>
/* 整个body */
body{
font-size: 12px;
/* 把所有文字的大小调成12px,这是天猫默认的文字大小 */
font-family: Arial;/* 字库使用Arial */
}
/* 产品详情div */
div.productDetailDiv{
width: 790px;/* 宽度: 790px */
margin: 40px auto;/* 居中显示 */
}
/* 顶部div */
div.productDetailTopPart{
border: 1px solid #DFDFDF;/* 边框 */
border-left-width: 0px;
/* 左边框去掉，因为“商品详情”四个字接下来会用红色边框显示 */
}
div.productDetailTopPart a {
text-decoration: none;
}
/* 被选中的超链 */
a.selected{
border-left: 1px solid #cfbfb1;/* 左边框 */
border-right: 1px solid #cfbfb1;/* 右边框 */
color: #b10000;/* 字体颜色: #b10000 */
display: inline-block;
/* 显示为内联，既可以设置大小，又能够不换行 */
font-weight: bold;/* 粗体 */
line-height: 46px;/* 文字垂直居中 */
width: 90px;/* 宽度: 90px */
text-align: center;/* 文字水平居中 */
position: relative;
/* 相对定位，为的是下一步使用:
before新增加的元素做绝对定位。
因为绝对定位是基于定位了的父元素 */
}
/* 使用:before为超链上方加一个天猫色的横条 */
a.selected:before{
content:"";/* 内容为空 */
display: block;/* 以块状显示，便于修改宽度 */
border-width: 1px;/* 边框宽度 */
border-color: #b00000;/* 边框颜色 */
border-style: solid;/* 边框实线 */
width: 90px;/* 宽度: 90px，刚好和其父元素超链宽度一样 */
height: 0;/* 高度: 0，无高度仅仅显示边框 */
position: absolute;/* 绝对定位，其父元素超链是相当定位的，所以这绝对定位就会基于父元素 */
top: -2px;/* 向上移动一个像素 */
margin-left: -1px;
/* 左外边距: -1px，向左边移动一个像素，
导致和左边的边框重合 */
}
/* 使用:after 为超链上方加一个天猫色的美人尖 */
a.selected:after{
content: "";/* 内容为空 */
display: block;/* 以块状显示，便于修改宽度 */
border-color: #b00000 transparent transparent;
/* 美人尖的原理是只有上边框，其他边框是透明色，
#b00000 transparent transparent;
这种写法既表示只有上边框有颜色，其他都是透明色 */
border-style: solid;/* 边框实线 */
border-width: 5px;/* 边框宽度 */
width: 0;/* 宽度: 0 */
height: 0;/* 高度: 0 */
position: absolute;/* 绝对定位 */
top: -2px;/* 向上移动1个像素 */
left: 50%;/* 居中 */
margin-left: -5px;/* 向左边移动-5px */
}
/* 鼠标悬停 */
a:hover{
text-decoration:none;/* 超链鼠标悬停的时候,没有下划线 */
color: #C40000;/* 超链鼠标悬停的时候,使用天猫红显示 */
}
/* 累计评论超链 */
a.productDetailTopReviewLink{
padding: 0px 20px;/* 左右内边距20px */
border-right: 1px dotted #D2D2D2;/* 右侧边框呈点状 */
color: #333333;/* 字体颜色: #333333 */
}
/* 评论数量 */
span.productDetailTopReviewLinkNumber{
color: #3355B9;/* 字体颜色: #3355B9 */
}
/* 参数列表div */
div.productParamterPart{
border: 1px solid #DFDFDF;/* 边框实线 */
padding: 40px;/* 内边距40px */
}
/* 产品参数四个字 */
div.productParamter{
color: #999999;/* 字体颜色: #999999 */
font-weight: bold;/* 粗体 */
margin-bottom: 20px;/* 下外边距20px */
}
/* 产品参数项 */
div.productParamterList span{
display: block;/* 以块状显示，自动换行 */
width: 220px;/* 宽度: 220px */
float: left;/* 向左漂浮，这样可以水平摆放 */
padding: 8px 0px;/* 上下内边距8px */
color: #666666;/* 字体颜色: #666666 */
}
/* 详情图片 */
div.productDetailImagesPart img{
display: block;/* 显示为块级元素，自动换行 */
width: 790px;/* 宽度: 790px，详情图片都是这样的宽度的大图片 */
margin:20px 0px;/* 上下外边距 */
}
/*
body {
font-size: 12px;
font-family: Arial;
}
div.productDetailDiv {
position: relative;
top:0;
}
div.productDetailDiv div.productDetailTopPart {
width: 800px;
height: 40px;
border: 1px solid black;
background-color: aquamarine;
}
div.productDetailDiv div.productDetailTopPart a {
display: inline-block;
width: 100px;
text-align: center;
line-height: 40px;
border-left:1px solid black;
}
div.productDetailDiv div.productParamterPart {
width: 800px;
height: 250px;
border: 1px solid black;
} */