HTML+CSS 二級導航

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML+CSS 二級導航</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style: none;
}
a{
    color: #000;
    display: block;
    width: 140px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
}
/* ******************************************* */
.nav{
    width: 100%;
    height: 40px;
    background-color: skyblue;
}
.nav>ul{
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    /* 這個背景色是方便大家伙看的 */
    /* background-color: red; */
}
.nav>ul>li{
    float: left;
    width: 140px;
    height: 40px;
    /*讓ol(二級導航根據他進行定位 所以li進行相對定位)*/
    position: relative;
}
.nav>ul>li>ol{
    background-color: skyblue;
    position: absolute;
    left: 0;
    top: 40px;
    display: none;/*初始值隱藏*/
}
/* 懸浮的效果 */
a:hover{
    color: #fff;
    background-color: deepskyblue;
}
.nav>ul>li:hover>a{
    color: #fff;
    background-color: deepskyblue;
}
.nav>ul>li:hover>ol{
    display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首頁</a></li>
<li>
<a href="">法師</a>
<ol>
<li><a href="">妲己</a></li>
<li><a href="">甄姬</a></li>
<li><a href="">安琪拉</a></li>
<li><a href="">張良</a></li>
</ol>
</li>
<li><a href="">戰士</a></li>
<li>
<a href="">刺客</a>
<ol>
<li><a href="">荊軻</a></li>
<li><a href="">張飛</a></li>
<li><a href="">關羽</a></li>
<li><a href="">黃忠</a></li>
<li><a href="">馬超</a></li>
<li><a href="">趙云</a></li>
<li><a href="">許諸</a></li>
</ol>
</li>
<li><a href="">射手</a></li>
<li><a href="">坦克</a></li>
<li>
<a href="">輔助</a>
<ol>
<li><a href="">蔡文姬</a></li>
<li><a href="">鬼谷子</a></li>
<li><a href="">莊周</a></li>
</ol>
</li>
</ul>
</div>
<p>HTML+CSS 二級導航</p>
</body>
</html>

過 HTML DOM，您能夠使用節點關系在節點樹中導航。

HTML DOM 節點列表

getElementsByTagName() 方法返回節點列表。節點列表是一個節點數組。

下面的代碼選取文檔中的所有 <p> 節點：

實例

varx=document.getElementsByTagName("p");

可以通過下標號訪問這些節點。如需訪問第二個 <p>，您可以這么寫：

y=x[1];

嘗試一下 ?

注意：

下標號從 0 開始。

HTML DOM 節點列表長度

length 屬性定義節點列表中節點的數量。

您可以使用 length 屬性來循環節點列表：

實例

x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}

實例解析：

獲取所有 <p> 元素節點
輸出每個 <p> 元素的文本節點的值

導航節點關系

您能夠使用三個節點屬性：parentNode、firstChild 以及 lastChild ，在文檔結構中進行導航。

請看下面的 HTML 片段：

<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了節點的關系。</p></div></body></html>

首個 <p> 元素是 <body> 元素的首個子元素（firstChild）
<div> 元素是 <body> 元素的最后一個子元素（lastChild）
<body> 元素是首個 <p> 元素和 <div> 元素的父節點（parentNode）

firstChild 屬性可用于訪問元素的文本：

實例

<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>

嘗試一下 ?

DOM 根節點

這里有兩個特殊的屬性，可以訪問全部文檔：

document.documentElement - 全部文檔
document.body - 文檔的主體

實例

<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了 <b>document.body</b> 屬性。</p></div><script>alert(document.body.innerHTML);</script>

嘗試一下 ?

childNodes 和 nodeValue

除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。

下面的代碼獲取 id="intro" 的 <p> 元素的值：

實例

<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>

嘗試一下 ?

在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。

在網頁底部分頁看到這樣的效果是不是看上去還不錯？下面就來看看這是如何實現的吧~

第一種方法：利用border

一個矩形拼接兩個三角形最終制造出一個平行四邊形。為什么使用border可以產生三角形呢？先來看看一張圖片：

看了圖中的三個小圖形的變化過程，你應該已經清楚了一半。其實 hack 出三角形只需要兩個條件，第一，元素本身的長寬為0；其次，將不需要的部分通過 border-color 來設置隱藏。通過類似的方法，你還可以創造出梯形，上圖中的三個圖形的代碼如下

CSS

#first {
  width:20px;
  height:20px;
  border-width:10px;
  border-style:solid;
  border-color:red green blue brown;
}
 
#second {
  width:0;
  height:0;
  border-width:10px;
  border-style:solid;
  border-color:red green blue brown;
}
 
#third {
  width:0;
  height:0;
  border-width:10px;
  border-style:solid;
  border-color:red transparent transparent transparent;
}

接下來就要考慮如何拼接出一個平行四邊形了。在border法中，它由三部分組成，分別是左三角形、矩形、右三角形。如果每次繪制平行四邊形都要創建三個元素顯然過于麻煩了，所以在這里:before和:after偽元素是個不錯的選擇。下面我們實現一下這樣的效果：

為了將三角形與矩形無縫拼接到一起，多處屬性要保持一致，所以使用類似 Less, Sass, Stylus 等 CSS 預處理器來寫這段代碼會更容易維護，下面給出 Scss 版本的代碼，其他預處理代碼類似

//三角形的寬高
$height:24px;
$width:12px;
 
//對平行四邊形三部分的顏色進行賦值
@mixin parallelogram-color($color){
  background:$color;
  &:before {border-color:transparent $color $color transparent;}
  &:after {border-color:$color transparent transparent $color;}
}
 
//單個三角形的樣式
@mixin triangle(){
  content:'';
  display:block;
  width:0;
  height:0;
  position:absolute;
  border-style:solid;
  border-width:$height / 2 $width / 2;
  top:0;
}
 
//平行四邊形的樣式
.para {
  display:inline-block;
  position:relative;
  padding:0 10px;
  height:$height;
  line-height:$height;
  margin-left:$width;
  color:#fff;
 
  &:after {
    @includetriangle();
    right:-$width;
  }
 
  &:before {
    @include triangle();
    left:-$width;
  }
 
  @include parallelogram-color(red);
}

需要注意的是，如果通過 $height、$width 設置的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測試一下不同的寬高所得到的視覺效果如何。

第二種方法：利用transform

使用transform來實現平行四邊形的方法效果大概是這個樣子

原來還可以只有平行四邊形的外輪廓。（因為方法一只能創造填充效果的平行四邊形）實現起來非常簡單，主要是借助了transform: skew(...)，下面就來看看源碼吧

<style>
.city {
  display:inline-block;
  padding:5px 20px;
  border:1px solid #44a5fc;
  color:#333;
  transform:skew(-20deg);
}
</style>
 
<div class="city">上海</div>

于是我們得到了這樣的效果：

看到圖片的你一定是這樣想的：

別著急嘛，我們的確是把整個 div 進行了歪曲，導致中間的文字也是傾斜的，而這顯然不是我們所要的效果。所以我們需要加一個內層元素，并對內層元素做一次逆向的歪曲，從而得到我們想要的效果：

實現代碼如下

<style>
.city {
  display:inline-block;
  padding:5px 20px;
  border:1px solid #44a5fc;
  color:#333;
  transform:skew(-20deg);
}
 
.city div {
  transform:skew(20deg);
}
</style>

<div class="city">
  <div>上海</div>
</div>

總結

第一種方法使用 border 屬性 hack 出三角形，并通過對三個元素進行拼接最終實現了平行四邊形；而第二種方法則通過 transform: skew 來得到平行四邊形。總體來說，第二種方法相對于第一種代碼量小得多，而且也很好理解。唯一的不足是無法構造像本站的分頁中所使用的梯形。希望本文對各位有所幫助。

在線咨詢

上一篇：Python 模塊介紹之calendar
下一篇：說說overflow- hidden的作用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML+CSS 二級導航

第一種方法：利用border

第二種方法：利用transform

總結

您的項目需求