web前端網(wǎng)頁重構（劃分網(wǎng)頁，將PS與前端結合）
時間：2023-05-29 00:18:01 | 來源：網(wǎng)站運營
時間：2023-05-29 00:18:01 來源：網(wǎng)站運營
web前端網(wǎng)頁重構（劃分網(wǎng)頁，將PS與前端結合）：一、劃分規(guī)則：
第一步：拿到一個網(wǎng)頁文件后，首先通過PS把設計圖分成三大部分，這三大部分的寬度統(tǒng)一設置成100%
1、header（頭部部分 ）: 包含網(wǎng)頁的logo圖，網(wǎng)站的導航，以及對應的廣告區(qū)域或者網(wǎng)頁的介紹區(qū)域。
2、main （主體部分）：主體內容區(qū)域
3、footer（尾部部分）: 包含合作廠商，網(wǎng)站的開發(fā)信息，以及網(wǎng)站的規(guī)范等廣告類的部分。
第二步：按照劃分區(qū)域來寫對應的代碼
div標簽：<div></div>容器標簽，相當于有大小的盒子，用于網(wǎng)頁中的布局，將第一步分成的三大部分，分別放在3個div標簽中<div class="header"></div><div class="main"></div><div class="footer"></div>class屬性：將三大部分通過class屬性進行區(qū)分div標簽，類似人的姓名。
CSS：層疊樣式表 ,對div標簽設置大小，<--style標簽是網(wǎng)頁的樣式，寫在head標簽里面-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <--編碼信息-->
<title>首頁</title> <--標題信息-->
<style> <--網(wǎng)頁的樣式-->
/*選擇器{
樣式:樣式的值;
}*/
</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；
三、清除網(wǎng)頁自帶的間距
*{
margin:0;
padding:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <--編碼信息-->
<title>首頁</title> <--標題信息-->
<style> <--網(wǎng)頁的樣式-->
*{ <--清除網(wǎng)頁默認間距-->
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
四、作業(yè)
把圖片劃分為三大部分，并設置寬度、高度、背景色
<!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>
最終網(wǎng)頁的展示（顏色可以換掉）:
我組建了一個前端自學團，學習前端技術。在團里，會嚴格監(jiān)督大家每天學習打卡，給大家分享學習資料，給大家匹配學習伙伴，定期組織大家進行項目實戰(zhàn)。想要加入一起學習的小伙伴可以私信我或是給我留言作者：欣愿vivi
鏈接：web前端網(wǎng)頁重構（劃分網(wǎng)頁，將PS與前端結合）
來源：掘金
在線咨詢
