導航欄的建立

2021-05-26 08:53:20 字數 1191 閱讀 3080

導航欄的建立

*/ -->

1.2 新增css,讓原本縱排的列表,橫著排。

1.3 新增css,設定a標籤樣式。設定a標籤為塊狀,內邊距(避免重疊在一起)

2 較複雜的導航欄

2.2 對a標籤的更複雜設定,背景色、文字顏色、去下劃線、加分割線

2.3 滑鼠懸停效果

2.4 居中對齊文字,將行高(line-height)和高度(height)設為同一值,可使當行文字垂直居中

1.1.1 **:

1.1.2 表現

表現1 無css

1.2.1 **

float:left; * 往左浮動 * }

1.2.2 表現

表現2 左浮動li標籤

1.3.1 **

display: block; padding: 8px 50px;

1.3.2 表現

表現3 設塊狀a標籤,內邊距

2.1.1 **

list-style:none; * 將預設的列表符號去掉 * }

2.1.2 表現

表現4 去除符號列表

2.2.1 **

background:#3a4953; * 設定背景色 * color:#fff; * 設定文字顏色 * text-decoration:none; * 去掉下劃線 * border-right:1px solid #000; * 在左側加上分隔線 *

2.2.2 表現

表現5 複雜css

2.3.1 **

background:#146c9c; * 變換背景色 * color:#fff; * 變換文字顏色 * }

2.3.2 表現(滑鼠選中"sevem"的效果)

表現6 滑鼠懸停a:hover屬性

2.4.1 **

width:150px; * 設定寬度 * height:30px; * 設定高度 * line-height:30px; * 設定行高,將行高和高度設定同乙個值,可以讓單行文字垂直居中 * text-align:center; * 居中對齊文字 *

2.4.2 表現

表現7 文字對齊

author:

date: 2011-06-28 23:45:14

html generated by org-mode 6.33x in emacs 23

建立 水平 導航欄

html head style type text css ula a hover li style head body ul li a href link one a li li a href link two a li li a href link three a li li a href li...

簡單建立底部導航欄框架

布局 在主線程實現 建立bottomtabbar控制項 bottomtabbar bottomtabbar findviewbyid r.id.bottom tab bar 設定底部導航文字和fragment bottomtabbar.init getsupportfragmentmanager 第...

簡易導航欄

知識點 塊級元素 行內元素 行內塊 的區別 特點?塊級元素 獨佔一行 可以設定寬度 高度 內外邊距 寬度預設是容器 父級寬度 的100 是乙個容器或者盒子,裡面可以放塊級或者行內元素 注意 文字類的元素 例如 p元素,h1 h6元素 內不能放 塊級元素 行內元素 相鄰行內元素,一行顯示多個 寬度 和...