精华内容
下载资源
问答
  • 后台管理页面布局

    2017-09-03 20:04:00
    1 <!DOCTYPE html> 2 <!--后台管理页面布局1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style&g...

     

     1 <!DOCTYPE html>
     2 <!--后台管理页面布局1-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8     body{
     9         margin: 0;
    10     }
    11     .left{
    12         float: left;
    13     }
    14     .right{
    15         float: right;
    16     }
    17      .pg-header{
    18         height:48px;
    19         background-color: #2459a2;
    20         color: white;
    21     }
    22     .pg-content .menu{
    23         width:20%;
    24         background-color: red;
    25         min-width: 200px;
    26         height:500px;
    27     }
    28     .pg-content .content{
    29         width:80%;
    30         background-color: green;
    31     }
    32     </style>
    33 </head>
    34 <body>
    35     <div class="pg-header"></div>
    36     <div class="pg-content">
    37         <div class="menu left">a</div>
    38         <div class="content left">
    39             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    40             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    41             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    42             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    43             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    44             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    45             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    46             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    47         </div>
    48     </div>
    49     <div class="pg-footer">e</div>
    50 </body>
    51 </html>
    后台管理页面布局1

     

     1 <!DOCTYPE html>
     2 <!--后台管理页面布局2-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         body{
     9             margin: 0;
    10         }
    11         .left{
    12             float: left;
    13         }
    14         .right{
    15             float: right;
    16         }
    17      .pg-header{
    18         height:48px;
    19         background-color: #2459a2;
    20         color: white;
    21     }
    22     .pg-content .menu{
    23         position: fixed;
    24         top:48px;
    25         left:0;
    26         bottom: 0;
    27         width: 200px;
    28         background-color: #dd4920;
    29     }
    30     .pg-content .content{
    31         position: fixed;
    32         top:48px;
    33         right:0;
    34         bottom: 0;
    35         left:200px;
    36         background-color:purple;
    37         overflow: auto;
    38     }
    39     </style>
    40 </head>
    41 <body>
    42     <div class="pg-header"></div>
    43     <div class="pg-content">
    44         <div class="menu left">a</div>
    45         <div class="content left">
    46             <p>23423</p><p>sadas</p><p>sadas</p><p>sadas</p>
    47             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    48             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    49             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    50             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    51             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    52             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    53             <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    54         </div>
    55     </div>
    56     <div class="pg-footer">e</div>
    57 </body>
    58 </html>
    后台管理页面布局2

     

     

     1 <!DOCTYPE html>
     2 <!--后台管理页面布局3-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <style>
     8         .item{
     9             background-color: #dddddd;
    10         }
    11         .item:hover{
    12             color: red;
    13         }
    14         .item:hover .b{
    15             background-color: green;
    16         }
    17     </style>
    18 </head>
    19 <body>
    20     <div class="item">
    21         <div class="a">123</div>
    22         <div class="b">456</div>
    23     </div>
    24 </body>
    25 </html>
    后台管理页面布局3

     

      1 <!DOCTYPE html>
      2 <!--后台管理页面布局4-->
      3 <html lang="en">
      4 <head>
      5     <meta charset="UTF-8">
      6     <title>Title</title>
      7     <style>
      8         body{
      9             margin: 0;
     10                 }
     11         .left{
     12             float: left;
     13                 }
     14         .right{
     15             float: right;
     16                 }
     17     .pg-header{
     18         height:48px;
     19         background-color: #697dc6;
     20         color: white;
     21         line-height: 48px;
     22                 }
     23     .pg-header .logo{
     24         width: 200px;
     25         background-color: #889ff9;
     26         text-align: center;
     27                         }
     28     .pg-header .user{
     29         /*width:160px;
     30         background-color: wheat;
     31         color: #75a261;*/
     32         margin-right: 120px;
     33         padding: 0 4px;
     34         color: white;
     35         height: 48px;
     36                         }
     37     .pg-header .user:hover{
     38         background-color: #889ff9;
     39                              }
     40     .pg-header .user .a img{
     41         height: 40px;width:40px;margin-top: 4px;border-radius: 50%;
     42                                 }
     43     .pg-header .user .b{
     44         z-index: 20;
     45         position: absolute;
     46         top: 48px;
     47         right: -60px;
     48         background-color: #e6eaff;
     49         color: black;
     50         width: 160px;
     51         display: none;
     52         font-size: 14px;
     53         line-height: 30px;
     54                             }
     55     .pg-header.user .b a{
     56         padding: 5px;
     57         color: black;
     58         text-decoration: none;
     59     }
     60     .pg-header.user.b a:hover{
     61         background-color: #dddddd;
     62     }
     63     .pg-header .user:hover .b{
     64         display: block;
     65     }
     66     .pg-header .user .b a{
     67         display: block;
     68                             }
     69 
     70     .pg-content .menu{
     71         position: absolute;
     72         top:48px;
     73         left:0;
     74         bottom: 0;
     75         width: 200px;
     76         background-color: #dd7521;
     77                         }
     78     .pg-content .content{
     79         position: absolute;
     80         top:48px;
     81         right:0;
     82         bottom: 0;
     83         left:200px;
     84         overflow: auto;
     85                             }
     86     </style>
     87 </head>
     88 <body>
     89     <div class="pg-header">
     90         <div class="logo left">
     91             老男孩
     92         </div>
     93         <div class="user right" style="position: relative">
     94             <a class="a" href="#">
     95                 <img src="22.jpg">
     96             </a>
     97             <div class="b">
     98                 <a>我的资料</a>
     99                 <a>注销</a>
    100             </div>
    101         </div>
    102     </div>
    103     <div class="pg-content">
    104         <div class="menu left">a</div>
    105         <div class="content left">
    106             <div style="background-color: #7fa27b">
    107                 <p style="margin: 0;">df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
    108                 <p>gdfggd</p><p>sadas</p><p>sadas</p><p>sadas</p>
    109                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
    110                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    111                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    112                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    113                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    114                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    115                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    116                 <p>df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
    117                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    118                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
    119                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    120                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    121                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    122                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    123                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    124                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    125                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    126             </div>
    127         </div>
    128     </div>
    129     <div class="pg-footer">e</div>
    130 </body>
    131 </html>
    后台管理页面布局4

     

    22.jpg

     

     1 <!DOCTYPE html>
     2 <!--后台管理页面布局5-->
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Title</title>
     7     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
     8     <style>
     9         .item{
    10             background-color: #dddddd;
    11         }
    12         .item:hover{
    13             color: red;
    14         }
    15         .item:hover .b{
    16             background-color: green;
    17         }
    18     </style>
    19 </head>
    20 <body>
    21     <div class="item">
    22         <div class="a">
    23             <i class="fa fa-superpowers" aria-hidden="true">123</i>
    24         </div>
    25         <div class="b">456</div>
    26     </div>
    27 </body>
    28 </html>
    后台管理页面布局5

     

      1 <!DOCTYPE html>
      2 <!--后台管理页面布局6-->
      3 <html lang="en">
      4 <head>
      5     <meta charset="UTF-8">
      6     <title>Title</title>
      7     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
      8     <style>
      9         body{
     10             margin: 0;
     11                 }
     12         .left{
     13             float: left;
     14                 }
     15         .right{
     16             float: right;
     17                 }
     18     .pg-header{
     19         height:48px;
     20         background-color: #697dc6;
     21         color: white;
     22         line-height: 48px;
     23                 }
     24     .pg-header .logo{
     25         width: 200px;
     26         background-color: #889ff9;
     27         text-align: center;
     28                         }
     29     .pg-header .icons{
     30         padding: 0 20px;
     31                      }
     32     .pg-header .icons:hover{
     33         background-color: #889ff9;
     34     }
     35     .pg-header .user{
     36         /*width:160px;
     37         background-color: wheat;
     38         color: #75a261;*/
     39         margin-right: 120px;
     40         padding: 0 4px;
     41         color: white;
     42         height: 48px;
     43                         }
     44     .pg-header .user:hover{
     45         background-color: #889ff9;
     46                              }
     47     .pg-header .user .a img{
     48         height: 40px;width:40px;margin-top: 4px;border-radius: 50%;
     49                                 }
     50     .pg-header .user .b{
     51         z-index: 20;
     52         position: absolute;
     53         top: 48px;
     54         right: -60px;
     55         background-color: #e6eaff;
     56         color: black;
     57         width: 160px;
     58         display: none;
     59         font-size: 14px;
     60         line-height: 30px;
     61                             }
     62     .pg-header.user .b a{
     63         padding: 5px;
     64         color: black;
     65         text-decoration: none;
     66     }
     67     .pg-header.user.b a:hover{
     68         background-color: #dddddd;
     69     }
     70     .pg-header .user:hover .b{
     71         display: block;
     72     }
     73     .pg-header .user .b a{
     74         display: block;
     75                             }
     76 
     77     .pg-content .menu{
     78         position: absolute;
     79         top:48px;
     80         left:0;
     81         bottom: 0;
     82         width: 200px;
     83         background-color: #dd7521;
     84                         }
     85     .pg-content .content{
     86         position: absolute;
     87         top:48px;
     88         right:0;
     89         bottom: 0;
     90         left:200px;
     91         overflow: auto;
     92                             }
     93     </style>
     94 </head>
     95 <body>
     96     <div class="pg-header">
     97         <div class="logo left">
     98             老男孩
     99         </div>
    100 
    101 
    102         <div class="user right" style="position: relative">
    103             <a class="a" href="#">
    104                 <img src="22.jpg">
    105             </a>
    106             <div class="b">
    107                 <a>我的资料</a>
    108                 <a>注销</a>
    109             </div>
    110         </div>
    111 
    112         <div class="icons right">
    113             <i class="fa fa-commenting-o" aria-hidden="true"></i>
    114             <span style="border-radius: 50%;display: inline-block;padding: 10px 7px;line-height: 1px;background-color: red; ">5</span>
    115         </div>
    116         <div class="icons right">
    117             <i class="fa fa-bell-o" aria-hidden="true"></i>
    118         </div>
    119 
    120     </div>
    121     <div class="pg-content">
    122         <div class="menu left">a</div>
    123         <div class="content left">
    124             <div style="background-color: #7fa27b">
    125                 <p style="margin: 0;">df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
    126                 <p>gdfggd</p><p>sadas</p><p>sadas</p><p>sadas</p>
    127                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
    128                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    129                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    130                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    131                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    132                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    133                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    134                 <p>df65d</p><p>sadas</p><p>sadas</p><p>sadas</p>
    135                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    136                 <p>dgddg</p><p>sadas</p><p>sadas</p><p>sadas</p>
    137                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    138                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    139                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    140                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    141                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    142                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    143                 <p>sadas</p><p>sadas</p><p>sadas</p><p>sadas</p>
    144             </div>
    145         </div>
    146     </div>
    147     <div class="pg-footer">e</div>
    148 </body>
    149 </html>
    后台管理页面布局6

     

    http://fontawesome.io/#modal-download

     

    转载于:https://www.cnblogs.com/ujq3/p/7470720.html

    展开全文
  •  之前我们练习的都是主页面,用的套路都差不多,今天我们来学习一下 后台管理页面布局。 二、position: fixed的布局 2.1、布局图 说明:这种是左侧菜单跟随滚动条 2.2、代码实现 <head> <meta ...

    一、前言

      之前我们练习的都是主页面,用的套路都差不多,今天我们来学习一下  后台管理页面布局。

    二、position: fixed的布局

    2.1、布局图

    说明:这种是左侧菜单跟随滚动条

    2.2、代码实现

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0 auto;
            }
            .pg-header{
                height: 48px;
                background: #2459a2;
                color: white;
            }
            .fl{
                float: left;
            }
    
            .fr{
                float: right;
            }
    
            .pg-content .menu{ 
                position: fixed;
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: #dddddd;
            }
            .pg-content .content{
                position: fixed;
                top: 48px;
                right: 0;
                bottom: 0;
                left: 200px;
                background: pink;
                overflow: auto;  //加滚动条
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            <div class="menu fl">a</div>
            <div class="content fl">
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>
    

    这边补充一个知识点 min-width这个关键字:表示最小宽度,当你20%的宽度小于200px的时候,我就用min-width,但是当你min-width大于200px,应用width。

    .pg-content .menu{
                width: 20%;
                background: red;
                min-width: 200px;
            }
    

    三、 position: absolute 布局  *****

    3.1、布局图

    说明:左侧以及上下不动,用的比较多

    3.2、逻辑代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0 auto;
            }
            .pg-header{
                height: 48px;
                background: #2459a2;
                color: white;
            }
            .fl{
                float: left;
            }
    
            .fr{
                float: right;
            }
    
            .pg-content .menu{
                position: absolute; /* 改成 absolute */
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: #dddddd;
            }
            .pg-content .content{
                position: absolute;  /* 改成 absolute*/
                top: 48px;
                right: 0;
                bottom: 0;
                left: 200px;
                background: pink;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            <div class="menu fl">a</div>
            <div class="content fl">
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
                <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>
    

    四、实践

    4.1、布局图

     

    4.2、逻辑代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0 auto;
            }
            .pg-header{
                height: 48px;
                background: #2459a2;
                color: white;
                line-height: 48px;
            }
    
            .pg-header .logo{
                width: 200px;
                background-color: cadetblue;
                text-align: center;
            }
    
            .pg-header .user{
                width: 160px;
                background-color: wheat;
            }
    
            .pg-header .user:hover{
                background-color: blue;
            }
    
            .pg-header .user .a img{
                height: 40px;
                width: 40px;
                border-radius: 50%;
                margin-top: 4px;
            }
    
            .pg-header .user .b{
                z-index: 20;
                position: absolute;
                top: 48px;
                right: 64px;
                background-color: red;
            }
    
             .pg-header .user .b a{
                 display: block;
                 width: 96px;
             }
    
    
            .fl{
                float: left;
            }
    
            .fr{
                float: right;
            }
    
            .pg-content .menu{
                position: absolute; /* 改成 absolute */
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: #dddddd;
            }
            .pg-content .content{
                position: absolute;  /* 改成 absolute*/
                top: 48px;
                right: 0;
                bottom: 0;
                left: 200px;
                background: pink;
                overflow: auto;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="logo fl">
                老男孩
            </div>
            <div class="user fr" style="position: relative;">
                <a class="a" href="#">
                    <img style="" src="22.jpg">
                </a>
                <div class="b">
                    <a>我的资料</a>
                    <a>退出</a>
                </div>
            </div>
        </div>
        <div class="pg-content">
            <div class="menu fl">a</div>
            <div class="content fl"></div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>
    

    这边有一个知识补充:border-radius属性,这个是用来表示某个块级标签的圆弧度的,这个最多变成一个圆,不能再变小了,如果真的想变成全圆的,就是50%

    border-radius: 50%;#全部圆的
    border-radius: 50px;局部变成圆的。
    

     效果图:

    五、hover的补充

    之前我们说css样式 :hover 表示当这个鼠标放在标签上时,此css样式才会生效,那我如果想,当我鼠标放在上面的时候,只为其中的某个标签设置此样式呐。那就用到另外一种方法:

    .类名(或者其他标签名):hover  .类名{
              //样式
    }
    

     例如:

    .item{
        background-color: #dddddd;
    }
    
    .item:hover{    //只在item标签上生效
        color: red;
    }
    
    .item:hover .b{    //当鼠标放在上面的时候,为b加上此样式
        background-color: green;
    }
    

    具体代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .item{
                background-color: #dddddd;
            }
            
            .item:hover{
                color: red;
            }
            
            .item:hover .b{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <div class="a">123</div>
            <div class="b">456</div>
        </div>
    </body>
    </html>
    

     所以我在上面的实践代码中加上这么一小段,就能实现我鼠标一放在用户名上,就能显示出我想要的模块:

    效果图:

    六、Font-Awesome使用

      以后我们需要的小图标不需要我们自己直接开发,fontawesome已经帮我做好了,只需要直接引用就行了。网址:http://fontawesome.dashgame.com/,或者在百度里面搜fontawsome就出来了。

    6.1、具体使用方法

    ①先下载

    ②再导入

    ③使用某个样式

     

    转载于:https://www.cnblogs.com/zhangqigao/articles/8310388.html

    展开全文
  • 做一个简单的页面布局 基本结构如下 <body> <!-- svg图标 --> <div style="display: none;"> <svg> <symbol id="menu" viewBox="0 0 1024 1024"> <path d="M376.832 474.112H...

    做一个简单的页面布局

    演示地址:https://genin.gitee.io/web-demo/web-layout.html
    web-layout.png
    基本结构如下

    <body>
    <!-- svg图标 -->
    <div style="display: none;">
        <svg>
            <symbol id="menu" viewBox="0 0 1024 1024">
                <path d="M376.832 474.112H130.048c-33.792 0-61.44-27.648-61.44-61.44V165.888c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 33.792-27.648 60.928-61.952 60.928zM130.048 165.888v247.296h247.296V165.888H130.048zM739.84 525.312c-16.384 0-31.744-6.144-43.52-17.92L521.728 332.8c-11.776-11.776-17.92-27.136-17.92-43.52s6.144-31.744 17.92-43.52L696.32 71.168c11.776-11.776 27.136-17.92 43.52-17.92s31.744 6.144 43.52 17.92L957.952 245.76c11.776 11.776 17.92 27.136 17.92 43.52s-6.144 31.744-17.92 43.52L783.36 507.392c-11.776 11.776-27.136 17.92-43.52 17.92z m0-411.136l-174.592 174.592 174.592 174.592 174.592-174.592-174.592-174.592zM376.832 960.512H130.048c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 34.304-27.648 61.44-61.952 61.44z m-246.784-308.224v247.296h247.296v-247.296H130.048zM863.232 960.512h-247.296c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c0 34.304-27.136 61.44-61.44 61.44z m-246.784-308.224v247.296h247.296v-247.296h-247.296z" p-id="3130"/>
            </symbol>
            <symbol id="arrow" viewBox="0 0 1024 1024">
                <path d="M310.613333 393.386667a32 32 0 0 0-45.226666 45.226666l213.333333 213.333334a32 32 0 0 0 45.226667 0l213.333333-213.333334a32 32 0 0 0-45.226667-45.226666l-190.72 190.72-190.72-190.72z" p-id="4027"/>
            </symbol>
        </svg>
    </div>
    	<div class="wrapper">
            <!-- 侧边栏 -->
            <nav id="nav">
                <header>
                    头部
                </header>
                <!-- 菜单 -->
                <ul class="nav-menu">
                    <li>
                        <div class="nav-menu-item">
                            <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
                            <span class="title">菜单1111abcdefg</span>
                            <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
                        </div>
                        <ul class="nav-menu">
                            <li>
                                <div class="nav-menu-item">
                                    <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
                                    <span class="title">子菜单1</span>
                                    <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
                                </div>
                            </li>
                            <li>
                                <div class="nav-menu-item">
                                    <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
                                    <span class="title">子菜单1</span>
                                    <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="nav-menu-item">
                            <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
                            <span class="title">菜单2</span>
                            <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
                        </div>
                    </li>
                    <li>
                        <div class="nav-menu-item">
                            <i class="icon iconfont icon-duigou"></i>
                            <span class="title">菜单2</span>
                            <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
                        </div>
                    </li>
                </ul>
            </nav>
    
            <!-- 内容 -->
            <main>
                <!-- 头部 -->
                <header>
                    头部 <button id="shrink">折叠</button>
                </header>
    
                <!-- 内容 -->
                <section>
                    <div>内容</div>
                    <div>内容</div>
                </section>
    
                <!-- 底部 -->
                <footer>
                    底部
                </footer>
            </main>
        </div>
    </body>
    

    css代码部分

    	<!-- iconfont 阿里适量图标 -->
        <style type="text/css">
            @font-face {font-family: "iconfont";
                src: url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.eot?t=1599211482334'); /* IE9 */
                src: url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.eot?t=1599211482334#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmAAAAJsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQMBNgIkAwgLBgAEIAWEbQcwG6kFyB6SJI8hRIhMQ5WCAhIieJr7nLfZ/MsRgeeCArRAqsrXSUIHLOtZV+f/1to/MapG5hHNvK7Nis292TlcEkRI3jVkSC4ZT2QBV6UBl+NfQA/SOqBc5pi2MMA4oID2xiiyAoos8FTEO5HuIO8TaDEhheukrqUHgjIsC8R9TeEhWIjKslKohEbD3sxcq6jScjrFg+jz8c9OBEFSFoCWC/dqJaj4WUolxVQ9pcDu5dxQDlFgDcjElcbsOR6hsB4tWa8ZcKzG4GdpXQd2cVSLUP461LeBMV76TDJP/qjfTCCjxCiwOSlEGWiNj97oEf7hoZ/GfO/+/FB87fa25QP7bc9uL1zrGU6rr6q8jH3LXaIbxwdnGnuqas93E5T++tLO6qTR7sQ16az+73R08vTjYfPrDBUAtSEv/QkE71bW3693lvyvWr0AP4aWniP5MD/VXn3B32nLH9SHZZ6qQCZloEMqFJNRvrOKeLEaUAOCPd6nGvtvpRgq/TfkbzKeoVCZIzKzhlKrPTRU9tFiVf3hVr0oj8ghYMU8h9BlD0mHlyh0OSMy84bSgF80dIUHLa5F9JmtFkKLqqaYZ1hCwjDSRGLLzMGi4sYurERMnuYVEacPU0dLoMy0jHKhHtuYLrHBGVCyGJORTImF6rjHsGkSFKZExyJLUxkLF6Wny00vShOJBVGOURiPwSSIYBiiERE2ORjMRFXe3wVTRJh4tKOnJdwHoxza6EimNBkDiHqtPajnUZ5xDFBkYRgZIqMIC1LHzcJMJgIJN8/SYSImjTohHVYknfrJQ7Vp2+utvzsELWBKQdM80LgT0RQSAQAA') format('woff2'),
                url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.woff?t=1599211482334') format('woff'),
                url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.ttf?t=1599211482334') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
                url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.svg?t=1599211482334#iconfont') format('svg'); /* iOS 4.1- */
            }
    
            .iconfont {
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
    
            .icon-duigou:before {
                content: "\e63d";
            }
    
        </style>
    
        <!-- 页面布局 -->
        <style type="text/css">
            /* =============================================== 页面布局样式-begin */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            /* 包装整个页面 注意字体高度超过标签高度会出现滚动条 */
            .wrapper {
                height: 100%;
                display: flex;
            }
    
            /* 头部 */
            header {
                height: 40px;
                line-height: 40px;
                border: 1px solid orange;
                background-color: orange;
            }
    
            /* 左侧边菜单 */
            nav {
                width: 200px;
                min-width: 200px;
                border: 1px solid red;
                background-color: #1D1E23;
    
                display: flex;
                flex-direction: column;
            }
            nav > ul {
                overflow: auto;
                flex: 1;
            }
    
            /* 菜单头部和菜单项字体居中 */
            nav > header {
                text-align: center;
            }
    
            /* 菜单项 */
            .nav-menu > li > .nav-menu-item {
                padding: 14px 20px;
                cursor: pointer;
            }
            /* 鼠标悬停 菜单项样式 */
            .nav-menu > li > .nav-menu-item:hover {
                background-color: #101117;
                color: white;
            }
    
            .nav-menu-item > .title {
                display: inline-block;
                width: 70px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #BCBCBD;
            }
            .nav-menu-item > .icon,
            .nav-menu-item > .icon > .svg {
                display: inline-block;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                vertical-align: bottom;
                color: #BCBCBD;
                fill: #BCBCBD;
            }
    
            /* 鼠标悬停 菜单项图标样式 */
            .nav-menu-item:hover > .title,
            .nav-menu-item:hover > .icon > .svg {
                color: white;
                fill: white;
            }
    
            .nav-menu > .active > .nav-menu {
                display: block;
                background-color: #101117;
            }
            .nav-menu > li > .nav-menu {
                display: none;
            }
    
            .nav-menu > .active > .nav-menu-item > .icon:last-child > .svg {
                transform: rotate(180deg);
                transition: transform .2s ease-in-out
            }
            .nav-menu > li > .nav-menu-item > .icon:last-child > .svg {
                transition: transform .2s ease-in-out
            }
    
            /* 主体 */
            main {
                border: 1px solid blue;
                flex: 1;
    
                display: flex;
                flex-direction: column;
            }
    
            /* 内容 */
            section {
                flex: 1;
                overflow: auto;
            }
    
            /* 底部 */
            footer {
                height: 40px;
                border: 1px solid black;
            }
            /* =============================================== 页面布局样式-end */
    
            /* =============================================== 菜单收缩样式-begin */
            /** 把菜单 nav 宽度缩小 */
            .nav-mini {
                width: 80px;
                min-width: 80px;
                text-align: center;
            }
            /** 把菜单子项 li 里的文字和右图标隐藏 */
            .nav-mini > ul li .nav-menu-item > span,
            .nav-mini > ul li .nav-menu-item > i:last-child {
                display: none;
            }
    
    
            /* =============================================== 菜单收缩样式-end */
        </style>
    

    js代码部分

    <script type="text/javascript">
        window.onload = function () {
            generateDiv();
            generateLi();
            init();
        }
    
        function init() {
            // 点击收缩
            let shrink = document.getElementById('shrink');
            if (shrink) {
                shrink.onclick = function () {
                    // 给nav标签添加/移除css(收缩css)
                    let nav = document.getElementById('nav');
                    let mini = 'nav-mini';
                    let className = nav.className;
                    let classNameArray = className.split(/\s/);
                    // 移除css中的空字符串
                    classNameArray.forEach((item, index) => {
                       if (item.replace(/\s/g, '') == '') {
                           classNameArray.splice(index, 1);
                       }
                    });
                    // 存在添加css就移除,不存在就添加
                    if (classNameArray.includes(mini)) {
                        nav.className = className.replace(mini, '');
                    } else {
                        let newClassName = classNameArray.concat(mini).join(' ');
                        nav.className = newClassName;
                    }
                }
            }
    
            // 点击菜单项
            let navMenu = document.getElementsByClassName('nav-menu')[0];
            addClick(navMenu);
        }
    
        /** 添加点击事件 */
        function addClick(navMenu) {
            if (navMenu) {
                let menuChildes = navMenu.children;
                if (menuChildes.length > 0) {
                    let array = Array.from(menuChildes);
                    array.forEach((item) =>{
                        if (item.nodeName == "LI") {
                            item.onclick = function (e) {
                                let className = item.className;
                                if (className == 'active') {
                                    item.className = '';
                                } else {
                                    item.className = 'active';
                                }
                                let itemChildes = item.children;
                                if (itemChildes.length > 0) {
                                    let itemArray = Array.from(itemChildes);
                                    itemArray.forEach((child) => {
                                        if (child.nodeName == "UL") {
                                            addClick(child);
                                        }
                                    });
                                }
                                // 阻止事件冒泡
                                e.stopPropagation();
                            }
                        }
                    });
                }
            }
        }
    
        /** 生成测试数据 */
        function generateLi() {
            let sections = document.getElementsByTagName('ul');
            let section0 = sections[0];
            for (let i = 0; i < 100; i++) {
                let li = '<li>\n' +
                    '                    <div class="nav-menu-item">\n' +
                    '                        <i class="icon iconfont icon-duigou"></i>\n' +
                    '                        <span class="title">菜单'+ (i + 2) +'</span>\n' +
                    '                        <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>\n' +
                    '                    </div>\n' +
                    '                </li>'
                section0.insertAdjacentHTML('beforeend', li);
            }
        }
    
        /** 生成测试数据 */
        function generateDiv() {
            let sections = document.getElementsByTagName('section');
            let section0 = sections[0];
            for (let i = 0; i < 100; i++) {
                section0.insertAdjacentHTML('beforeend', '<div>内容'+ i +'</div>');
            }
        }
    </script>
    

    下载链接 https://download.csdn.net/download/qq_32856631/12825230

    展开全文
  • 需要制作出如下图片的效果 : <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 ...

    需要制作出如下图片的效果 :

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
    margin: 0 auto;
    }
    .left{
    float: left;
    }
    .right{
    float: right;
    }
    .pg-header{
    height: 48px;
    background-color: #2459a2;
    color:white;
    line-height: 48px;
    }
    .pg-header .logo{
    width: 200px;
    background-color:green;
    text-align: center;
    }
    .pg-header .user{
    width: 160px;
    background-color: palegreen;
    height: 48px;
    }
    .pg-header .user .b{
    top: 48px;
    right: 95px;
    background-color: green;
    z-index: 20;
    width: 160px;
    display: none;
    }
    .pg-header .user:hover .b{
    display: block;
    }
    .pg-header .user:hover{
    background-color: red;
    }
    .pg-header .user .b a{
    display: block;
    }
    .pg-content .menu{
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    background-color: #dddddd;
    width: 200px;

    }
    .pg-content .content{
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 0;
    left: 200px;
    background-color:blue;
    overflow: auto;
    z-index: 10;

    }
    </style>
    </head>
    <body>
    <div class="pg-header">
    <div class="logo left">LOGO</div>
    <div class="user right" style="position: relative">
    <a>
    <img style="width: 40px;height: 40px;margin-top: 4px;border-radius: 50%;" src="4.jpg">
    </a>
    <div class="b" style="position: absolute">
    <a>我的资料</a>
    <a>退出</a>
    </div>
    </div>
    </div>
    <div class="pg-content">
    <div class="menu"></div>
    <div class="content">
    <div style="height: 5000px">fdsa</div>
    </div>
    </div>
    </body>
    </html>
     

    转载于:https://www.cnblogs.com/wulafuer/p/11113161.html

    展开全文
  • web后台管理页面布局

    千次阅读 2018-07-10 10:52:55
    1、上层标签块;  2、左侧菜单块;  3、中部内容显示块; 需求:要求上层标签块、左侧菜单快固定不动,滚动条只对中部显示块作用; < div .../* “bottom:0 与 overflow” 结合使用的效果:当内容超出...页面显示示例:
  • HTML后台管理页面布局

    2017-12-12 11:45:00
    后台管理页面一般顶部菜单栏,左侧有个logo,右侧有登录用户,以及报警信息,会话信息等。 用户头像设计为圆的 border-radius: 50%; /*设计头像图片是圆的*/ 鼠标移动过去之后,多个内容显示出不同的样式 ...
  • HTML 后台管理页面布局

    万次阅读 2016-11-27 17:27:52
    后台管理页面一般顶部菜单栏,左侧有个logo,右侧有登录用户,以及报警信息,会话信息等。 用户头像设计为圆的 border-radius: 50%; /*设计头像图片是圆的*/ 鼠标移动过去之后,多个内容显示出不同...
  • 后台管理系统页面布局的特点 1)头部导航栏位置固定,高度固定、宽度自适应 2)内容部分宽度高度自适应,高度为页面高度的剩下部分(除了头部导航栏剩下的部分保证全屏铺满,不出滚动条) 实现代码 分析说明: html和...
  • 一、页面布局之主站页面 主站布局一般不占满页面,分为菜单栏、主页面、底部 上中下三部分。伪代码如下: <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 &...
  • 简易的后台管理页面布局(一)

    千次阅读 2017-12-13 22:47:32
    这里先简易地写一个:(重在学习,现实中不怎么用这种) <!DOCTYPE html > lang= "en" ...页面效果: 可以做到滑动时候右边的内容改变,左边的菜单固定在左边。
  • 简易的后台管理页面布局(二)

    千次阅读 2017-12-14 08:41:02
    制作管理页面 class= "user right" style= " position : relative" > class= "a" href= "#" > src= "6666.jpg" > class= "b" > href= "#" > 我的资料 href= "#" > 查询 href= "#...
  • 1、滚动滑轮事件监听 2、内容到窗口的距离 ...===========================后天管理页面布局====================================== 利用: absolute+overflow:auto =======================...
  • 作为一个后台管理页面,不必太过复杂,一般只需要三部分: 1、上层标签块; 2、左侧菜单块; 3、中部内容显示块;今天简要给大家分享一个布局中的一个小case; 需求:要求上层标签块、左侧菜单快固定不动,滚动...
  • 属性实现两种页面布局的切换 */ z-index : 9 ; } class= "pg-head " > class= "logo left" > CSDN 博客 class= "user right" style= " position : relative ; " > <!--.right 顺序越早,...
  •  如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度。  但是这种布局会有一个bug:当主内容模块超过高度100%时,右侧导航就无法填满浏览器的高度。   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,016
精华内容 806
关键字:

后台管理页面布局