品优购详情页---产品细节模块product_detail

结构搭建

整个大盒子产品细节模块命名为： product_detail（不给高度，注意清除浮动带来的影响）

1号盒子命名为:aside(左侧浮动，有宽带不给高度)

2号盒子命名为:detail（右侧浮动，有宽度不给高度）

<!--产品细节模块-->
<div class="product_detail clearfix"><!--父亲没高度，孩子还都浮动-->
	<div class="aside fl">123</div>
	<div class="detail fr">abc</div>
</div>

.aside {
	width: 208px;
	/*不给高度*/
	height: 1000px;/*等下会删掉*/
	border: 1px solid #ccc;
}
.detail {
	width: 978px;
	/*不给高度*/
	height: 1000px;/*等下会删掉*/
	border: 1px solid #ccc;
}

aside:左侧tab栏布局

1号盒子命名为tab_list 给高度就好，里面放ul和li注意这里是tab栏切换布局

2号盒子命名为tab_con里面包含很多个ul_item和1号盒子里面的li一一对应

step1: tab_list的制作

<div class="aside fl">
	<div class="tab_list">
		<ul>
			<li class="first_tab current">相关分类</li>
			<li class="second_tab">推荐品牌</li>
		</ul>
	</div>
	<div class="tab_con">
		abc
	</div>
</div>

.aside {
	width: 208px;
	/*不给高度*/
	height: 1000px;/*等下会删掉*/
	border: 1px solid #ccc;
}
.tab_list {
	height: 34px;/*量边框 边框等下给里面的li*/
	/*background-color: pink;*/
}
/*把背景色 底边框都给了li*/
.tab_list li {
	float: left;
	background-color: #f1f1f1;/*这是每个li默认的灰色 li只有在被点击之后才会变成白色。先不写白色*/
	border-bottom: 1px solid #ccc;
	height: 33px;
	text-align: center;
	line-height: 33px;
}
/*鼠标单击li变化样式： 背景变白色 去掉下边框 文字变颜色*/
.tab_list .current {
	background-color: #fff;
	border-bottom: 0;
	color: red;
}
.first_tab {
	width: 104px;
}
.second_tab {
	width: 103px;
	border-left: 1px solid #ccc;
}

step2: tab_con的制作

<div class="tab_con">
	<ul><!--一组ul和“相关分类相对应” 应该还有一组ul和“推荐品牌相对应”这里只写一组ul-->
		<li>
			<img src="upload/aside_img.jpg">
			<h5>总结得好好，还有配图更加清晰了总结得好好，还有配图更加清晰了</h5>
			<div class="aside_price">￥19</div>
			<a href="#" class="as_addcar">加入购物车</a>
		</li>
		<li>
			<img src="upload/aside_img.jpg">
			<h5>总结得好好，还有配图更加清晰了总结得好好，还有配图更加清晰了</h5>
			<div class="aside_price">￥19</div>
			<a href="#" class="as_addcar">加入购物车</a>
		</li>
		<li>
			<img src="upload/aside_img.jpg">
			<h5>总结得好好，还有配图更加清晰了总结得好好，还有配图更加清晰了</h5>
			<div class="aside_price">￥19</div>
			<a href="#" class="as_addcar">加入购物车</a>
		</li>
	</ul>
</div>

.tab_con {
	padding: 0 10px;
}
.tab_con li {
	border-bottom: 1px solid #ccc;
}
.tab_con li h5 {
	white-space: nowrap; /*1:强制文字一行内显示*/
	overflow: hidden;/*2: 溢出隐藏*/
	text-overflow: ellipsis;/*3：溢出的文字用省略号显示*/

	font-weight: normal;
}
.aside_price {
	font-weight: 700;
	margin: 10px 0;
}
.as_addcar {
	display: block;
	width: 88px;
	height: 26px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
	margin: 10px auto;/*块级元素居中对齐*/
	text-align: center;
	line-height: 26px;
}
/*此时可以把之前给aside的高度（1000px）删掉了*/

detail:右侧detail栏布局

1号盒子命名为detail_tab_list 给高度就好

2号盒子命名为detail_tab_con

上面盒子做切换效果，下面盒子跟内容部分

step1: detail_tab_list制作

<div class="detail fr">
	<div class="detail_tab_list">
		<ul>
			<li>规格与包装</li><!--这些li不用给宽度 给个高度 然后左右padding值挤开就可以啦-->
			<li class="current">售后保障</li>
			<li>商品评价（50000）</li>
			<li>手机社区</li>
	</div>
	<div class="detail_tab_con">abc</div>
</div>

.detail {
	width: 978px;
	/*不给高度*/
	height: 1000px;/*等下会删掉*/
	/*border: 1px solid #ccc;*/
}
.detail_tab_list {
	height: 39px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}
.detail_tab_list li {
	float: left;/*不加浮动的时候 写第一个li的时候默认和父亲一样宽 浮动之后盒子和内容一样宽*/
	height: 39px;/*和父亲一样高*/
	line-height: 39px;
	text-align: center;
	padding: 0 20px;
	cursor: pointer;/*鼠标放到这些li上都变成小手的形状*/
}
.detail_tab_list .current {
	background-color: #c81623;
	color: #fff;
}

step2: detail_tab_con制作

<div class="detail_tab_con">
	<div class="item"><!--对应于规格与包装-->
		<ul class="item_info">
			<li>分辨率：1920*1080(FHD)</li>
			<li>后置摄像头：1200万像素</li>
			<li>前置摄像头：500万像素</li>
			<li>核      数：其他</li>
			<li>频      率：以官网信息为准</li>
			<li>品牌： Apple ♥关注</li>
			<li>商品名称：APPLEiPhone 6s Plus</li>
			<li>商品编号：1861098</li>
			<li>商品毛重：0.51kg</li>
			<li>商品产地：中国大陆</li>
			<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
			<li>系统：苹果（IOS）</li>
			<li>像素：1000-1600万</li>
			<li>机身内存：64GB</li>
		</ul>
		<p>
			<a href="javascript:;" class="more">查看更多参数 </a>
		</p>
		<img src="upload\detail_img1.jpg">
		<img src="upload\detail_img2.jpg">
		<img src="upload\detail_img3.jpg">
	</div>
	<!--
	<div class="item"></div>对应于售后保障
	<div class="item"></div>对应于商品评价（50000）
	<div class="item"></div>对应于手机社区-->
</div>

.item_info {
	padding: 20px 0 0 20px;
}
.item_info li {
	line-height: 22px;
}
.more {
	float: right;
	font-family: 'icomoon';
	font-weight: 700;
}
/*此时可以把之前给aside的高度（1000px）删掉了*/