当前位置：网站首页>Comprehensively design an oppe homepage -- layout and initialization

Comprehensively design an oppe homepage -- layout and initialization

2022-07-26 16:19:00 【（-^_^-）】

First, create a site folder -- Save all the information of the web page

  id Make page layout class Make the style of the page  

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>OPPO</title>
</head>
<body>
	<!--  At the top of the page  -->
	<div id="top"></div>
	<!--  The head of the page  -->
	<div id="header"></div>
	<!--  The navigation bar of the page  -->
	<div id="nav"></div>
	<!--  Page banner  -->
	<div id="banner"></div>
	<!--  The star model part of the page  -->
	<div id="star"></div>
	<!--  Selected accessories of the page  -->
	<div id="accessory"></div>
	<!--  Search elements of the page opple part  -->
	<div id="world"></div>
	<!--  The service part of the page  -->
	<div id="service"></div>
	<!--  After sales service of the page  -->
	<div id="alter_sale"></div>
	<!--  Bottom of page  -->
	<div id="footer"></div>
</body>
</html>

Initialize style  

/* Initialize style */
/* Reset the default style */
*{
	padding: 0;
	margin: 0;
}
/* Clear the flag at the front of the list  */
ol,ul{
	style="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;
}

  Create style （ Every part （ altogether 10 Parts of ） Design a common style ）

<!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"></div>
	</div>
	<!--  The navigation bar of the page  -->
	<div id="nav">
		<div class="container"></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"></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>
/* Initialize style */
/* Reset the default style */
*{
	padding: 0;
	margin: 0;
}
/* Clear the flag at the front of the list  */
ol,ul{
	style="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 */
}

原网站

版权声明
本文为[（-^_^-）]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261559113915.html

边栏推荐

猜你喜欢

随机推荐