《淘寶項目開發筆記二》

《淘寶項目開發筆記二》

 

今天主要是從佈局規劃用html的標籤進行寫代碼:

使用的編輯器:VScode / sublime

1.創建html文件(主要使用div+css佈局)輸入html 按tab鍵:

title網頁頁眉的標籤

link鏈接的是一長icon格式的圖片,請把它放在根目錄下(與html文件一個目錄下面,考量不同瀏覽器的兼容性,因爲不同瀏覽器讀取的favicon.ico目錄不一樣,所以放在根目錄下直接引用名稱就好了,不許號用“/”等符合進行轉義)

2.接下來分析框架

①的部分已經完成

頭部信息欄位拆分爲②+③兩個部分

一個符號,一個文字欄位都需要一個表籤,所以②有5個標籤,③有18個標籤。

3.如何實現:①採用左浮動,②採用右浮動(浮動的父級需要取消浮動);一般這種表單採用表單標籤<ul>

這裏補充一下:圖形化文字,如下圖這種購物車圖形,星星圖形,下三角都是圖形化的文字。

這是阿里媽媽圖形化文字下載的網站https://www.iconfont.cn/ (可以百度搜索一下怎麼使用)

以上是html框架內容分析,接下來是css代碼分析:

第一:代碼引入方式

第二:初始化樣式(很重要)根據個人風格來

儘量用到什麼標籤就針對這些標籤進行初始化設置,最好不要通配,考量網頁性能。

這個就不做分析了(重點列舉幾個)。

字體設置:

整體框架縮放設置:

浮動、清除浮動設置。因爲後面需要大量用到,所以進行初始化設置

清除浮動三步走:第三步clear:both表示首尾都清除浮動,清除浮動是爲了解決margin塌陷的問題。

第三:逐個對標籤進行樣式修訂,只列舉知識重點內容如下:

使用僞類觸發鼠標移動標籤上發生顏色、樣式的改變。

哈哈好像沒有其它要注意的了,就是多寫多看視頻。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章