2. 程式人生 > >常用後臺管理介面佈局

常用後臺管理介面佈局

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

效果
這裡寫圖片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/menu.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome-4.5.0/css/font-awesome.css"/>
 

        <script src="js/jquery.min.js"></script>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .menu{
                background: #2E3344;
                width: 200px;
                height: 100%;
                color
 
: white;
                position: fixed;
                float: left;
            }
            .main-menu{
                height: 40px;
                line-height: 40px;
                cursor: pointer;
            }
            .menu ul{
                padding : 0;
                margin: 0;
            }
 

            .menu li{
                list-style: none;
                background: #3A3F51;
                height: 40px;
                line-height: 40px;
                padding-left: 50px;
            }
            .menu-icon{
                color: #27C24C;
                padding-left: 15px;
                padding-right: 5px;
            }
            .menu .angle-icon{
                height: 40px;
                line-height: 40px;
                float: right;
                margin-right: 20px;
            }
            iframe{
                position: fixed;
            }
            .header{
                height: 70px;
                width: 100%;
                background: greenyellow;
            }
        </style>
    </head>
    <body>
        <div class="header">
            header
        </div>
        <div class="menu">
            <div class="menu-item">
                <div class="main-menu">
                    <i class="fa fa-home fa-lg menu-icon"></i>
                    個人資訊
                </div>

            </div>
            <div class="menu-item">
                <div class="main-menu">
                    <i class="fa fa-home fa-lg menu-icon"></i>
                    我的關注
                    <span class="angle-icon"><i class="fa fa-angle-right  "></i></span>
                </div>
                <ul>
                    <li class="child-menu" onclick="show('test.html')">專案</li>
                    <li class="child-menu" onclick="show('http://www.baidu.com')">帖子</li>
                </ul>
            </div>
            <div class="menu-item">
                <div class="main-menu">
                    <i class="fa fa-home fa-lg menu-icon"></i>
                    我的訊息
                    <span class="angle-icon"><i class="fa fa-angle-right"></i></span>
                </div>
                <ul>
                    <li class="child-menu">個人訊息</li>
                    <li class="child-menu">論壇訊息</li>
                </ul>
            </div>
            <div class="menu-item">
                <div class="main-menu">
                    <i class="fa fa-home fa-lg menu-icon"></i>
                    釋出的專案
                    <span class="angle-icon"><i class="fa fa-angle-right"></i></span>
                </div>
                <ul>
                    <li class="child-menu">淘寶網</li>
                    <li class="child-menu">騰訊QQ</li>
                </ul>
            </div>
        </div>

        <iframe scrolling="auto" frameborder="0"  src="test.html" style="width:950px;height:100%;margin-left: 200px;"></iframe>
    </body>
    <script type="text/javascript">
        $('.main-menu').click(function(){
            $(this).next().slideToggle();
            var has = $(this).find('.angle-icon').hasClass("fa-rotate-90");
            if(has){
                $(this).find('.angle-icon').removeClass("fa-rotate-90");
            }else{
                $(this).find('.angle-icon').addClass("fa-rotate-90");
            }
        });
        var menuwidth = $('.menu').width();
        var sreenwidth = window.screen.width;
        var framewidth = sreenwidth - menuwidth;
        $('iframe').width(parseInt(framewidth) );
        function show(url){
            $('iframe').attr('src',url);
        }
    </script>
</html>

相關推薦

常用後臺管理介面佈局

效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

後臺管理頁面佈局 後臺管理頁面佈局

https://www.cnblogs.com/bigberg/p/9284709.html     後臺管理頁面佈局   一、整體分佈 　　簡單的一個頁面佈局，頭部、左側選單欄，右側內容，頭部和選單欄固定位置，內容部分如果很長就會出現滾動條

vue+elementui搭建後臺管理介面(2首頁)

1 會話儲存 使用html5的 sessionStorage 物件臨時儲存會話 // 儲存會話 sessionStorage.setItem('user', username) // 刪除會話 sessionStorage.removeItem('user', username) 2 將所有未登入會話重

vue+elementui搭建後臺管理介面(3側邊欄選單)

上一節搭好了主框架，但是標籤頁和側邊欄只是分別展示了各自的選單，如何將二者聯動起來？ 定義路由規則：當有 children 屬性時，從 children 裡取出 path 填充到側邊欄，如： { path: '/', redirect: '/dashboard', name: 'Containe

vue+elementui搭建後臺管理介面(4使用font-awesome)

使用font-awesome npm install --save font-awesome 修改 src/main.js 增加 import 'font-awesome/scss/font-awesome.scss' 1 login頁面增加圖示 效果如下 修改原來的使用者輸入框 &l

使用layui 做後臺管理介面，在Tab中的連結點選後新增一個新TAB的解決方法

給連結或按鈕  新增 onclick="self.parent.addTab('百度','http://www.baidu.com','icon-add')"   如： <a href="javascript:void(0)" title="google" onclick="s

vue+elementui搭建後臺管理介面(7 vuex和mockjs的使用)

將許可權管理應用到系統，首先做好登入, 點選登入按鈕後，觸發以下動作 vuex 中的 login 動作，設定 cookie vuex 中的 getuserinfo ， 獲取許可權、使用者名稱、頭像等 由於目前未使用連線後端伺服器，所以使用 mockjs 攔截請求並返回。 在github中檢視

用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容,點選右邊內容的按鈕出現一個新頁面依舊能夠選中左側相應選單,求解決???!!!!

vue-路由 用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容 但是點選新建微帖路由出現一個新頁面,左側選單怎麼才能顯示被選中狀態,就是跟上圖狀態一樣??? 這裡是左側選單導航和右邊內容顯示區域程式碼 這裡是頁面按鈕

JavaWeb從新手到入門（三）EeayUI後臺管理介面

參考：《傳智播客-淘淘商城》 一、EasyUI 1.1 EasyUI jQuery EasyUI 是一個基於 jQuery 的框架，集成了各種使用者介面外掛。jQuery EasyUI 框架提供了建立網頁所需的一切，可以幫助使用者輕鬆搭建頁面，由於使用簡單，是搭建後臺管理介

簡易的後臺管理頁面佈局（二）

這裡做了一個簡易的模板，用到了一個獲取圖示的小工具，可以到這個網站下載：http://fontawesome.io/ 色彩搭配也許不好看，我不是專門搞這個的。 由於時間原因沒有寫入JS，可以自己加入。 <!DOCTYPE html> <html lang

HTML 後臺管理頁面佈局

設計網頁，讓網頁好看：網上找模板 搜 HTML模板 BootStrap 一、內容回顧： HTML 一大堆的標籤：塊級、行內 CSS position background text-align margin padding font-

vuejs 和 element 搭建的一個後臺管理介面

介紹：相關技術：　　vuejs2.0：漸進式JavaScript框架，易用、靈活、高效，似乎任何規模的應用都適用。　　element：基於vuejs2.0的ui元件庫。　　vue-router：一般單頁

基於Bootstrap的後臺管理介面

由於專案需求一個後臺介面，所以找了下跟Bootstrap相關的後臺管理介面，最後選擇了SB Admin。但看了SB Admin的程式碼都是寫到一起的，而且專案這邊需要跟伺服器配合所以自己修改了下。特此記錄一下，方便以後使用。 效果 效果跟SB Adm

PHPCMS新增後臺管理介面選單

在左邊選單欄下新增紅色方框內的選單，選單資料全都儲存在v9_menu表中 先開啟這張表 name對應的是D:\web\phpcms\phpcms\languages\zh-cn\system_menu_lang.php裡面定義的中文 parentid代表節點，該欄位確定

django admin擴充套件－自定義後臺管理介面

建立自定義管理檢視 現在，想要往Django的admin管理介面新增自定義行為的人，可能開始覺得有點奇怪了。我們這裡所講的都是如何改變admin管理介面的外觀。他們都在喊：如何才能改變admin管理介面的內部工作機制。 首先要提的一點是，這並不神奇。admin管理介面並沒有做任何特殊的事

3_rabbitmq後臺管理介面

rabbitmq後臺管理介面更多幹貨1.新增使用者localhost:156711.1. 新增使用者介面1.2 新增管理員使用者我們新增賬號 user_mmr 密碼 admin tags 選擇 admin我們看到剛新增完成的使用者 在 vhost 一欄是沒有許可權的,所以呢我

使用Layui搭建後臺管理介面

//JavaScript程式碼區域 layui.use('element', function(){ var element = layui.element; element.on('nav(hbkNavbar)',function(elem){

很好看的後臺管理介面

2017年05月28日修改  重新把目前我做專案用的幾個後臺分享出來，其實都是一些靜態HTML頁面而已的 1. 綠麻雀後臺 下載地址：http://ohpxbzczu.bkt.clouddn.com/admin_lvmaque.zip 2. 旗開後臺 下載地址：

用grappelli美化Django Admin後臺管理介面

這幾天在網上發現一個django app:grappelli,該app可以用來美化Django Admin後臺管理介面, 把一向醜陋的Django Admin後臺介面弄得很酷很好看. 以下有一篇別人寫好的文章,先供大家參考:  參考資料: 使用django-grappell

WEB前端-HTML-CSS-後臺管理頁面佈局小例

作為一個後臺管理頁面，不必太過複雜，一般只需要三部分： 1、上層標籤塊； 2、左側選單塊； 3、中部內容顯示塊； 今天簡要給大家分享一個佈局中的一個小case； 需求：要求上層標籤塊、左側選單