幸福西餅 靜態頁面製作專案總結

在coursera上學完了密西根大學開的前端入門課，聽朋友建議從網上找了個實站專案跟著擼了一遍**，感悟挺多的！

這個專案主要是復刻【幸福西餅】的主站和產品列表頁，純靜態頁面，沒有任何js的成分，藉此機會熟悉下html和css的用法。下面是一些技術要點記錄。

切圖拉線觀察總體布局，這部分沒自己動手，工具是photoshop，後期學一下補篇技術日記。

大區域基本都用標籤實現，然後再逐步往裡面加其他的標籤。

注意事項：

①如果盒子亂跑，需要檢查div巢狀問題（debug了半小時）。

②注意html和css分離的邏輯。不要把布局引入到html裡。

③記得測量版心距。

④如果子類設定了margin-top，父類需要加overflow:hidden，防止外邊距合併。

⑤float:left 大坑預警。

這篇寫得很不錯：

css①偽類選擇器

在這裡由於第乙個元素和最後乙個元素與其他元素的間距不同，css中使用了偽類進行處理。

:first-child 選擇器用於選取屬於其父元素的首個子元素的指定選擇器。

這篇寫得比較好：

發現:last-child單獨使用會出問題，解決方法是使用div把裡面包裹起來，然後用類選擇器配合使用。

html：

aaaaa
aaaaa
aaaaa
aaaaa
aaaaa
css:
.list:last-child:

水平居中：

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; /*指定層級，位於其他元素上方*/

html

主要區域被分為【banner區】和【三個盒子】。寫注釋，套盒子，複製貼上。

css

解決方案（用偽類after）：

內外邊距看張圖就可以了，文字解釋的話，我覺得下面這個理解比較好。

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「呼吸距離」。

:nth-child和:nth-of-type的區別。

:nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。

:nth-of-type() 選擇器，該選擇器選取父元素的第 n 個指定型別的子元素。

因為每個商品都呆在乙個固定寬高的框裡，使用box-sizing:border-box進行怪異盒宣告。

標準盒模型寬度實際占有的位置大小： 寬+左右padding+左右border+左右margin

怪異盒模型內容區長度的計算方式是：width（content+border+padding）+margin

③和【文字】需要併排時，調整比調整塊方便。

④主要區域的高度不能給死，否則無法往下滑動。

幸福西餅人偶跳舞 做有意思的蛋糕品牌

洋娃娃和小熊跳舞，跳呀跳呀一二一 小時候，我們喜歡跳舞 喜歡玩偶 喜歡童話世界裡的各種角色，大部分童年記憶都跟童話有關。許多八零後 九零後的童年，即使是生日也難得吃上一口蛋糕，有的是玩泥巴跳皮筋的輕鬆童年和一摞摞的童話 而現在www.cppcns.com，八零 九零後逐漸為人父母，再也不缺蛋糕了，但...

生成靜態頁

先定義乙個staticfilecachemodule 實現ihttpmodule介面 定製beginrequest事件 再定義乙個類 要生成靜態頁面的繼承它就行了 將頁面內容輸出到瀏覽器 response.write pagecontent 當然不要忘在配置web.confing 用模板生成靜態頁 ...

ASPX頁生成靜態HTML頁

商品detail資訊頁面都是html頁面,減少訪問資料庫的次數，提高效能 方案1 傳入url返回網頁的html url public static string geturltohtml string url get the response stream.system.io.stream resp...