web前端网页重构（划分网页，将PS与前端结合）
时间：2023-05-29 00:18:01 | 来源：网站运营
时间：2023-05-29 00:18:01 来源：网站运营
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>
最终网页的展示（颜色可以换掉）:
我组建了一个前端自学团，学习前端技术。在团里，会严格监督大家每天学习打卡，给大家分享学习资料，给大家匹配学习伙伴，定期组织大家进行项目实战。想要加入一起学习的小伙伴可以私信我或是给我留言作者：欣愿vivi
链接：web前端网页重构（划分网页，将PS与前端结合）
来源：掘金
在线咨询
