1.index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="lgstyle.css" rel="stylesheet">
<body ng-app="myApp">
<div ui-view></div>
<script>
var app = angular.module('myApp',["ui.router"]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',{
url: '/index',
templateUrl: 'login.html'
})
.state('home',{
url:'/home',
templateUrl:'home.html'
})
})
</script>
</body>
</html>
login:
<style>
.container{
margin-left: 500px;
margin-top: 100px;
border:1px solid gray;
width: 400px;
height: 350px;
border-radius: 15px;
}
.title{
margin-left: 480px;
margin-top: 20px;
}
.loginForm{
margin-bottom: 30px;
}
.form-control{
margin-bottom: 20px;
width: 200px;
}
.erro{
color: red;
font-size: 10px;
}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
<div class="container" ng-app="">
<h2 class="title"><strong>欢迎登录</strong></h2>
<div class="wrapp">
<form name="loginForm" class="loginForm">
<div class="inp"><label><strong>Username:</strong></label><input g-if="loginForm.username.$invalid && loginForm.username.$touched" ng-model="usr" ng-minlength="4" name="username" ng-maxlength="12" type="text" class="form-control" required>
<label class="erro" ng-if="loginForm.username.$invalid && loginForm.username.$touched">erro:the username'length must between 4~12!</label>
</div>
<div class="inp"><label><strong>Password:</strong></label><input ng-model="pwd" ng-minlength="4" name="password" ng-maxlength="12" type="password" class=" form-control" required>
<label class="erro" ng-if="loginForm.password.$invalid && loginForm.password.$touched">erro:the password'length must between 4~12!</label>
</div>
<button class="btn"><strong><a ui-sref="/index">Login</a ></strong></button>
</form>
</div>
</div>
home:
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<style>
body{
height: 1200px;
background-color: #ebece7;
}
.nav{
margin:0;
padding: 0;
background-color: #d3d9c2;
position: fixed;
width: 1200px;
z-index: 1;
border-radius: 10px;
}
.nav.nav-pills{
padding:0;
margin:0;
font-size: 16px;
}
.p1{
width: 380px;
height: 375px;
margin-top:50px;
margin-left: 180px;
position: absolute;
border-radius: 10px;
background-color: #d3d9c2;
box-shadow: 10px 5px 5px gray;
}
.p2{
width: 380px;
height: 375px;
margin-top: 50px;
margin-left: 600px;
border-radius: 10px;
background-color: #d3d9c2;
box-shadow: 10px 5px 5px gray;
}
.p3{
width: 380px;
height: 375px;
margin-top: 40px;
margin-left: 180px;
border-radius: 10px;
position: absolute;
background-color: #d3d9c2;
box-shadow: 10px 5px 5px gray;
}
.p4{
width: 380px;
height: 375px;
margin-left: 600px;
margin-top: 40px;
border-radius: 10px;
background-color: #d3d9c2;
box-shadow: 10px 5px 5px gray;
}
.quit{
padding-left: 800px;
}
.footer{
margin-top: 20px;
margin-left: 60px;
height: 40px;
width: 1200px;
background-color: #d3d9c2;
}
.footer{
border-radius: 10px;
}
span{
position: relative;
left: 1000px;
top: 20px;
z-index: 2;
}
</style>
</head>
<body ng-app="">
<div class="container">
<ul class="nav nav-pills">
<li><a href=" ">Home</a ></li>
<li><a href="####">Files</a ></li>
<li><a href="##">Download</a ></li>
<li><a href="###">Picture</a ></li>
<li class="quit"><a href="退出">Quit</a ></li>
</ul>
<div class="p1"><a href="">< img src="img/img.png" alt="相册" height="100%" width="100%" style="border-radius: 10px"></a ></div>
<div class="p2"><a href="">< img src="img/files.png" alt="文件" height="100%" width="100%" style="border-radius: 10px"></a ></div>
<div class="p3"><a href="">< img src="img/upload.png" alt="上传文件" height="100%" width="95%" style=" margin-left: 10px; border-radius: 10px"></a ></div>
<div class="p4"><a href="">< img src="img/pencil-o.png" alt="写日记" height="100%" width="100%" style="border-radius: 10px"></a ></div>
</div>
<div class="bottom"><footer class="footer"><span>版权信息：</span></footer></div>
成功加载。
