综合设计一个OPPE主页--布局与初始化

最新推荐文章于 2023-12-19 10:42:48 发布

¡Venceremo

最新推荐文章于 2023-12-19 10:42:48 发布

阅读量166

点赞数

分类专栏： CSS HTML 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125981816

版权

CSS 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

29 篇文章 0 订阅

订阅专栏

首先建立一个站点文件夹--保存网页的所有信息

id做页面的布局 class做页面的样式

<!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>
	<!-- 页面的顶部 -->
	<div id="top"></div>
	<!-- 页面的头部 -->
	<div id="header"></div>
	<!-- 页面的导航栏 -->
	<div id="nav"></div>
	<!-- 页面的横幅 -->
	<div id="banner"></div>
	<!-- 页面的明星机型部分 -->
	<div id="star"></div>
	<!-- 页面的精选配件 -->
	<div id="accessory"></div>
	<!-- 页面的搜素opple部分 -->
	<div id="world"></div>
	<!-- 页面的服务部分 -->
	<div id="service"></div>
	<!-- 页面的售后服务 -->
	<div id="alter_sale"></div>
	<!-- 页面的底部 -->
	<div id="footer"></div>
</body>
</html>

初始化样式

/*初始化样式*/
/*将默认的样式清零*/
*{
	padding: 0;
	margin: 0;
}
/*清除列表前面的标识 */
ol,ul{
	style="list-style-type: none;
}
/*清除超链接的默认样式*/
a{
	color: #666;/*灰色*/
	text-decoration: none;/*去除下划线*/
}
/*将左右浮动写在类里面*/
.left{
	float: left;
}
.right{
	float: right;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#service,#alter_sale,#footer{
	height: 100px;
	width: 100%;
	border: 1px solid #000;
}

建立样式（每一个部分（一共10个部分）设计共同的样式）

<!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>
	<!-- 页面的顶部 -->
	<div id="top">
		<div class="container"></div>
	</div>
	<!-- 页面的头部 -->
	<div id="header">
		<div class="container"></div>
	</div>
	<!-- 页面的导航栏 -->
	<div id="nav">
		<div class="container"></div>
	</div>
	<!-- 页面的横幅 -->
	<div id="banner">
		<div class="container"></div>
	</div>
	<!-- 页面的明星机型部分 -->
	<div id="star">
		<div class="container"></div>
	</div>
	<!-- 页面的精选配件 -->
	<div id="accessory">
		<div class="container"></div>
	</div>
	<!-- 页面的搜素opple部分 -->
	<div id="world">
		<div class="container"></div>
	</div>
	<!-- 页面的服务部分 -->
	<div id="service">
		<div class="container"></div>
	</div>
	<!-- 页面的售后服务 -->
	<div id="alter_sale">
		<div class="container"></div>
	</div>
	<!-- 页面的底部 -->
	<div id="footer">
		<div class="container"></div>
	</div>
</body>
</html>

/*初始化样式*/
/*将默认的样式清零*/
*{
	padding: 0;
	margin: 0;
}
/*清除列表前面的标识 */
ol,ul{
	style="list-style-type: none;
}
/*清除超链接的默认样式*/
a{
	color: #666;/*灰色*/
	text-decoration: none;/*去除下划线*/
}
/*将左右浮动写在类里面*/
.left{
	float: left;
}
.right{
	float: right;
}
/*测试部分*/
#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; /*内容部分居中*/
}