怎么用HTML+CSS制作幸福西餅首頁(yè)和百度首頁(yè)

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

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

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

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

Html：

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

CSS:

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

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

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

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

height：元素的高度。

visibility：元素是否可見。

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

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

outline：輪廓線。

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

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

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

CSS選擇器：

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

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

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

新知識(shí)點(diǎn)：

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

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

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

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

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

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

深刻學(xué)習(xí)到的思想：要把頁(yè)面拆分成很多個(gè)盒子，每一個(gè)部分都是一個(gè)盒子。盒子套盒子。

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

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

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

新知識(shí)點(diǎn)：

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

否則(應(yīng)該是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之后)應(yīng)用這些樣式。(可以用于給父元素加after的偽元素來(lái)清除浮動(dòng))(或者按照W3school上面說(shuō)的給footer加clear應(yīng)該也沒問題)

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

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

百度首頁(yè)制作

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

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

在百度首頁(yè)的制作過(guò)程中：

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

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

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

希望CSS權(quán)威指南可以幫我解答疑惑。

查了百度源碼才知道：

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

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

4.可以設(shè)置header的min-width，這樣來(lái)使頁(yè)面縮小時(shí)有一個(gè)最低限度，之后就需要左右滾動(dòng)條，而不是header兩側(cè)的塊縮進(jìn)來(lái)了。(也不容易讓字?jǐn)D成一坨導(dǎo)致排版問題。)

5.可以用outline來(lái)處理選中input時(shí)候的丑陋邊框。

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

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

新聞標(biāo)題：怎么用HTML+CSS制作幸福西餅首頁(yè)和百度首頁(yè)
文章出自：http://muchs.cn/article16/pdhedg.html

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

廣告

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