简单登陆页面

来源：互联网发布：python抓取网页数据编辑：程序博客网时间：2024/05/16 05:16

先看效果图

web框架是ＣppCMS，页面文件login_page.tmpl为：

<% c++ #include "model/content.h" %><% skin user_login_skin %><% view user_login_view uses Content::UserLoginContent %><% template render() %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"><html>  <head>    <link type="text/css" href="/plugin/artDialog4.1.6/skins/blue.css" rel="stylesheet"></link>    <link rel="stylesheet" type="text/css"  href="/plugin/jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css"></link>    <script data-main="/script/app/loginPage" src="/script/thirdParty/require.js"></script>        <link type="text/css" href="/style/login_page.css" rel="stylesheet"></link>  </head>  </head><body>  <div id="base" class="">    <div id="u0" class="">      <input type="text" name="email" id="loginEmail" />      <div id="u1" class="text">        <p><span> </span></p>      </div>    </div>    <div id="u2" class="">      <input type="password" name="pwd" id="loginPwd" />      <div id="u3" class="text">        <p><span> </span></p>      </div>    </div>    <div id="u4" class="">      <div id="u5" class="text">        <p><span>邮箱：</span></p>      </div>    </div>    <div id="u6" class="">      <div id="u7" class="text">        <p><span>密码：</span></p>      </div>    </div>    <div id="u8" class="">      <div id="u9" class="text">        <p><span>用户登录</span></p>      </div>    </div>    <div id="u10" class="">      <input id="loginButton" type="submit" value="登录"/>    </div>    <div id="u11" class="">      <div id="u12" class="text">        <p><span> </span></p>      </div>    </div>  </div></body></html><% end template %><% end view %><% end skin %>

login_page.css代码为：

body {  margin:0px;  background-image:none;  position:static;  left:auto;  width:980px;  margin-left:0;  margin-right:0;  text-align:left;}#base {  position:absolute;  z-index:0;}#u0 {  position:absolute;  left:385px;  top:184px;  width:270px;  height:30px;}#loginEmail {  position:absolute;  left:0px;  top:0px;  width:270px;  height:30px;}#u1 {  position:absolute;  left:2px;  top:7px;  width:266px;  visibility:hidden;  word-wrap:break-word;}#u2 {  position:absolute;  left:385px;  top:240px;  width:270px;  height:30px;}#loginPwd {  position:absolute;  left:0px;  top:0px;  width:270px;  height:30px;}#u3 {  position:absolute;  left:2px;  top:7px;  width:266px;  visibility:hidden;  word-wrap:break-word;}#u4 {  position:absolute;  left:326px;  top:178px;  width:49px;  height:16px;  font-family:'Heiti SC Medium', 'Heiti SC';  font-weight:200;  font-style:normal;  font-size:16px;}#u5 {  position:absolute;  left:0px;  top:0px;  width:49px;  white-space:nowrap;}#u6 {  position:absolute;  left:326px;  top:235px;  width:49px;  height:16px;  font-family:'Heiti SC Medium', 'Heiti SC';  font-weight:200;  font-style:normal;  font-size:16px;}#u7 {  position:absolute;  left:0px;  top:0px;  width:49px;  white-space:nowrap;}#u8 {  position:absolute;  left:434px;  top:104px;  width:113px;  height:29px;  font-family:'Heiti SC Medium', 'Heiti SC';  font-weight:200;  font-style:normal;  font-size:28px;}#u9 {  position:absolute;  left:0px;  top:0px;  width:113px;  white-space:nowrap;}#u10 {  position:absolute;  left:440px;  top:290px;  width:100px;  height:35px;}#loginButton {  position:absolute;  left:0px;  top:0px;  width:100px;  height:35px;    font-family:'Heiti SC Light', 'Heiti SC';  font-weight:200;  font-style:normal;  font-size:13px;  text-decoration:none;  color:#000000;  text-align:center;}#u11 {  position:absolute;  left:0px;  top:0px;  width:980px;  height:50px;}#u12 {  position:absolute;  left:2px;  top:17px;  width:976px;  visibility:hidden;  word-wrap:break-word;}

0 0