FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 4658|回复: 6
打印 上一主题 下一主题

【开源版】怎么做一个带图片的登录页面

[复制链接]
楼主
发表于 2017-3-23 14:17:52 | 显示全部楼层
请基于空项目重现问题,并上传
沙发
发表于 2017-3-23 15:21:33 | 显示全部楼层

你的ASPX代码:
  1. <f:Window runat="server" Title="系统登录" Width="450px" Height="220px" WindowPosition="GoldenSection" Icon="Key">
  2.             <Items>
  3.                 <f:Image ID="img_login" runat="server" ImageUrl="~/IMG/USER_LOGIN.PNG" Width="100px" ImageWidth="100px"></f:Image>

  4.                 <f:SimpleForm runat="server" ID="SimpleForm1" LabelAlign="Top" BoxFlex="1" ShowBorder="false" ShowHeader="false">
  5.                     <Items>
  6.                         <f:TextBox ID="txt_username" runat="server" Label="用户名" Required="true" ShowRedStar="true" LabelWidth="60px" Width="200px" CssClass="login_style"></f:TextBox>
  7.                         <f:TextBox ID="txt_userpwd" runat="server" Label="密码" Required="true" ShowRedStar="true" LabelWidth="60px" Width="200px" CssClass="login_style"></f:TextBox>
  8.                     </Items>
  9.                 </f:SimpleForm>
  10.             </Items>
  11.         </f:Window>
复制代码


调整后的代码:
  1. <f:Window runat="server" Title="系统登录" Width="400px" WindowPosition="GoldenSection" Icon="Key"
  2.             Layout="HBox"  BodyPadding="30px 10px">
  3.             <Items>
  4.                 <f:Image ID="img_login" runat="server" ImageUrl="~/IMG/USER_LOGIN.PNG" Width="100px" ImageWidth="100px" CssStyle="margin-right:10px;"></f:Image>
  5.                 <f:SimpleForm runat="server" ID="SimpleForm1" LabelAlign="Top" BoxFlex="1" ShowBorder="false" ShowHeader="false">
  6.                     <Items>
  7.                         <f:TextBox ID="txt_username" runat="server" Label="用户名" Required="true" ShowRedStar="true" LabelWidth="60px"></f:TextBox>
  8.                         <f:TextBox ID="txt_userpwd" runat="server" Label="密码" Required="true" ShowRedStar="true" LabelWidth="60px"></f:TextBox>
  9.                     </Items>
  10.                 </f:SimpleForm>
  11.             </Items>
  12.         </f:Window>
复制代码


调整后的效果:


没什么难的,主要是对布局的运用。

关于布局,可以参考我的博客:http://www.cnblogs.com/sanshi/archive/2012/07/27/2611116.html
其实AppBox的默认登录页面就是这样的,直接抄就行了,不用想。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-1 07:28 , Processed in 0.044467 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表