add 5cm
@@ -0,0 +1,210 @@
|
||||
body{
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
color: #D3D3D3;
|
||||
}
|
||||
|
||||
img{
|
||||
border: 0; /*针对IE*/
|
||||
}
|
||||
|
||||
a:link{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.shadow{
|
||||
box-shadow: 0 3px 2px #3B3B3B;
|
||||
}
|
||||
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main_min_height{
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.padding8px{
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.main_top_bottom{
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nav{
|
||||
background-color: #1C1817;
|
||||
width: 60px;
|
||||
left: 0;
|
||||
border-right:1px solid #454545;
|
||||
}
|
||||
|
||||
.list{
|
||||
background-color: #1E1E1E;
|
||||
width: 295px;
|
||||
left: 61px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mapdiv{
|
||||
background-color: #808080;
|
||||
left: 355px;
|
||||
right: 0;
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.map{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 65px;
|
||||
right: 65px;
|
||||
bottom: 30px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon_margin{
|
||||
margin-left: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.icon_pos{
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: 62px;
|
||||
}
|
||||
|
||||
.icon_pos_1{
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: 122px;
|
||||
}
|
||||
|
||||
.logodiv{
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.floatl{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.floatr{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.display_inline{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo_margin{
|
||||
margin-top: 25px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.logoname{
|
||||
height: 20px;
|
||||
width: 90px;
|
||||
margin-top: 23px;
|
||||
font-family: '黑体';
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
a:link {color: #D3D3D3}
|
||||
a:visited {color: #D3D3D3}
|
||||
a:hover {color: #FFF}
|
||||
|
||||
|
||||
.logo_title{
|
||||
height: 40px;
|
||||
margin-top:-15px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.list_width{
|
||||
width: 295px;
|
||||
}
|
||||
|
||||
.list_header{
|
||||
background-color: #000000;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.signal{
|
||||
height: 27px;
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
.signal_img{
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.list_header_title{
|
||||
color: #FFD005;
|
||||
font-size: 15px;
|
||||
line-height: 40px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
|
||||
.center{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.fontbold{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input{
|
||||
border: 0;
|
||||
height: 20px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input_bk{
|
||||
background-color: #1E1E1E;
|
||||
border-bottom: 1px solid #373839;
|
||||
color: #FFF000;
|
||||
}
|
||||
|
||||
.login_form{
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.input_div{
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.input_psw{
|
||||
margin-left: 19px;
|
||||
}
|
||||
|
||||
.input_name{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.input_login{
|
||||
margin-top: 5px;
|
||||
color: #FFF;
|
||||
width: 45px;
|
||||
background-color: #007ACC;
|
||||
margin-left: 150px;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
body {
|
||||
padding: 50px;
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00B7FF;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
||||
<title>5cm</title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--功能菜单部分-->
|
||||
<div class="nav main_min_height main_top_bottom">
|
||||
<!--上部功能-->
|
||||
<div class="icon icon_margin cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="头像" />
|
||||
</div>
|
||||
<div class="icon icon_margin cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="瓶子" />
|
||||
</div>
|
||||
<div class="icon icon_margin cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="轨迹" />
|
||||
</div>
|
||||
<div class="icon icon_margin cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="故事" />
|
||||
</div>
|
||||
<div class="icon icon_margin cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="追寻" />
|
||||
</div>
|
||||
|
||||
<!--底部功能-->
|
||||
<div class="icon icon_pos cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="关于我" />
|
||||
</div>
|
||||
|
||||
<div class="icon icon_pos_1 cursor">
|
||||
<img class="icon" src="../images/awatar.png" alt="5cm故事" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--列表部分-->
|
||||
<div class="list main_min_height main_top_bottom">
|
||||
<div class="list_header list_width"></div>
|
||||
<div class="signal list_width"></div>
|
||||
</div>
|
||||
|
||||
<!--地图部分-->
|
||||
<div class="mapdiv main_min_height main_top_bottom">
|
||||
<div class="logodiv logo_margin">
|
||||
<div class="display_inline cursor">
|
||||
<img class="logo" src="../images/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="display_inline logoname cursor">
|
||||
<span>秒速五厘米,遇见那0.000049.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map shadow">
|
||||
<img class="map_size" src="../images/map.png" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 434 KiB |
|
After Width: | Height: | Size: 843 B |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 740 B |
|
After Width: | Height: | Size: 1018 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,151 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #E6E6E6;
|
||||
font-size: 16px;
|
||||
}
|
||||
img {
|
||||
border: 0;
|
||||
/*针对IE*/
|
||||
}
|
||||
.overflow_hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.clear_float {
|
||||
clear: both;
|
||||
}
|
||||
.cursor_po {
|
||||
cursor: pointer;
|
||||
}
|
||||
.header {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
}
|
||||
#header_back {
|
||||
height: 60px;
|
||||
width: 40px;
|
||||
float: left;
|
||||
background-image: url('../../public/images/antenna2.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
#header_title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin: auto 40px;
|
||||
font-size: 20px;
|
||||
color: #FFF;
|
||||
}
|
||||
#header_title {
|
||||
text-align: center;
|
||||
}
|
||||
.toolbar_sec {
|
||||
background-color: #1C1817;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar {
|
||||
height: 60px;
|
||||
width: 20%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
/*--------footer--------*/
|
||||
.toolbar_img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
/*---------login---------*/
|
||||
.login {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 50px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
/*opacity: 0.8;*/
|
||||
background-color: #FFF;
|
||||
}
|
||||
.userlogo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.login_form {
|
||||
margin-top: 10px;
|
||||
height: 140px;
|
||||
width: 218px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.login_text_div {
|
||||
height: 38px;
|
||||
}
|
||||
.login_text_div input {
|
||||
border: 1px solid #A3A3A3;
|
||||
padding: 0 7px;
|
||||
height: 25px;
|
||||
outline: none;
|
||||
}
|
||||
.login_text_div input[type='button'] {
|
||||
border: 0;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
color: #FFF;
|
||||
background-color: #5D87D1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/*---------------register--------*/
|
||||
.register_form {
|
||||
width: 218px;
|
||||
margin-top: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
/*--------------userinfo--------*/
|
||||
.userinfo_div {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 240px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.diplay_ib {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
.diplay_ib div:first-child {
|
||||
color: #525252;
|
||||
font-weight: bold;
|
||||
}
|
||||
.userinfo_username {
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
height: 16px;
|
||||
width: 100px;
|
||||
}
|
||||
.userinfo_desc {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #4D4D4D;
|
||||
}
|
||||
#userinfo_desc_text {
|
||||
height: 100px;
|
||||
}
|
||||
.logout {
|
||||
background-color: #1463A6;
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
margin: 10px auto;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" Cache-control="public" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header">
|
||||
<div id="header_back" class="cursor_po"></div>
|
||||
<div id="header_title" class="cursor_po">首页</div>
|
||||
</div>
|
||||
</header>
|
||||
<!--包含部分-->
|
||||
<footer class="toolbar_sec">
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/drupal.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/locaton.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/alarm.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ning.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ligthbulb_off.png">
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
<!--包含部分-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" Cache-control="public" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--包含部分-->
|
||||
<header>
|
||||
<div class="header">
|
||||
<div id="header_back" class="cursor_po"></div>
|
||||
<div id="header_title" class="cursor_po">首页</div>
|
||||
</div>
|
||||
</header>
|
||||
<!--包含部分-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" Cache-control="public" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header">
|
||||
<div id="header_back" class="cursor_po"></div>
|
||||
<div id="header_title" class="cursor_po">首页</div>
|
||||
</div>
|
||||
</header>
|
||||
<!--包含部分-->
|
||||
<aside class="login">
|
||||
<!--登录-->
|
||||
<div class="login_form">
|
||||
<div class="login_text_div">
|
||||
用户名<input type="text" name="username"/>
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
密码<input type="password" name="password" style="margin-left:17px;" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
<input style="margin-left:75px;" class="cursor_po" type="button" value="登录" />
|
||||
<input type="button" class="cursor_po" value="取消" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</aside>
|
||||
<!--包含部分-->
|
||||
<footer class="toolbar_sec">
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/drupal.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/locaton.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/alarm.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ning.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ligthbulb_off.png">
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" Cache-control="public" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header">
|
||||
<div id="header_back" class="cursor_po"></div>
|
||||
<div id="header_title" class="cursor_po">首页</div>
|
||||
</div>
|
||||
</header>
|
||||
<!--包含部分-->
|
||||
<aside class="login">
|
||||
<!--注册-->
|
||||
<div class="register_form">
|
||||
<div class="login_text_div">
|
||||
用户名<input type="text" name="username" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
邮箱<input type="email" name="email" style="margin-left:17px;" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
密码<input type="password" name="password" style="margin-left:17px;" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
<input style="margin-left:75px;" class="cursor_po" type="button" value="登录" />
|
||||
<input type="button" class="cursor_po" value="取消" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
<!--包含部分-->
|
||||
<footer class="toolbar_sec">
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/drupal.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/locaton.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/alarm.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ning.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ligthbulb_off.png">
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" Cache-control="public" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header">
|
||||
<div id="header_back" class="cursor_po"></div>
|
||||
<div id="header_title" class="cursor_po">首页</div>
|
||||
</div>
|
||||
</header>
|
||||
<!--包含部分-->
|
||||
<aside class="login">
|
||||
<!--用户信息-->
|
||||
<div class="userinfo_div">
|
||||
<div>
|
||||
<div class="diplay_ib">
|
||||
<img class="userlogo" src="../../public/images/awatar.png" />
|
||||
</div>
|
||||
<div class="diplay_ib">
|
||||
<div class="userinfo_username overflow_hidden">我是小小炮炮兵</div>
|
||||
<div class="userinfo_username overflow_hidden">昵称</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear_float userinfo_desc">
|
||||
<div>你的5cm故事描述:<div>
|
||||
<div class="overflow_hidden" id="userinfo_desc_text">
|
||||
推荐的去除浮动代码为:在css文件中定义如下的women收到货撒谎哇个
|
||||
</div>
|
||||
</div>
|
||||
<div class="logout cursor_po">
|
||||
注销账号
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
<!--包含部分-->
|
||||
<footer class="toolbar_sec">
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/drupal.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/locaton.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/alarm.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ning.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ligthbulb_off.png">
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,183 @@
|
||||
@header_height:60px;
|
||||
@float_left:left;
|
||||
@float_right:right;
|
||||
@logo_pc_height:40px;
|
||||
@font_size:16px;
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
background-color: #E6E6E6;
|
||||
font-size: @font_size;
|
||||
}
|
||||
|
||||
img{
|
||||
border: 0; /*针对IE*/
|
||||
}
|
||||
|
||||
.overflow_hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
.clear_float{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.cursor_po{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header{
|
||||
height: @header_height;
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#header_back{
|
||||
height:@header_height;
|
||||
width:@logo_pc_height;
|
||||
float:@float_left;
|
||||
background-image: url('../../public/images/antenna2.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: @logo_pc_height @logo_pc_height;
|
||||
}
|
||||
|
||||
#header_title{
|
||||
height:@header_height;
|
||||
line-height: @header_height;
|
||||
margin:auto @logo_pc_height;
|
||||
font-size: 20px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#header_title{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar_sec{
|
||||
background-color: #1C1817;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: @header_height;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar{
|
||||
height: @header_height;
|
||||
width: 20%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------footer--------*/
|
||||
@toolbar_img_height:50px;
|
||||
.toolbar_img{
|
||||
height: @toolbar_img_height;
|
||||
width: @toolbar_img_height;
|
||||
margin: (@header_height - @toolbar_img_height)/2 auto;
|
||||
}
|
||||
|
||||
/*---------login---------*/
|
||||
.login {
|
||||
position: absolute;
|
||||
top:@header_height;
|
||||
bottom:@toolbar_img_height;
|
||||
right: 0;
|
||||
left: 0;
|
||||
/*opacity: 0.8;*/
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.userlogo{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@login_margin_top: 10px;
|
||||
.login_form{
|
||||
margin-top: @login_margin_top;
|
||||
height: 140px;
|
||||
width: 218px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.login_text_div{
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.login_text_div input{
|
||||
border: 1px solid #A3A3A3;
|
||||
padding: 0 7px;
|
||||
height: 25px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login_text_div input[type='button']{
|
||||
border: 0;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
color: #FFF;
|
||||
background-color: #5D87D1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*---------------register--------*/
|
||||
.register_form{
|
||||
width: 218px;
|
||||
margin-top: @login_margin_top;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/*--------------userinfo--------*/
|
||||
.userinfo_div{
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 240px;
|
||||
margin-top:@login_margin_top;
|
||||
}
|
||||
|
||||
.diplay_ib{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.diplay_ib div:first-child{
|
||||
color: #525252;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.userinfo_username{
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
height: @font_size;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.userinfo_desc{
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #4D4D4D;
|
||||
}
|
||||
|
||||
#userinfo_desc_text{
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.logout{
|
||||
background-color: #1463A6;
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
margin: 10px auto;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>首页</title>
|
||||
<link rel="stylesheet" type="text/css" href="../css/main.css">
|
||||
<script type="text/javascript" src="../js/sea2.3.js"></script>
|
||||
<script type="text/javascript" src="../js/zepto.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
seajs.use('../tpl/header', function (header) {
|
||||
$('body').append($(header('header',{title:'首页'})));
|
||||
// $('#header_title').text('首页');
|
||||
});
|
||||
|
||||
seajs.use('../tpl/footer', function (template) {
|
||||
$('body').append($(template('footer')));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
前端CSS框架 LESS 采用Node.js编译
|
||||
前端MVC采用Backbone + Underscore + Zepto + Sea.js + TMod.js
|
||||
DB:Mongo + Redis
|
||||
@@ -0,0 +1,28 @@
|
||||
<!--包含部分-->
|
||||
<footer class="toolbar_sec">
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/drupal.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/locaton.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/alarm.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ning.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="">
|
||||
<img class="toolbar_img" src="../../public/images/ligthbulb_off.png">
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,6 @@
|
||||
<header>
|
||||
<div class="header">
|
||||
<div id="header_back" class="cursor_po"></div>
|
||||
<div id="header_title" class="cursor_po"><%=title%></div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!--包含部分-->
|
||||
<aside class="login">
|
||||
<!--登录-->
|
||||
<div class="login_form">
|
||||
<div class="login_text_div">
|
||||
用户名<input type="text" name="username"/>
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
密码<input type="password" name="password" style="margin-left:17px;" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
<input style="margin-left:75px;" class="cursor_po" type="button" value="登录" />
|
||||
<input type="button" class="cursor_po" value="取消" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "template",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"tmodjs": "1.0.1-rc5"
|
||||
},
|
||||
"tmodjs-config": {
|
||||
"output": "../tpl",
|
||||
"charset": "utf-8",
|
||||
"syntax": "simple",
|
||||
"helpers": null,
|
||||
"escape": true,
|
||||
"compress": true,
|
||||
"type": "cmd",
|
||||
"runtime": "template.js",
|
||||
"alias": null,
|
||||
"minify": false,
|
||||
"cache": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!--包含部分-->
|
||||
<aside class="login">
|
||||
<!--注册-->
|
||||
<div class="register_form">
|
||||
<div class="login_text_div">
|
||||
用户名<input type="text" name="username" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
邮箱<input type="email" name="email" style="margin-left:17px;" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
密码<input type="password" name="password" style="margin-left:17px;" />
|
||||
</div>
|
||||
<div class="login_text_div">
|
||||
<input style="margin-left:75px;" class="cursor_po" type="button" value="登录" />
|
||||
<input type="button" class="cursor_po" value="取消" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,23 @@
|
||||
<aside class="login">
|
||||
<!--用户信息-->
|
||||
<div class="userinfo_div">
|
||||
<div>
|
||||
<div class="diplay_ib">
|
||||
<img class="userlogo" src="../../public/images/awatar.png" />
|
||||
</div>
|
||||
<div class="diplay_ib">
|
||||
<div class="userinfo_username overflow_hidden">我是小小炮炮兵</div>
|
||||
<div class="userinfo_username overflow_hidden">昵称</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear_float userinfo_desc">
|
||||
<div>你的5cm故事描述:<div>
|
||||
<div class="overflow_hidden" id="userinfo_desc_text">
|
||||
推荐的去除浮动代码为:在css文件中定义如下的women收到货撒谎哇个
|
||||
</div>
|
||||
</div>
|
||||
<div class="logout cursor_po">
|
||||
注销账号
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,4 @@
|
||||
/*TMODJS:{"version":2,"md5":"5224df6919d5ae474a4801096f4e6506"}*/
|
||||
define(function(require) {
|
||||
return require("./template")("footer", ' <footer class="toolbar_sec"> <div class="toolbar"> <a href=""> <img class="toolbar_img" src="../../public/images/drupal.png"> </a> </div> <div class="toolbar"> <a href=""> <img class="toolbar_img" src="../../public/images/locaton.png"> </a> </div> <div class="toolbar"> <a href=""> <img class="toolbar_img" src="../../public/images/alarm.png"> </a> </div> <div class="toolbar"> <a href=""> <img class="toolbar_img" src="../../public/images/ning.png"> </a> </div> <div class="toolbar"> <a href=""> <img class="toolbar_img" src="../../public/images/ligthbulb_off.png"> </a> </div> </footer> ');
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
/*TMODJS:{"version":7,"md5":"06d34184954351be4436fcf434869e5a"}*/
|
||||
define(function(require) {
|
||||
return require("./template")("header", '<header> <div class="header"> <div id="header_back" class="cursor_po"></div> <div id="header_title" class="cursor_po"><%=title%></div> </div> </header> ');
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
/*TMODJS:{"version":1,"md5":"39e94a03529bbc7783257b84bcac128f"}*/
|
||||
define(function(require) {
|
||||
return require("./template")("login", ' <aside class="login"> <div class="login_form"> <div class="login_text_div"> 用户名<input type="text" name="username"/> </div> <div class="login_text_div"> 密码<input type="password" name="password" style="margin-left:17px;" /> </div> <div class="login_text_div"> <input style="margin-left:75px;" class="cursor_po" type="button" value="登录" /> <input type="button" class="cursor_po" value="取消" /> </div> </div> </aside> ');
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
/*TMODJS:{"version":1,"md5":"b7a25b27eadafdffa30b9884314c9f38"}*/
|
||||
define(function(require) {
|
||||
return require("./template")("register", ' <aside class="login"> <div class="register_form"> <div class="login_text_div"> 用户名<input type="text" name="username" /> </div> <div class="login_text_div"> 邮箱<input type="email" name="email" style="margin-left:17px;" /> </div> <div class="login_text_div"> 密码<input type="password" name="password" style="margin-left:17px;" /> </div> <div class="login_text_div"> <input style="margin-left:75px;" class="cursor_po" type="button" value="登录" /> <input type="button" class="cursor_po" value="取消" /> </div> </div> </aside> ');
|
||||
});
|
||||
@@ -0,0 +1,81 @@
|
||||
/*TMODJS:{}*/
|
||||
!function(String) {
|
||||
function template(filename, content) {
|
||||
return (/string|function/.test(typeof content) ? compile : renderFile)(filename, content);
|
||||
}
|
||||
function toString(value, type) {
|
||||
return "string" != typeof value && (type = typeof value, "number" === type ? value += "" : value = "function" === type ? toString(value.call(value)) : ""),
|
||||
value;
|
||||
}
|
||||
function escapeFn(s) {
|
||||
return escapeMap[s];
|
||||
}
|
||||
function escapeHTML(content) {
|
||||
return toString(content).replace(/&(?![\w#]+;)|[<>"']/g, escapeFn);
|
||||
}
|
||||
function each(data, callback) {
|
||||
if (isArray(data)) for (var i = 0, len = data.length; len > i; i++) callback.call(data, data[i], i, data); else for (i in data) callback.call(data, data[i], i);
|
||||
}
|
||||
function resolve(from, to) {
|
||||
var DOUBLE_DOT_RE = /(\/)[^/]+\1\.\.\1/, dirname = ("./" + from).replace(/[^/]+$/, ""), filename = dirname + to;
|
||||
for (filename = filename.replace(/\/\.\//g, "/"); filename.match(DOUBLE_DOT_RE); ) filename = filename.replace(DOUBLE_DOT_RE, "/");
|
||||
return filename;
|
||||
}
|
||||
function renderFile(filename, data) {
|
||||
var fn = template.get(filename) || showDebugInfo({
|
||||
filename: filename,
|
||||
name: "Render Error",
|
||||
message: "Template not found"
|
||||
});
|
||||
return data ? fn(data) : fn;
|
||||
}
|
||||
function compile(filename, fn) {
|
||||
if ("string" == typeof fn) {
|
||||
var string = fn;
|
||||
fn = function() {
|
||||
return new String(string);
|
||||
};
|
||||
}
|
||||
var render = cache[filename] = function(data) {
|
||||
try {
|
||||
return new fn(data, filename) + "";
|
||||
} catch (e) {
|
||||
return showDebugInfo(e)();
|
||||
}
|
||||
};
|
||||
return render.prototype = fn.prototype = utils, render.toString = function() {
|
||||
return fn + "";
|
||||
}, render;
|
||||
}
|
||||
function showDebugInfo(e) {
|
||||
var type = "{Template Error}", message = e.stack || "";
|
||||
if (message) message = message.split("\n").slice(0, 2).join("\n"); else for (var name in e) message += "<" + name + ">\n" + e[name] + "\n\n";
|
||||
return function() {
|
||||
return "object" == typeof console && console.error(type + "\n\n" + message), type;
|
||||
};
|
||||
}
|
||||
var cache = template.cache = {}, String = this.String, escapeMap = {
|
||||
"<": "<",
|
||||
">": ">",
|
||||
'"': """,
|
||||
"'": "'",
|
||||
"&": "&"
|
||||
}, isArray = Array.isArray || function(obj) {
|
||||
return "[object Array]" === {}.toString.call(obj);
|
||||
}, utils = template.utils = {
|
||||
$helpers: {},
|
||||
$include: function(filename, data, from) {
|
||||
return filename = resolve(from, filename), renderFile(filename, data);
|
||||
},
|
||||
$string: toString,
|
||||
$escape: escapeHTML,
|
||||
$each: each
|
||||
}, helpers = template.helpers = utils.$helpers;
|
||||
template.get = function(filename) {
|
||||
return cache[filename.replace(/^\.\//, "")];
|
||||
}, template.helper = function(name, helper) {
|
||||
helpers[name] = helper;
|
||||
}, "function" == typeof define ? define(function() {
|
||||
return template;
|
||||
}) : "undefined" != typeof exports ? module.exports = template : this.template = template;
|
||||
}();
|
||||
@@ -0,0 +1,4 @@
|
||||
/*TMODJS:{"version":1,"md5":"d293b273acf350178e2c08888a7cf945"}*/
|
||||
define(function(require) {
|
||||
return require("./template")("userinfo", '<aside class="login"> <div class="userinfo_div"> <div> <div class="diplay_ib"> <img class="userlogo" src="../../public/images/awatar.png" /> </div> <div class="diplay_ib"> <div class="userinfo_username overflow_hidden">我是小小炮炮兵</div> <div class="userinfo_username overflow_hidden">昵称</div> </div> </div> <div class="clear_float userinfo_desc"> <div>你的5cm故事描述:<div> <div class="overflow_hidden" id="userinfo_desc_text"> 推荐的去除浮动代码为:在css文件中定义如下的women收到货撒谎哇个 </div> </div> <div class="logout cursor_po"> 注销账号 </div> </div> </aside> ');
|
||||
});
|
||||