資訊專欄INFORMATION COLUMN
摘要：一導航菜單橫向?qū)Ш酱a如下橫向?qū)Ш讲藛问醉撔侣劼?lián)系關(guān)于效果圖豎向?qū)Ш酱a如下首頁新聞聯(lián)系關(guān)于效果圖二下拉菜單和切換實現(xiàn)代碼如下下拉菜單你好我好大家好效果圖持續(xù)更新，歡迎各位指教
一、導航菜單 1.橫向?qū)Ш?/b>
代碼如下：
橫向?qū)Ш讲藛?/title>
<style>
body{
margin:0;
}
ul{
list-style-type:none;
background-color: #f3f3f3;
position: fixed;
overflow:hidden;
margin:0;
padding:0;
width:100%;
position:fixed;
border-bottom:1px solid #e7e7e7;
}
ul li{
float:left;
text-align: center;
}
ul li a{
color:#666;
text-decoration:none;
padding:8px 16px;
display:block;
width:60px;
}
ul li a:hover{
background-color:#ffffd;
}
ul li:last-child{
float:right;
border-right:none;
}
li:last-child {
border-bottom: none;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
<link rel="stylesheet" type="text/css" href="demo02.css"/>
</head>
<body>
<ul>
<li><a href="#" class="active">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">聯(lián)系</a></li>
<li style="f"><a href="#">關(guān)于</a></li>
</ul>
<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
</pre>
<p>效果圖：<br><script type="text/javascript">showImg("https://segmentfault.com/img/bVbdUkB?w=636&h=440");</script></p>
<b>2.豎向?qū)Ш?/b>
<p>代碼如下：</p>
<pre><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>
Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.
Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
Some text..
Some text..
Some text..
Some text..
Some text..
Some text..
Some text..
效果圖：
display：none和display：block切換實現(xiàn)
代碼如下：
- 你好！
- 我好！
- 大家好！
效果圖：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116907.html
摘要：一導航欄導航欄的作用熟練使用導航欄，對于網(wǎng)站排版非常重要使用你可以轉(zhuǎn)換成好看的導航欄而不是枯燥的菜單。下拉菜單代碼如下下拉菜單你好我好大家好效果圖如下眼睛累了吧，注意勞逸結(jié)合呀 一、CSS導航欄 （1）導航欄的作用 熟練使用導航欄，對于網(wǎng)站排版非常重要,使用CSS你可以轉(zhuǎn)換成好看的導航欄而不是枯燥的HTML菜單。 （2）垂直導航欄 代碼如下 ...
摘要：需求當鼠標到按鈕上時，出現(xiàn)下拉菜單導航條。設置是，默認寬度為內(nèi)容寬度，則鼠標只會在到按鈕區(qū)域時才會展開下拉菜單以上是我的一些想法以及實現(xiàn)，如有錯誤之處，歡迎各位前端大神留言評論拍磚。 前言：本題是網(wǎng)易云課堂的前端微專業(yè)《頁面制作》課程的作業(yè)題，當時對題意理解錯誤沒有實現(xiàn)題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關(guān)知識點進行了總結(jié)，寫了這篇博文...
摘要：需求當鼠標到按鈕上時，出現(xiàn)下拉菜單導航條。設置是，默認寬度為內(nèi)容寬度，則鼠標只會在到按鈕區(qū)域時才會展開下拉菜單以上是我的一些想法以及實現(xiàn)，如有錯誤之處，歡迎各位前端大神留言評論拍磚。 前言：本題是網(wǎng)易云課堂的前端微專業(yè)《頁面制作》課程的作業(yè)題，當時對題意理解錯誤沒有實現(xiàn)題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關(guān)知識點進行了總結(jié)，寫了這篇博文...
摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結(jié)果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...
摘要：一導航菜單橫向?qū)Ш酱a如下橫向?qū)Ш讲藛问醉撔侣劼?lián)系關(guān)于效果圖豎向?qū)Ш酱a如下首頁新聞聯(lián)系關(guān)于效果圖二下拉菜單和切換實現(xiàn)代碼如下下拉菜單你好我好大家好效果圖持續(xù)更新，歡迎各位指教 一、導航菜單 1.橫向?qū)Ш?代碼如下： 橫向?qū)Ш讲藛? body{ margin:0; } ul{ ...
閱讀 2027·2021-11-08 13:14
閱讀 2934·2021-10-18 13:34
閱讀 2021·2021-09-23 11:21
閱讀 3581·2019-08-30 15:54
閱讀 1752·2019-08-30 15:54
閱讀 2918·2019-08-29 15:33
閱讀 2568·2019-08-29 14:01
閱讀 1940·2019-08-29 13:52
