web前端网页重构（划分网页，将PS与前端结合）-一一网

一、划分规则：

第一步：拿到一个网页文件后，首先通过PS把设计图分成三大部分，这三大部分的宽度统一设置成100%
1、header（头部部分）: 包含网页的logo图，网站的导航，以及对应的广告区域或者网页的介绍区域。
2、main （主体部分）：主体内容区域
3、footer（尾部部分）: 包含合作厂商，网站的开发信息，以及网站的规范等广告类的部分。
第二步：按照划分区域来写对应的代码
div标签：<div></div>容器标签，相当于有大小的盒子，用于网页中的布局，将第一步分成的三大部分，分别放在3个div标签中
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
class属性：将三大部分通过class属性进行区分div标签，类似人的姓名。
CSS：层叠样式表 ,对div标签设置大小，<–style标签是网页的样式，写在head标签里面–>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">       <--编码信息-->
	<title>首页</title>          <--标题信息-->
        <style>                      <--网页的样式-->
            /*选择器{
                样式:样式的值;
            }*/
        </style>
</head>
<body>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
</body>
</html>
复制代码

二、选择器（帮助找到要添加样式的标签）

class选择器：
.+class名称
比如：
.header{
width：100%;
height:491px;
background-color:red;
}
说明：
width表示div标签的宽度,快捷键是w+100%按Tab；
height表示div标签的高度,快捷键是h+491按Tab会自动补齐；
px表示像素；
100%表示铺满整个页面；
background—color表示背景色，快捷键是bgc按Tab；

三、清除网页自带的间距

*{
margin:0;
padding:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">       <--编码信息-->
	<title>首页</title>          <--标题信息-->
        <style>                      <--网页的样式-->
           *{                        <--清除网页默认间距-->
               margin:0;
               padding:0;
           }
        </style>
</head>
<body>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
</body>
</html>
复制代码

四、作业

把图片划分为三大部分，并设置宽度、高度、背景色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	.header{
		width:100%;
		height:491px;
		background-color: blue;
	}
	.main{
		width:100%;
		height:896px;
		background-color: orange;
	}
	.footer{
		width: 100%;
		height: 124px;
		background-color: black;
	}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main"></div>
	<div class="footer"></div>
</body>
</html>
复制代码

最终网页的展示（颜色可以换掉）:

屏幕截图 2021-05-29 150816.jpg

文章版权归作者所有，未经允许请勿转载。

THE END

前端