使用CppCMS创建的简单登录页面-优快云博客

本文链接：https://blog.youkuaiyun.com/monkey_four/article/details/39993547

这篇博客展示了如何利用web框架CppCMS和CSS来设计一个登录页面。内容包括login_page.tmpl模板文件的设计以及login_page.css中定义的样式规则，以实现美观且功能完整的登录界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图

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;
}

简单登陆页面