Comprehensively design an oppe homepage -- Design of star models

First analyze the page

Is it up and down or left and right

It is divided into two parts The second piece is a similar element divided into four parts , So the whole can be done with a list li There are pictures in it model Price Words etc.

The structure design  

  Start the style design of the page

 

/* Initialize style */
/* Reset the default style */
*{
	padding: 0;
	margin: 0;
}
/* Clear the flag at the front of the list  */
ol,ul{
	list-style-type: none; 
}
/* Clear the default style of hyperlinks */
a{
	color: #666;/* gray */
	text-decoration: none;/* Remove underscores */
}
/* Write left and right floats in the class */
.left{
	float: left;
}
.right{
	float: right;
}
/* Test part */
#top,#header,#nav,#banner,#star,#accessory,#world,#service,#alter_sale,#footer{
	height: 100px;
	width: 100%;
	border: 1px solid #000;
}
.container{
	width: 1280px;
	border: 1px solid #f00;
	margin: 0 auto; /* The content part is centered */
}

/**********************************************
***************** The top style of the page *****************
***********************************************/
#top{
	height: 5px;
	background-color: #00925f;
}
/**********************************************
***************** Page header style *****************
***********************************************/
#header{
	height: 30px;
	background-color: #2d2d2d;
}
/* Sina Weibo icon settings */
#header .xlwb{
	width: 22px;
	height: 19px;
	background: url("../img/icons.png") no-repeat -48px -98px; /* Offset it */
}
/* Tencent Weibo icon settings */
#header .txwb{
	width: 17px;
	height: 24px;
	background: url("../img/icons.png") no-repeat -28px -93px; /* Offset it */
}
/* Phone settings */
#header .tel{
	color: #17925f;
	font-size: 14px;
}
/* Implement one line display   float */
#header .header_left div{
	float: left;
	margin:6px 10px 0px; /* From the above 6  Left and right margins 10  Bottom margin 0 */

}
#header ul li{
	float: left;
	line-height: 30px;
}
#header li a{
	color: #b2b2b2;
	font-size: 14px;
	border-right: 1px solid #b2b2b2;
	padding:0px 10px;/* The distance between the text and the border */
}
#header li a:hover{
	color: #00925f;
}
#header .shop_car span{
	width: 19px;
	height: 16px;
	margin-left: 10px;
	display: inline-block; /* You can set up */
/*	span It's an in-line element   Cannot set inline width   Change the display mode */
	background: url("../img/icons.png") no-repeat 0px -96px;
}
#header .shop_car a{
	border: none;
}

/**********************************************
***************** The navigation bar style of the page **************
***********************************************/
#nav{
	height: 90px;
	background-color: #eeeeee;
}
#nav li{
	float: left;
	margin: 0px 15px;
	line-height: 90px; /* Writing in the middle */
}
#nav li a{
	color: #666666; /* Text color */
	font-weight: bold;/* Bold effect */
}
#nav li a:hover{ /* Pay attention to this :  No space after */
	color: #00925f; /* Text color */
	font-weight: bold;/* Bold effect */
}
/**************************************************
***************** The style of the star model part of the page **************
***************************************************/

#star{
	height: 700px;
	background-color: #f2f2f2;
}

#star .star_top{
	text-align: center;/*div Align center */
	margin: 10px; /* Make it a distance from the upper boundary */
}
#star ul{
	width: 1265px;/* Adjust to fit your computer page */
	margin: 10px auto;
}
#star li{
	width: 300px;
	/*border: 1px solid #000;*/
	float: left;
	border-bottom: 4px solid #dfdfdf;
	transition:all 0.3s linear ;
}
#star li:hover{
	border-bottom: 4px solid #4bf5d0;
	transform: translateY(-10px);

}
#star li img{
	width: 300px;

}
#star li h2{
	text-align: center;/* Align text Center */
	margin-top: 10px; /* The distance between words and photos */
}
#star li p{
	text-align: center;/* Align text Center */
	margin: 10px 0; /* Top and bottom margin   about 0*/
	font-size: 12px;
	color: #bdbdbd;
}
#star .money{
	color: #00925F;
	font-size: 14px;
}
#star li span{
	/*	span It's an in-line element   Cannot set inline width   Change the display mode */
	width: 13px;
	height: 13px;
	margin-left: 5px;
	display: inline-block; /* You can set up */
	vertical-align: middle;/* Property to set the vertical alignment of an element   This element is placed in the middle of the parent element .*/
	background: url("../img/icons-1.png") no-repeat -177px -1014px;/* The setting width of the offset   Height */
}
#star .line{
	width: 0;
	height: 450px;
	border-left: 1px solid #eaeaea;
	margin: 0 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>OPPO</title>
</head>
<body>
	<!--  At the top of the page  -->
	<div id="top">
		<div class="container"></div>
	</div>
	<!--  The head of the page  -->
	<div id="header">
		<div class="container">
			<!--  There are three items on the left  -->
			<!-- /* Realize the whole   float */ -->
			<div class="header_left left">
				<div class="xlwb"></div>
				<div class="txwb"></div>
				<div class="tel">4001-666-888</div>
			</div>
			<!--  The same style on the right is different   The list fits a little   There are five -->
			<ul class="right">
				<li><a href="#"> Sign in </a></li>
				<li><a href="#"> register </a></li>
				<li><a href="#"> Redeem points </a></li>
				<li><a href="#"> Help center </a></li>
				<li class="shop_car">
					<span></span>
					<a href="#"> The shopping cart </a>
				</li>

			</ul>
		</div>
	</div>
	<!--  The navigation bar of the page  -->
	<div id="nav">
		<div class="container">
			<!--  There is one on the left  -->
			<div class="logo left">
				<img src="img/logo.png" alt="logo">
			</div>
			<!--  The same style on the right is different   The list fits a little   Yes 7 term -->
			<ul class="right">
				<li><a href="#"> home page </a></li>
				<li><a href="#"> mobile phone </a></li>
				<li><a href="#"> parts </a></li>
				<li><a href="#"> service </a></li>
				<li><a href="#"> Experience shop </a></li>
				<li><a href="#"> Software store </a></li>
				<li><a href="#">ColorOS</a></li>
			</ul>

			
		</div>
	</div>
	<!--  Page banner  -->
	<div id="banner">
		<div class="container"></div>
	</div>
	<!--  The star model part of the page  -->
	<div id="star">
		<div class="container">
			<!--  There is an item above, which has pictures  -->
			<div class="star_top">
				<img src="img/i-c-title.png" alt=" Pictures of star models ">
			</div>
			<!--  There is one item below   the li There are pictures in it   Text price   And has a similar structure 4 part   Use list Tags  -->
			<ul>
				<li>
					<div><img src="img/20141030152751NRihyRENa7.jpg" alt=" Photo "></div>
					<h2>N3</h2>
					<p> Electric rotating camera </p>
					<!-- &yen Ten page symbols are used as name coins  -->
					<p class="money">&yen;3999  Buy now <span></span></p>
				</li>
				<li class="line"></li>
				<li>
					<div><img src="img/20141029162235J7aJmCHkFm.jpg" alt=" Photo "></div>
					<h2>R5</h2>
					<p> Electric rotating camera </p>
					<!-- &yen Ten page symbols are used as name coins  -->
					<p class="money">&yen;3999  Buy now <span></span></p>
				</li>
				<li class="line"></li>
				<li>
					<div><img src="img/20150120092342k2ABsEHnQN.jpg" alt=" Photo "></div>
					<h2>R1C</h2>
					<p> Thin to 4.85mm</p>
					<!-- &yen Ten page symbols are used as name coins  -->
					<p class="money">&yen;2999  Buy now <span></span></p>
				</li>
				<li class="line"></li>
				<li>
					<div><img src="img/20150423183545tYnFzYnn3p.jpg" alt=" Photo "></div>
					<h2>A31</h2>
					<p> I'm actually mastering </p>
					<!-- &yen Ten page symbols are used as name coins  -->
					<p class="money">&yen;999  Buy now <span></span></p>
				</li>
			</ul>
		</div>
	</div>
	<!--  Selected accessories of the page  -->
	<div id="accessory">
		<div class="container"></div>
	</div>
	<!--  Search elements of the page opple part  -->
	<div id="world">
		<div class="container"></div>
	</div>
	<!--  The service part of the page  -->
	<div id="service">
		<div class="container"></div>
	</div>
	<!--  After sales service of the page  -->
	<div id="alter_sale">
		<div class="container"></div>
	</div>
	<!--  Bottom of page  -->
	<div id="footer">
		<div class="container"></div>
	</div>
</body>
</html>

Realize the effect part