這篇文章主要講解了“怎么用HTML+CSS制作幸福西餅首頁和百度首頁”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用HTML+CSS制作幸福西餅首頁和百度首頁”吧！

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站建設、成都做網(wǎng)站與策劃設計,清水網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設十載,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:清水等地區(qū)。清水做網(wǎng)站價格咨詢:18982081108

首先我在網(wǎng)上下載到了千鋒教育提供的的幸福西餅官網(wǎng)靜態(tài)頁面的教學視頻和圖片素材、源碼等。我是先看一集視頻，然后關掉視頻自己敲一遍代碼。然后再和源碼進行比較，看看自己哪些地方的代碼寫法和源碼不一樣，是否有可以改進的地方。做到比較靠后面的時候，其實已經(jīng)不是很依賴視頻教學了，自己大概看到樣式就大概能知道應該怎么搞。

第一步：把教程中給的common.css 改成規(guī)范的格式，把自己看不懂或是沒記清楚的標簽等等查一遍，整理一下。

Html：

dl，dd，dt：定義列表(definition list)，定義列表中的項目，解釋項目

CSS:

padding，margin：盒模型的內(nèi)邊距，外邊距。(非常重要)

display：display 屬性規(guī)定元素應該生成的框的類型。

block即是該元素將顯示為塊級元素，此元素前后會帶有換行符。(好像還挺常用，用于讓有些元素上下分開)

clear：哪邊不允許出現(xiàn)浮動元素。

height：元素的高度。

visibility：元素是否可見。

overflow：內(nèi)容溢出元素框時發(fā)生的事情。

zoom：縮放因數(shù)。1或100%即為不縮放。

outline：輪廓線。

vertical-align：圖片對齊文字的方式。(對齊一行中上面還是下面這樣)

input：xx(-input)-placeholder：xx瀏覽器的占位符。(這個好像有點復雜，建議具體問題具體分析)

position：固定、絕對等。最好要配合top、left等使用。

CSS選擇器：

:after：在每個x元素的內(nèi)容后面插入內(nèi)容。

(配合使用：content：插入的內(nèi)容)

第二步：照著教程開始做首頁頁面。每段教程聽完，再按照自己理解敲一遍。最后具體數(shù)值照著教程里面的數(shù)值改過來。

新知識點：

1.子元素加了margin-top，父元素要加overflow: hidden(這個真的挺重要的！否則縮放頁面時，可能同行的內(nèi)容會被擠成好幾行(親測的header出現(xiàn)的問題)或者被吞掉一部分內(nèi)容(親測的下面圖片出現(xiàn)的問題)。)

2.nth- child(n)：選擇其父元素的第幾個子元素。(不分種類)

3.nth-of-child(n)：選擇其父元素的第幾個該類型的子元素。(和上一個的區(qū)別在于是否分類型！這里之前理解錯過，要記好)

4.把a設成display:block(轉(zhuǎn)成塊)了之后，它的父元素如果有text-align，則會變成在這個塊的寬度內(nèi)進行居中。所以寬度不能亂調(diào)。

5.同行連續(xù)不同元素(比如連著的span)之間如果需要單空格，用回車就好。

6.要給一小塊內(nèi)容設置樣式(比如邊框什么的)，就要先把它們搞成一小塊，block或者inline-block。

深刻學習到的思想：要把頁面拆分成很多個盒子，每一個部分都是一個盒子。盒子套盒子。

然后每個盒子內(nèi)部再進行添加內(nèi)容，這樣樣式比較方便。

有的時候一行內(nèi)容出現(xiàn)順序錯亂，要把它們整合成一個span比較好。

第三步：根據(jù)教程開始做列表頁頁面。同樣先聽一遍再帶著自己的理解敲碼，最后再對著修改。

新知識點：

1.設置box-sizing:border-box可以使div盒子的border尺寸固定。

否則(應該是content-box)，div盒子的尺寸是內(nèi)部元素的尺寸，不含內(nèi)外邊距和邊框。

2.很迷：img是行內(nèi)替換元素，行內(nèi)元素的一種。所以居中不能用margin:0 auto，反而可以用text-align:center。

但是它也是比較特殊的行內(nèi)元素，所以有height、width、padding、margin等屬性。

3.偽元素:before和:after：在該元素的之前(or之后)應用這些樣式。(可以用于給父元素加after的偽元素來清除浮動)(或者按照W3school上面說的給footer加clear應該也沒問題)

附上我自己完成的幸福西餅案例源碼和圖片素材：

幸福西餅實戰(zhàn)案例(上傳于CSDN論壇)

百度首頁制作

百度的首頁制作就沒有參考什么教學和素材了，按照之前學到的思路，自己把網(wǎng)頁理解拆分成多個塊(div)，然后先寫好div結(jié)構和注釋，再往里面填html內(nèi)容，最后對每一部分進行添加CSS樣式。因為自己事情比較雜效率不是很高，加上經(jīng)常在一些細枝末節(jié)的地方過分糾結(jié)，斷斷續(xù)續(xù)大概做了一天時間。根據(jù)網(wǎng)上的推薦買了魚書《CSS權威指南》，還沒到，希望比較官方權威的這本教材可以解決我經(jīng)常在一些樣式的細枝末節(jié)的地方糾結(jié)的毛病了。(希望里面的案例豐富到可以解決我的疑惑)

做到一些實在不知道如何實現(xiàn)的地方的時候(比如右上角空氣質(zhì)量狀況的小文字)，我就去翻查百度s首頁源碼，并且試圖搞清楚。

在百度首頁的制作過程中：

發(fā)現(xiàn)的新問題和新知識：

1.父類和子類都有類選擇器的情況下，同一屬性似乎優(yōu)先按照父元素的類選擇器中的屬性值來算。

但是祖父元素和父元素都有類選擇器的情況下，又似乎變成按照先后順序來了。

希望CSS權威指南可以幫我解答疑惑。

查了百度源碼才知道：

2.文字背景色也是可以用border-radius來調(diào)整形狀的。用padding調(diào)整內(nèi)邊距，思路和圖片的一樣。(我怎么圖片的想出來了，文字的就沒想出來呢，迷惑)

3.可以用inline-block行內(nèi)塊元素來調(diào)整行的寬度高度等。

4.可以設置header的min-width，這樣來使頁面縮小時有一個最低限度，之后就需要左右滾動條，而不是header兩側(cè)的塊縮進來了。(也不容易讓字擠成一坨導致排版問題。)

5.可以用outline來處理選中input時候的丑陋邊框。

6.fixed和absolute的區(qū)別：fixed的塊會相對于窗口固定。

感謝各位的閱讀，以上就是“怎么用HTML+CSS制作幸福西餅首頁和百度首頁”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用HTML+CSS制作幸福西餅首頁和百度首頁這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

新聞標題：怎么用HTML+CSS制作幸福西餅首頁和百度首頁
文章出自：http://aaarwkj.com/article16/pdhedg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、建站公司、網(wǎng)頁設計公司、企業(yè)建站、網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)