簡易導航欄

2021-10-09 17:15:40 字數 600 閱讀 8745

知識點:

塊級元素 / 行內元素 / 行內塊 的區別/特點?

塊級元素

獨佔一行

可以設定寬度 高度 內外邊距

寬度預設是容器(父級寬度)的100%

是乙個容器或者盒子,裡面可以放塊級或者行內元素

注意:文字類的元素(例如 :p元素,h1-h6元素)內不能放 塊級元素

行內元素

相鄰行內元素,一行顯示多個

寬度 和 高度 設定無效

預設寬度是 本身內容的寬度

行內元素 內只能容納 文字或者其他行內元素

注意: 鏈結內不能再放鏈結; 鏈結a內可以放塊級元素,需要將鏈結切換成 塊級元素最安全

行內塊元素

相鄰元素一行顯示 但元素和元素之間有空隙 (行內元素特點)

預設寬度是元素本身內容寬度(行內元素)

可以設定元素的寬度,高度及內外邊距 (塊級元素特點)

1314

效果圖

小公尺導航欄

恢復內容開始 1 cursor 是在平時的基礎學習中見不到屬性 2 padding 上 右 下 左 padding 上 右左 下 padding 上下 左右 padding 上下左右 3 z index 屬性設定元素的堆疊順序,擁有 在相同頁面內用上下的區分 z index num1 num2 nu...

導航欄的建立

導航欄的建立 1.2 新增css,讓原本縱排的列表,橫著排。1.3 新增css,設定a標籤樣式。設定a標籤為塊狀,內邊距 避免重疊在一起 2 較複雜的導航欄 2.2 對a標籤的更複雜設定,背景色 文字顏色 去下劃線 加分割線 2.3 滑鼠懸停效果 2.4 居中對齊文字,將行高 line height...

窗簾式導航欄

settimeout obj hover over,out over 滑鼠移到元素上要觸發的函式 out 滑鼠移出元素要觸發的函式 obj stop queue clearqueue jumptoend queue 用來停止動畫的佇列名稱 clearqueue 如果設定成true,則清空佇列。可以立...