左側導航欄

阿新 • • 發佈：2018-12-23

實現左側導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        a{
            text-decoration: none;
        } 

        nav {
            width: 180px;
            float: left;
            height: 100%;
            display: block;
        }
        nav li{position: relative;}
        nav li a{
            line-height: 28px;
            display: block;
            color: black;
            background: #FAFAFA;
            text-align 
: center;
            position: relative;
            font-size: 12px;
            border: 1px solid #ECECEC;
            margin-top: -1px;
        }
        nav li a:before{
            content: "";
            background: red url(寫上地址) no-repeat;
            display: block;
            width: 14px 
;
            height: 14px;
            position: absolute;
            top: 6px;
            left: 31px;
            border-radius: 100%;
        }
        nav li a:hover{
            background:#FFFFFF;
            border-right-color: #FFFFFF;
        }
        nav li .air{
            position: absolute;
            top: 50%;
            margin-top: -9px;
            right: 10px;
            display: block;
            background: #ED8B8A;
            border-radius: 10px;
            padding: 1px 9px;
            color: white;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div style="min-width:900px;width:90%">
    <nav>
        <ul>
            <li><a href="?cat=1">使用者資訊</a></li>
            <li><a href="?cat=2">我的收藏</a></li>
            <li><a href="?cat=3">訂閱資訊</a></li>
            <li><a href="?cat4">瀏覽歷史</a></li>
            <li><a href="?cat=5">訊息中心 </a><span class='air'>1</span></li>
        </ul>
    </nav>
    <div style="float:left;width:78%;border:1px solid #ECECEC;display:block" >
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div>你好111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>
    </div>
</body>
</html>

實現效果
這裡寫圖片描述

使用網頁巢狀iframe標籤，點選左側導航欄，在右側動態顯示頁面的資訊

<div class="main">  <div class="main_left"> <div class="li_title">使用者管理<span

chrome 網頁左側導航欄不展開

chrome 網頁左側導航欄不展開現象程式碼 <li class="one"> <a href="#"><i class="fa fa-sitemap"></i> <span class=

固定左側導航欄

<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</title> <meta

左側導航欄

實現左側導航欄 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <

修改layui的後臺模板的左側導航欄可以伸縮

原生的左側導航欄程式碼： <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"&g

bootstrap如何實現左側導航欄，右側網頁

方式一：採用iframe,即將網頁放入iframe這個容器中。方式二：採用div的話繫結a或者li的點選事件阻止a的預設行為，用jquery的load（）可以來載入這個div，即將網頁放入div中。方式三：angular的巢狀路由也可以實現。不過本人對angu

jquery實現angular左側導航欄,頁面重新整理仍選中

1、最近幫新來的同事寫了一個基於angular專案的左側導航欄，由於之前的導航採用ng-repeat生成，用angular事件處理，程式碼量較大專案用了阿里字型、jquery外掛效果圖如下： 2

後臺管理頁面左側導航欄

效果圖： HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery後臺左側伸縮選單程式碼 - 站長素材</titl

java 遞迴動態實現左側導航欄

之前專案中是使用的最多兩級選單，所以當時寫的是兩個for 迴圈，一旦多層選單，維護起來就麻煩，所以今天使用遞迴實現導航欄動態生成。在這裡主要java 後臺程式碼，以及簡單js 遞迴後臺json 資料。資料庫就沒有在這裡設計。1、Menu實體類package c

AngularJS學習-(左側導航欄篩選、input輸入框篩選)

1、HTML程式碼 <body ng-controller="showProduct">  <div class="nav-list"

Netbeans左側導航欄、專案欄、服務欄、檔案欄不見了

預設的Netbeans的左側是像下面這樣的：如果不小心誤關了怎麼調回來呢？在Netbeans最上面的一行工具欄中找到“視窗”--->“重置視窗”即可當然，值得一提的是，預設的Netbeans是沒有輸出欄的，也就是最下面的那個欄，想要恢復輸出欄只需要找一個程式執行就行。

Bootstrap左側導航欄大小變化問題

用Bootstrap製作左側導航欄，為了能看上去在最上面好看加了巨幕，剛剛進入網頁的時候沒有任何問題，但是在向下滑後再滑到最上面的時候，事件監聽會結束，這時會發現導航欄的寬度有一個變化，因為想做成自適應的，使用寬度沒有設死。如果想要固定尺寸，只要在css中設

ifame實現左側導航欄右側內容

<div id="left" style="float:left;width:200px;height:100%;"> <a href ="userlist.do" target="frame"><li>使用者管理</li></a> &

左側豎條導航欄點擊出現效果的實現

導航欄大部分的網站導航欄都是在網頁的頂端，這類導航欄看起來非常一般，而有些在左側豎著顯示的導航欄就比較好看一些了，但是今天為大家介紹的是左側豎條導航欄實現點擊出現的效果，也就是剛開始只顯示導航，不顯示分類欄，而點擊導航就可以顯示分類欄了，下面一起來看下源代碼的實現吧。<!DOCTYPE html>

IDEA左側上側導航欄護眼色設定

黑色背景雖酷，但我還是偏愛護眼色，護眼色一個大問題是，怎麼將左側和上面的導航欄設定成護眼色，要不然強迫症的我看到這樣的情況很不舒服，其實很簡單，只需要找個護眼色的圖片，當作背景即可。　　1、設定前　　2、背景設定　　Mac： ctrl+c

jQuery左側固定導航欄點選滑動對應頁面

<!DOCTYPE HTML> <html> <head> <title>導航定位</title> <meta charset="utf-8"> <meta name="Generat

SharePoint隱藏快速啟動欄_左側導航_所有網站內容_回收站

隱藏快速啟動欄 1. 使用內容編輯Web部件編輯需要隱藏快速啟動欄的頁面，插入一個內容編輯控制元件(放任何地方都行)，編輯HTML源，插入下面的程式碼：儲存頁面，快速啟動欄就隱藏了。接著你可以隱藏自己新增的內容編輯web部件。此方法可

Python_day21--div、西開的網站重構、左側、水平導航欄

一、div簡介1、定義<div> 可定義文件中的分割槽或節（division/section）。<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 <di

使用html和jquery實現左側可收縮導航欄

實現效果如下： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl

導航欄設置了背景圖片後恢復默認

設置 control brush metrics nco con gray ima ray // 背景圖恢復默認 [self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:U

左側導航欄

實現左側導航欄

相關推薦