|
IT行業(yè)近十年來發(fā)展迅猛，衍生出許多新的職業(yè)，如UI設計師、開發(fā)工程師、軟件測試工程師等，在眾多新興職業(yè)中，Web前端工程師就是其中之一。在IT行業(yè)，Web前端真正得到重視大概也要六七年。伴隨著因特網的迅速發(fā)展，各種因特網項目不斷涌現(xiàn)，對用戶體驗的要求也越來越高，前端開發(fā)逐漸成為互聯(lián)網研發(fā)的重要角色。 CSS導航欄
導航欄熟練使用導航欄，對于任何網站都非常重要。 使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。 導航欄=鏈接列表作為標準的HTML基礎一個導航欄是必須的 。在我們的例子中我們將建立一個標準的HTML列表導航欄。 導航條基本上是一個鏈接列表，所以使用<ul>和<li>元素非常有意義： <ul> <li><a href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯(lián)系</a></li> <li><a href="#about">關于</a></li> </ul> 現(xiàn)在，讓我們從列表中刪除邊距和填充： ul { list-style-type: none; margin: 0; padding: 0;
}例子解析： list-style-type:none-移除列表前小標志。一個導航欄并不需要列表標記 移除瀏覽器的默認設置將邊距和填充設置為0 上面的例子中的代碼是垂直和水平導航欄使用的標準代碼。 垂直導航欄上面的代碼，我們只需要元素的樣式，建立一個垂直的導航欄： a{ display:block; width:60px;
}示例說明： display:block-顯示塊元素的鏈接，讓整體變?yōu)榭牲c擊鏈接區(qū)域（不只是文本），它允許我們指定寬度 width:60px-塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度 注意：請務必指定元素在垂直導航欄的的寬度。如果省略寬度，IE6可能產生意想不到的效果。 垂直導航條實例創(chuàng)建一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色：
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;
}
li a { display: block; color: #000; padding: 8px 16px; text-decoration: none;
}
/* 鼠標移動到選項上修改背景顏色 */li a:hover { background-color: #555; color: white;
}激活/當前導航條實例在點擊了選項后，我們可以添加"active"類來標準哪個選項被選中：
.active { background-color: #4CAF50; color: white;
}創(chuàng)建鏈接并添加邊框可以在<li>or上添加text-align:center樣式來讓鏈接居中。 可以在border<ul>上添加border屬性來讓導航欄有邊框。如果要在每個選項上添加邊框，可以在每個<li>元素上添加border-bottom: ul { border: 1px solid #555;
}
li { text-align: center; border-bottom: 1px solid #555;
}
li:last-child { border-bottom: none;
}全屏高度的固定導航條接下來我們創(chuàng)建一個左邊是全屏高度的固定導航條，右邊是可滾動的內容。 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果導航欄選項多，允許滾動 */}注意:該實例可以在移動設備上使用。 水平導航欄有兩種方法創(chuàng)建橫向導航欄。使用內聯(lián)(inline)或浮動(float)的列表項。 這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。 內聯(lián)列表項建立一個橫向導航欄的方法之一是指定元素，上述代碼是標準的內聯(lián): li{ display:inline;
}實例解析： display:inline;-默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。 浮動列表項在上面的例子中鏈接有不同的寬度。 對于所有的鏈接寬度相等，浮動<li>元素，并指定為元素的寬度： li{ float:left;
}a{ display:block; width:60px;
}實例解析： float:left-使用浮動塊元素的幻燈片彼此相鄰 display:block-顯示塊元素的鏈接，讓整體變?yōu)榭牲c擊鏈接區(qū)域（不只是文本），它允許我們指定寬度 width:60px-塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度 水平導航條實例創(chuàng)建一個水平導航條，在鼠標移動到選項后修改背景顏色。 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;
}
li { float: left;
}
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
/*鼠標移動到選項上修改背景顏色 */li a:hover { background-color: #111;
}激活/當前導航條實例在點擊了選項后，我們可以添加"active"類來標準哪個選項被選中： .active { background-color: #4CAF50;
}鏈接右對齊 將導航條最右邊的選項設置右對齊(float:right;)： <ul> <li><a href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯(lián)系</a></li> <li style="float:right"><a class="active" href="#about">關于</a></li> </ul> 添加分割線 <li>通過border-right樣式來添加分割線: /* 除了最后一個選項(last-child) 其他的都添加分割線 */li { border-right: 1px solid #bbb;
}
li:last-child { border-right: none;
}固定導航條 可以設置頁面的導航條固定在頭部或者底部： 固定在頭部 ul { position: fixed; top: 0; width: 100%;
}固定在底部 ul { position: fixed; bottom: 0; width: 100%;
}注意:該實例可以在移動設備上使用。 灰色水平導航條固定在底部 ul { border: 1px solid #e7e7e7; background-color: #f3f3f3;
}
li a { color: #666;
}前端學習永遠不會是單槍匹馬，需要前人的引領，也需要平臺的不斷交流與思想碰撞。這能夠快速入門，減少走彎路，還能讓自己找到問題的根源。 |
|
|
