品優購詳情頁---產品細節模塊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）刪掉了*/