《淘寶項目開發筆記二》
今天主要是從佈局規劃用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塌陷的問題。
第三:逐個對標籤進行樣式修訂,只列舉知識重點內容如下:
使用僞類觸發鼠標移動標籤上發生顏色、樣式的改變。
哈哈好像沒有其它要注意的了,就是多寫多看視頻。