在coursera上學完了密歇根大學開的前端入門課，仍然不得要領，聽朋友建議從網上找了個實站專案跟著擼了一遍代碼，感悟比單純上課多得多，
這個專案主要是復刻【幸福西餅】的主站和產品串列頁，純靜態頁面，沒有任何JS的成分，借此機會熟悉下html和css的用法，下面是一些技術要點記錄，
頁面制作思路
切圖
切圖拉線觀察總體布局，這部分沒自己動手，工具是photoshop，后期學一下補篇技術日記，
布局實作
布局實作這塊我認為可以調整下思路：
視頻中老師教的方法是依次制作導航欄、banner和腳注部分（也可能是考慮到這樣設計比較容易掌握教學節律），
我認為先打好大布局草稿（使用背景色輔助）再逐步制作小區域好些，符合自頂向下的設計邏輯，
大區域制作
大區域基本都用<div>標簽實作，然后再逐步往里面加其他的標簽，
注意事項：
①如果盒子亂跑，需要檢查div嵌套問題（debug了半小時），
②注意html和css分離的邏輯，不要把布局引入到html里，
③記得測量版心距，
④如果子類設定了margin-top，父類需要加overflow:hidden，防止外邊距合并，
⑤float:left 大坑預警，
這篇寫得很不錯：https://blog.csdn.net/liugefangqie/article/details/88606236
主頁
導航欄
html
視頻里用的是<div class = "nav">， html5里面可以直接用<nav>替代，使用語意性標簽增強代碼可讀性，
CSS
①偽類選擇器
在這里由于第一個元素和最后一個元素與其他元素的間距不同，CSS中使用了偽類進行處理，
:first-child 選擇器用于選取屬于其父元素的首個子元素的指定選擇器，
這篇寫得比較好：https://blog.csdn.net/weixin_38134581/article/details/83504080
發現:last-child單獨使用會出問題，解決方法是使用div把里面包裹起來，然后用類選擇器配合使用，
html：
<div>
<p >aaaaa</p>
<p >aaaaa</p>
<p >aaaaa</p>
<p >aaaaa</p>
<p >aaaaa</p>
</div>
css:
.list:last-child:{border-bottom:0}
②居中常用的一些設定：
水平居中：
margin: 0 auto; （盒子常用，使用時需要定義了元素的width）
text-align: center; （文本居中）
垂直居中：
使用height和line-height進行文字垂直居中（把數值設定成一樣的就可以了，適用于單行文本）
※這個專案里沒有用到display:flex，在這里記錄下方法（給父元素display:flex;而子元素align-self:center）
③固定導航欄：
position: fixed;
left:0;
top:0;
z-index:10; /*指定層級，位于其他元素上方*/
注意導航欄下面的區域需要給margin-top，否則會被蓋住，
主頁的主要區域
html
主要區域被分為【banner區】和【三個盒子】，寫注釋，套盒子，復制粘貼，
CSS
①子元素浮動，父元素會高度坍塌，視頻里給的解決方法是給父元素寫高（弊端：不是每次都知道高是多少），
解決方案（用偽類after）：https://blog.csdn.net/qq_42129063/article/details/80441069
②margin和padding的選擇：
內外邊距看張圖就可以了，文字解釋的話，我覺得下面這個理解比較好，
margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔，margin用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”，
③使用nth-of-type選擇器處理多塊“長得很像”區域中不同子元素的樣式，
:nth-child和:nth-of-type的區別，
:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的型別，
:nth-of-type() 選擇器，該選擇器選取父元素的第 N 個指定型別的子元素，
腳注
html里可以指定腳注的類名稱為copyright，
CSS可以考慮把導航欄與腳注欄的代碼放到一起，命名為“public.css”，實作多個頁面的復用，
商品串列頁
①怪異盒
因為每個商品都呆在一個固定寬高的框里，使用box-sizing:border-box進行怪異盒宣告，
標準盒模型寬度實際占有的位置大小： 寬+左右padding+左右border+左右margin
怪異盒模型內容區長度的計算方式是：width（content+border+padding）+margin
②最右邊的產品可以選擇結構偽類選擇器去掉margin-right，
③圖片和【文字】需要并排時，調整圖片比調整塊方便，
④主要區域的高度不能給死，否則無法往下滑動，
其他想法
①輸入分號時需要下意識檢查輸入法，
②寫alt是好習慣，方便自己后期檢查圖片對應，也方便殘障人士使用頁面閱讀器，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/256659.html
標籤：Html/Css
上一篇：web開發-tools
下一篇：手寫Promise實作程序