HTML5 CSS3做的一個靜態的蘋果官網首頁

HTML5 CSS3做的一個靜態的蘋果官網首頁

簡介以及使用的工具

**介紹：**這次的一個項目是我年後學習HTML和CSS一個月後做的一個階段性的項目，花了一整天，這裏只講解寫代碼時候的具體思維，分析佈局的。具體的代碼我已經上傳到我的資源中。需要的可以去下載，或者加下作者的qq：1349869599，可以私發給你，不收取米，純屬相互交流，共同學習前端。交個朋友。

使用的工具

使用的具體工具是vscode瀏覽器用的是谷歌瀏覽器。大家也可以使用自己喜歡的軟件，反正能運行就行。

頭部導航欄講解

PC端（電腦）：

首先先說明這次的網頁用到了媒體查詢式，寫了一個PC端的樣式和一個手機端的樣式，默認在屏幕width700px以下是手機端的樣式，在1000px到2000px是電腦端的樣式，相當於寫了兩個頁面。是一個響應式的網站。

這裏先介紹一下響應式的具體內容：

@media screen and (min-width:1000px) {
//這裏的意思是屏幕的最小寬度爲1000px時的樣式，也就是我文章中說到的PC端
}
//同樣的M端爲：
@media screen and (max-width:1000px){
	
}

下面來到PC端的導航欄：

首先觀察這部分可以發現導航欄分爲兩個部分，上面顏色淺一點，下面的顏色深一點。

所以這部分使用三個div盒子，第一個div盒子作爲父級，剩下兩個作爲一個是淺色部分，一個是深色部分。其中深色部分的文字使用無序列表ul li，然後在css樣式中將li設置爲浮動樣式 float：left；即可實現li部分橫向排列，然後相鄰兩個li的距離自行設置。(注：深色部分的圖標可以去阿里圖標下載，具體這部分可以私信我或者後期我寫一份博客講解一下)

<nav>
        <div class="top_nav">
            <div class="top_add">
                <div>&lt;廣告&gt;</div>
            </div>
            <div class="top_nav_menu">
                <ul>
                    <li class="iconfont ic01"><a href="#" class="fs01">&#xe71c;</a></li>
                    <li class="nav_font"><a href="#">Mac</a></li>
                    <li class="nav_font"><a href="#">iPad</a></li>
                    <li class="nav_font"><a href="#">iPhone</a></li>
                    <li class="nav_font"><a href="#">Watch</a></li>
                    <li class="nav_font"><a href="#">Music</a></li>
                    <li class="nav_font"><a href="#">技術支持</a></li>
                    <li class="iconfont"><a href="#" >&#xe623;
                    </a></li>
                    <li class="iconfont ic00"><a href="#" class="fs">&#xe6e9;</a></li>
                </ul>
            </div>            
        </div>
    </nav>

手機端：

手機端口和PC端最明顯的區別就是導航欄的圖標。手機端換成了下拉式：可以在下拉按鈕設置觸發按鈕，點擊後下拉菜單（具體代碼太多見文件）

中間圖片區域

PC端

首先看到前3張圖片。這三張圖片的樣式都差不多，在導航欄下設置一個大的div 它的width是固定值，並且將大div的樣式屬性設置爲margin ：auto居中，這樣做的目的是防止父級坍塌。

然後在大的div設置三個div，三個div是兄弟關係，在三個div插入相應的圖片。然後在圖片上設置相應的文字，設置相應的樣式。設置樣式這裏不多說，具體看分享的資源。

這部分的6張圖片和上面圖片有着區別，一行有着兩張圖片，具體的實現方法有多種，一是將照片設置爲左浮動。二是和上面那部分講的一樣，先設置一個大盒子，大盒子的樣式和上面相同，然後每個照片設置小盒子，共有6個小盒子，每個盒子內部一張圖片，然後對每個盒子進行定位position ：relative；用的是相對定位，相對的是父級的大盒子，或者使用父級相對定位，子級絕對定位這個實現的效果和相對定位差不多，隨便你選哪個。（具體的實現見資源，這裏肯定放不出來）。

手機端

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vSWwz5rr-1592749998124)

手機端的中間部分由於都是單個圖片排在一行，所以這部分也很簡單和PC端前3張圖片一樣的樣式，所以這裏也不多詳細解釋，具體的代碼查看資源。

底部區域

PC端

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mQNfrZlb-1592749998125)

這一部分的樣式沒有多餘的可以講解，PC端這部分很簡單，首先設置一個大盒子div，背景顏色設置相應的顏色，控制margin值和padding值，然後下劃線下面的部分也存在多種方法可以實現效果。首先對各加粗的黑字部分設置爲無序列表結構 ul li ul的內容就是加粗字體，下面的部分就是li ，但li裏面還要嵌套一個a標籤，標籤寫上對應的文字內容。講這部分的結構放入一個div中，其餘的部分也是如此，然後設置左浮動。這是一種方法。另外的方法是在下劃線下面套上一個大盒子div，然後每個無序列表部分在這個大盒子div中進行定位position。

M端

這部分最大的區別就是黑色字體部分，這部分和上面的頭部導航欄一樣的原理，設置觸發事件，然後就會出現下拉框，由於原理一樣這裏就不多解釋，具體參考分享的資源或者私信博主分享。
項目的簡介到這裏就結束了，另外給大家說明一下，實現相應的樣式有很多種方法，博主在這裏只是分享自己當時寫項目的思考內容。每個人對於項目樣式的實現有着自己的理解，若大家自己的想法實現後能達到相應的結果，自然是更好。感謝大家觀看。