Question

我想将所有页面集成到主页面（index.html）我创建了左侧面板，其中给出了所有页面链接。现在我想在灰色区域显示我的其他html页面。我可以将页面带到主页面，但它不适合空白区域。希望我很清楚。在此先感谢您的帮助。

的index.html

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <link href="index.css" rel="stylesheet" />
    <script src="app.js"></script>
</head>
<body ng-controller="mainController">

    <div class="navbar navbar-inverse navbar-fixed-left">
        <p>
            <br />
            <br />
        </p>
        <b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
        <ul class="nav navbar-nav">
            <li><a href="#Header">Header Details</a></li>
            <li><a href="#ReportDetails">Report Details</a></li>
            <li><a href="#ProjectIDCreation">Project ID Creation</a></li>
            <li><a href="#">Display all submission for verify</a></li>
        </ul>

        <b><a class="navbar-brand" href="#" style="color:white">User</a></b>
        <ul class="nav navbar-nav">
            <li><a href="#">Timesheet Information</a></li>

        </ul>
    </div>

    <div class="navbar navbar-inverse navbar-fixed-top">

        <ul id="login_signup">
            <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li>
            <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li>
        </ul>
    </div>

    <div class="pull-right">
        <div ng-view></div>
    </div>
</body>
</html>

index.css

.navbar-fixed-left {
  width: 140px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
  float: none;  /* Cancel default li float: left */
  width: 139px;
}

.navbar-fixed-left + .container {
  padding-left: 160px;
}

/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}
body{
    position: relative;
    background: url(images/gradient.png);
    background-repeat:no-repeat;
    background-size:150% 150vh;
}

#login_bar{
width:300px;        
position:fixed;
z-index:10;        
border:1px solid black;   
top:-5px;
right:0px;
}

#header{
width:1000px;    
background-image:url('../images/hf1.jpg'); 
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}

#login_signup{
float:right;    
}

#login_signup > li{
float:left;    
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;           
}

#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inlineblock;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;

box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}

#login_signup li span{  
font-size: 12px;        
display:inlineblock;
}

#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;    
color:#006666;
}

#wrapper{
width:1000px;
min-height:600px;    
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}

app.js

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function ($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/Header', {
            templateUrl: '/Header.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        });
});

Answer 1

我必须设置正确的边距才能将页面放在正确的位置。

将所有页面与主菜单页面集成

1 个答案: