小白筆記(三)——CSS-V3.0

新人小白在線學習
認真是一種態度

今天的學習內容從CSS導航欄開始。

CSS導航欄

熟練使用導航欄,對於任何網站都非常重要。
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
首先,我們要有一個概念,導航條等同於一個鏈接列表。

在這裏插入圖片描述
導航欄可以是垂直的,也可以是水平的,同時,我們也可以通過之前學到的知識,去爲導航欄設置底色以及邊框等等,使其看起來更爲美觀。也可以使用position將其位置固定。

CSS表單

CSS作爲可以讓Html美觀的工具,在表單這個地方同樣適用。
初始樣式:

在這裏插入圖片描述
使用CSS渲染後:
在這裏插入圖片描述
可以發現,通過CSS的渲染,表單看起來好看了很多,這就是我們在學習過Html後,接着學CSS的目的。下面用圖來看一下如何實現的:

在這裏插入圖片描述

CSS下拉菜單和提示工具

下拉菜單類似於下面這種形式,但下面這個做的較爲簡陋,同樣可以爲其加一個修飾,使其看起來更美觀。

在這裏插入圖片描述

在這裏插入圖片描述
當然,在下拉菜單中,我們日常都會放超鏈接進去,我們就可以將下拉菜單中的元素設置超鏈接,讓用戶可以選中,跳轉,這個過程進行時,也可以根據之前寫鏈接那一塊內容時學到的加入進去,知識就是這樣穿插着,伴隨着學習的加深,對基礎越來越熟練。


關於提示框,我覺得跟下拉菜單本質上是差不多的,都是鼠標移動過去,然後出現信息,只是一個是菜單形式,一個是提示信息。我們就可以趁熱打鐵,將剛纔的知識運用起來。

在這裏插入圖片描述

CSS網頁佈局

在這裏插入圖片描述

菜鳥教程:https://www.runoob.com/css/css-tutorial.html

CSS的筆記應該就這三篇了,明天我們將去學習CSS3,但我覺得有CSS的基礎,CSS3應該上手挺快的,明天可能就會挑一些重點難點去記,還是那句話,學這種,最重要的是實際操作,加油,沖沖衝!
再見。
如有不對或不準確,歡迎各位大佬指正(卑微)。

往期回顧:
小白筆記(一)——CSS-V1.0
小白筆記(二)——CSS-V2.0