Batman Console 登陆界面
博客专区 > coin1994 的博客 > 博客详情
Batman Console 登陆界面
coin1994 发表于5个月前
Batman Console 登陆界面
  • 发表于 5个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 上回上传了通用的 component.css 今天会上传 login 相关的界面。周末的时候会把相关的逻辑写一写。

/*login.css*/
span{
 color: #ffffff;
}
.middleware_area{
 width: 100%;
 margin-left: 0%;
 position: absolute;
}

.login_layout{
 width: 480px;
 height: 320px;
 left: -240px;
 margin-left: 50%;
 margin-top: 40px;
 position: fixed;
 background-color: #121212;
}

.login_item_label{
 width: 240px;
 height: 48px;
 margin: auto;
 margin-top: 15px;
 line-height: 48px;
 font-size: 24px;
}

.login_item_input{
 width: 240px;
 height: 48px;
 background-color: #666666;
 margin: auto;
 margin-top: 15px;
}
.login_item_input_warp{
 padding:12px;
}
.login_button_layout{
 width: 240px;
 height: 48px;
 margin: auto;
 margin-top: 40px;
 line-height: 48px;
 font-size: 18px;
 overflow: hidden;
}
.login_button_item{
 float: left;
 width: 100px;
 height: 44px;
 margin-left: 13px;
 margin-top: 2px;
 text-align:center;
 background-color: #009933;
}

以上是login的样式。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <!-- import css files -->
 <link rel="stylesheet" type="text/css" href="../libs/css/component.css">
 <link rel="stylesheet" type="text/css" href="css/login.css">

 <!-- import js  files -->
 <script type="text/javascript" src = "../libs/js/jquery-3.2.1.js"></script>
 <title>Batman Console</title>
</head>
<body>
 <div class="top_area">
  <div class="top_area_left_item">
   蝙蝠侠Console
  </div>
 </div>
 <div class="middleware_area">
  <div class="login_layout">
   <div class="login_item_label">
    <span>用户登陆</span>
   </div>
   <div class="login_item_input">
    <div class="login_item_input_warp">
     <span>用户</span>
     <input type="text" name="" value="" placeholder="请输入昵称">
    </div>
   </div>
   <div class="login_item_input">
    <div class="login_item_input_warp">
     <span>密码</span>
     <input type="password" name="" value="" placeholder="请输入密码">
    </div>
   </div>
   <div class="login_button_layout">
    <div class="login_button_item">
     <span>登陆</span>
    </div>
    <div class="login_button_item">
     <span>取消</span>
    </div>
   </div>
  </div>
 </div>
 <div class="bottom_area">
  <div class="bottom_area_item">2017 @ Batman Copyright</div>
 </div>

 <!-- 脚本逻辑 -->
 <script type="text/javascript">
 </script>
</body>
</html>

 

以上是login的html。

span{
 color: #ffffff;
}
.middleware_area{
 width: 100%;
 margin-left: 0%;
 position: absolute;
}
.register_layout{
 width: 640px;
 height: 480px;
 left: -320px;
 margin-left: 50%;
 margin-top: 20px;
 position: fixed;
 background-color: #121212;
}

.register_ltem_label{
 width: 480px;
 height: 48px;
 margin: auto;
 margin-top: 45px;
 line-height: 48px;
 font-size: 24px;
}
.register_ltem_input{
 width: 480px;
 height: 48px;
 margin: auto;
 background-color: #666666;
 margin-top: 15px;
}
.register_item_input_warp{
 padding:12px;
 overflow: hidden;
}

.register_item_input_warp span{
 margin:0px,10px;
 float: left;
}
.register_item_input_warp input{
 float: left;
 margin-left: 10px;
 width: 400px;
 height: 18px;
}

.register_button_layout{
 width: 480px;
 height: 48px;
 margin: auto;
 margin-top: 20px;
 line-height: 48px;
 font-size: 18px;
 overflow: hidden;
}

.register_button_item{
 float: left;
 width: 160px;
 height: 44px;
 margin-left: 55px;
 margin-top: 2px;
 text-align:center;
 background-color: #009933;
}

以上是register的样式。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <!-- import css files -->
 <link rel="stylesheet" type="text/css" href="../libs/css/component.css">
 <link rel="stylesheet" type="text/css" href="css/register.css">
 <!-- import js  files -->
 <script type="text/javascript" src = "../libs/js/jquery-3.2.1.js"></script>
 <title>Batman Console</title>
</head>
<body>

 <div class="top_area">
  <div class="top_area_left_item">
   蝙蝠侠Console
  </div>
 </div>
 <div class="middleware_area">
  <div class="register_layout">
   <div class="register_ltem_label">
    <span>用户注册</span>
   </div>
   <div class="register_ltem_input">
    <div class="register_item_input_warp">
     <span>昵称</span>
     <input type="text" name="" value="sunshine">
    </div>
   </div>
   <div class="register_ltem_input">
    <div class="register_item_input_warp">
     <span>邮箱</span>
     <input type="text" name="" value="sunshine">
    </div>
   </div>
   <div class="register_ltem_input">
    <div class="register_item_input_warp">
     <span>密码</span>
     <input type="text" name="" value="sunshine">
    </div>
   </div>
   <div class="register_ltem_input">
    <div class="register_item_input_warp">
     <span>确认</span>
     <input type="text" name="" value="sunshine">
    </div>
   </div>

   <div class="register_button_layout">
    <div class="register_button_item">
     <span>登陆</span>
    </div>
    <div class="register_button_item">
     <span>取消</span>
    </div>    
   </div>
  </div>
 </div>
 <div class="bottom_area">
  <div class="bottom_area_item">2017 @ Batman Copyright</div>
 </div>
 <!-- 脚本逻辑 -->
 <script type="text/javascript">
 </script>
</body>
</html>

共有 人打赏支持
粉丝 0
博文 2
码字总数 894
×
coin1994
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: