前端學習筆記(五)

2021-07-10 10:00:48 字數 770 閱讀 5179

學習完w3school中的html和css基礎,嘗試著做一些簡單的頁面

①用**進行布局,**進行布局,好處在於**簡單,邏輯性不是很強,實現快,但是如果需要修改頁面的話,就比較麻煩,而且有時候載入頁面時間比較長。下面是實現的頁面效果。

**進行布局的時候有多重巢狀,需要細心,防止出現漏寫或者標籤未關閉的情況,造成時間上的不必要的浪費。

②使用div+css進行簡單的頁面製作。這種布局模式邏輯性強,會出現重疊或者錯位的情況。作者在製作的時候就因為沒有在乙個div塊裡面操作造成了很大的錯誤。下面是實現的效果圖(練習效果,頁面很醜,大家當做反面教材吧)還有乙個嚴重的錯誤就是給塊定義寬度的時候使用了絕對寬度,導致網頁在放大和縮小的時候造成了網頁布局上面的錯亂,在此建議大家,以後給div塊定義寬度的時候使用相對寬度,不要使用絕對寬度,這樣就可以適應網頁的放大和縮小

因為在布局的時候出現的乙個錯誤,導致最後出現的結果不盡如人意。比如無法適應其他瀏覽器,我用的是chrome,然後就是在頁面進行放大縮小的時候,頁面會出現錯位的情況,究其原因就是在布局的時候,沒有在乙個整體上面進行操作,導致只在一種情況下製作頁面, 最終的效果也就非常差。下面是將頁面進行放大以後的效果:

前端開發學習筆記五

幽靈按鈕最近很流行,就尋思著做了乙個,它有如下一些效果。其中按鈕上的線條和圖示的旋轉完全用css3中的transtion和transform來實現,其中圖示的旋轉效果實現過程如下 link img.mis img.link img hover按鈕的線條效果與上面的方法類似,而按鈕上的提示文字使用js...

第五次web前端學習筆記

掌握css的定位和層級顯示 1 固定定位 2 絕對定位 3 相對定位 4 元素的顯示方式 5 元素的層級 2021年1月6日 1 技術筆記 1遍 2 csdn 技術部落格 1 篇 3 製作58同城登入介面 charset utf 8 title type text css d1 固定定位 d2a s...

前端學習筆記

前端 做網頁 靜態網頁 動態的web應用 前後端分離的單頁應用 資料 json ajax html css js jquery ajax 開發工具notepad hbuilder vscode webstorm 瀏覽器 谷歌 firefox edge 什麼是html hypertext makeup...