導航菜單的一般做法_ZenDei技術網路在線

導航菜單的一般做法

-Advertisement-

...

<!DOCTYPE html>
<html>
<head>
<title>導航欄的做法之一</title>
<style>
/*這是導航條****************************************************************************/
    /*容器是用來裝那個存放了a標簽的div*/
    .rongqi{
        background:#2C323B;
        height:55px;
        width:100%;
        margin:80px 0px;
    }
    /*導航條裡面各個a標簽的總寬度，當前是六個a的寬度，每個a寬度預設是200px*/
    #top{
        //border:solid #fff 1px;
        margin:0px auto;
        width:1200px;
        height:55px;
        
    }
    /*hanghang是a標簽的class*/
    .hanghang{
        font-size:20px;
        color:#DDDDDD;
        text-align:center;
        line-height:50px;
        float:left;
        width:200px;
        height:55px;
        margin-left:0px;
        list-style-type:none;
        background:#2C323B;
        text-decoration:none;
    }
    .hanghang:hover{
        list-style-type:none;
        color:#ffffff;
        font-weight:800;
        background:#0C8ED9;
    }
/*****************************************************************************這是導航條/    
</style>
</head>
<body>
<!--這是導航條***************************************************************************-->
    <div class="rongqi">
        <div id="top">
            <a class="hanghang" href="#">首頁</a>
            <a class="hanghang" href="#">導航1</a>
            <a class="hanghang" href="#">導航2</a>
            <a class="hanghang" href="#">導航3</a>
            <a class="hanghang" href="#">導航4</a>
            <a class="hanghang" href="#">導航5</a>
        </div>
    </div>
<!--***************************************************************************這是導航條-->
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

docker nginx1.7.6+keepalived實現雙基熱備

0.前提條件環境兩台ubuntu版本14.04 64位系統（並獲取root許可權）假設兩台伺服器ip為：172.16.34.214(master),172.16.34.215(backup),keepalived的虛擬ip為172.16.34.216 兩台ubuntu系統上裝好docker，版本如 ...
jQuery owlcarousel 旋轉木馬

owlcarousel是一款貓頭鷹旋轉木馬插件。OwlCarousel優勢相容所有瀏覽器支持響應式支持 CSS3 過度支持觸摸事件支持 JSON 及自定義 JSON 格式支持進度條支持自定義事件支持延遲載入支持自適應高度線上實例使用方法複製複製參數詳解 itemsCustom itemsS ...
關於HTML面試題彙總之visibility

一、頁面可見性（visibility）主要提供兩個屬性，一個事件（都在document對象上）：1. 屬性： 1.1. hidden：獲取或設置當前頁面的可見性，boolean值； 1.2. visibilityState: 獲取當前頁面可見性狀態，值為hidden、visibility其中一個2... ...
css01

1、常用屬性：①color：文本顏色；②background-color：背景顏色；③font-size：文字大小； 2、樣式聲明：①內部樣式：style=“樣式規則；”，寫於作用標簽內，優先順序最高；②內聯樣式：<style>樣式規則</style>，寫於head標簽內，優先順序其次；③外聯樣式： ...
正則表達式個人總結(一)：正則表達式語法的深入理解第一部分

前言：正則表達是就是用特殊字元組成的有一定規則的邏輯公式(規則字元串)，主要用於對字元串進行過濾操作。正則表達式的三個功能： 1.快速匹配指定的字元串； 2.替換遵照正則表達式規則的字元串； 3.在目標字元串中篩選指定的子字元串；正則表達式的語法：正則表達式是由普通字元(例如:a-z)和元字 ...
h5自定義audio（問題及解決）

h5活動需要插入音頻，但又需要自定義樣式，於是自己寫咯 html css js 以上基本可以實現自定義音頻播放，但是在拖動進度條的時候出現了問題，電腦上是ok的，但是在手機上可以拖動，只不過音頻的總時長比正常播放少了好幾分鐘，導致拖動進度後播放不准確。通過測試發現手機上拿到的duration（總時長 ...
關於css旋轉動畫

我們可以通過css來做出動畫效果，下麵我為大家演示的是div的旋轉，顏色過渡的動畫效果自己測試，很絢麗哦 ...
javascript中12種DOM節點類型概述

× 目錄 [1]元素 [2]特性 [3]文本[4]CDATA[5]實體引用[6]實體名稱[7]處理指令[8]註釋[9]文檔[10]文檔類型[11]文檔片段[12]DTD 前面的話 DOM是javascript操作網頁的介面，全稱為文檔對象模型(Document Object Model)。它的作用是 ...