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><廣告></div>
</div>
<div class="top_nav_menu">
<ul>
<li class="iconfont ic01"><a href="#" class="fs01"></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="#" >
</a></li>
<li class="iconfont ic00"><a href="#" class="fs"></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端
這部分最大的區別就是黑色字體部分,這部分和上面的頭部導航欄一樣的原理,設置觸發事件,然後就會出現下拉框,由於原理一樣這裏就不多解釋,具體參考分享的資源或者私信博主分享。
項目的簡介到這裏就結束了,另外給大家說明一下,實現相應的樣式有很多種方法,博主在這裏只是分享自己當時寫項目的思考內容。每個人對於項目樣式的實現有着自己的理解,若大家自己的想法實現後能達到相應的結果,自然是更好。感謝大家觀看。