《淘宝项目开发笔记八》

《淘宝项目开发笔记八》

今天接着前天笔记七的写，今天是要完成如下內容：

今天的內容，小編有自己獨立写完，重点难点个人觉得是在html的结构上：
所以先完完全全将结构分析一遍，到底有哪些内容：这个序号等下跟代码是一一对应的！

由于②的内容比较多，所以把它再分为两块：图片2容器左边，图片2容器右边：

再写代码前，我们在用树状图分析一下：


以下是按照上面思路写的代码，里面有很多浮动,所以一定要搞清楚父子结构，（用浮动css尺寸一定要计算好！）

CSS代码，个人觉得重要的是三个地方：按钮的设置，红黑线的制作，导入图片对齐属性
按钮的代码：
红黑线的代码：
父级相对定位，子级绝对定位
display的应用，

以下是CSS代码，主要是些尺寸的设置没有特别的地方，浮动关系理清楚后来，尺寸算好。基本框架都可以做的出来成品：

/* 图片1容器 */
.firstLeft .img1Box{
	width: 690px;
	height: 282px;
	/* background-color: #f50; */

}
.firstLeft .img1Box .img1{
	position: relative;
	margin-top: 10px;
	/* margin-left: 10px; */
}
.firstLeft button{
	width: 20px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	cursor: pointer;
	border: none;
	background-color: rgba(0,0,0,0.3);	/* 支持情况：IE9+ */
	background-color: #000\9;	/* IE9以下的浏览器认识 */
	filter: alpha(opacity=30);	/* 透明 */
	position: absolute;
	top: 50%;
	margin-top: -15px;
	display: none;
}
.firstLeft .img1Box:hover button{
	display: inline-block;
}
.firstLeft .img1Box .leftBtn{
	left: 0px;
	border-radius: 0 15px 15px 0; 
}
.firstLeft .img1Box .rightBtn{
	right: 0px;
	border-radius: 15px 0 0 15px;
}
.firstLeft .img1Box .circle{
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin-left: -35px;
	border-radius: 10px;
	padding: 3px 0;
	font-size: 0;
	background-color: rgba(255,255,255,0.3);
}
.firstLeft .img1Box .circle span{
	/* 轉換為塊級元素 */
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
	margin: 0 3px;
	cursor: pointer;
}
.firstLeft .img1Box .circle span.active{
	background-color: #ff5000;
}

.firstLeft .img1Box .img2{
	margin-top: 10px;
	/* margin-right: 10px; */
}

/* 图片2容器 */
.firstLeft .img2Box{
	width: 690px;
	height: 220px;
	margin-top: 10px;
	/* background-color: #666; */
}
.firstLeft .img2Box .text{
	margin-top: 10px;
	height: 17px;
	line-height: 17px;
}
.firstLeft .img2Box .text i{
	color: #ff1648;
}

.firstLeft .img2Box .bg{
	background: url(../images/title_bg.png) no-repeat left;
	padding-left: 136px;
	color: #666;
}
.firstLeft .img2Box .line{
	height: 3px;
	background-color: #ff1648;
	position: relative;
}
.firstLeft .img2Box .line span{
	display: inline-block;
	width: 87px;
	height: 3px;
	background-color: #000;
	position: absolute;
	left: 0;
}
.firstLeft .img2Box .img3 .imgBottom{
	width: 520px;
	height: 200px;
	/* background-color: black; */
	position: relative;

	display: table-cell;
	vertical-align: middle;

	/* display: flex;
	justify-content: space-around;
	align-items: center; */
}
.firstLeft .img2Box .imgBottom img{
	margin: 0 10px;
}

.firstLeft .img2Box .img3{
	position: relative;

}
.firstLeft .img2Box .leftBtn{
	left: 0px;
	border-radius: 0 15px 15px 0; 
}
.firstLeft .img2Box .rightBtn{
	right: 0px;
	border-radius: 15px 0 0 15px;
}
.firstLeft .img2Box:hover button{
	display: inline-block;
}

.firstLeft .img2Box .title{
	margin-top: 10px;
	height: 20px;
	line-height: 20px;
}