Taobao project development note 7 of Duyi Education

Taobao project development note 7 of Duyi Education

Today, I will continue to write note 6 the day before yesterday. Today, I want to finish the following:

Today's content has been independently written by Xiaobian. I think the key and difficult points are in the structure of html:
So first of all, analyze the structure completely. What exactly is there: the sequence number and the code are one-to-one corresponding!

Because there are many contents in ②, it is divided into two parts: the left side of picture 2 container and the right side of picture 2 container

Before writing the code again, we are using the tree view to analyze:


The following is the code written according to the above idea. There are many floats in it, so be sure to understand the parent-child structure. (the size of floating css must be calculated well!)

CSS code, I think it is important to set the buttons, make the red and black lines, and import the image alignment properties
Button code:
Code of red and black line:
Relative positioning of parent and absolute positioning of child
display application,

The following is the CSS code, mainly because there is no special place for the size setting. After the floating relationship is clear, the size is calculated. The basic framework can be finished:

/* Picture 1 container */
.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);	/* Support: IE9+ */
	background-color: #000\9;	/* IE9 The following browser knowledge */
	filter: alpha(opacity=30);	/* transparent */
	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{
	/* Convert to block level element */
	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; */
}

/* Picture 2 container */
.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;
}

Published 11 original articles, won praise 11, visited 7564
Private letter follow

Posted on Mon, 03 Feb 2020 03:26:31 -0800 by ddrummond