FineUI 官方论坛

标题: 【开源版】怎么做一个带图片的登录页面 [打印本页]

作者: Ether    时间: 2017-3-23 11:37
标题: 【开源版】怎么做一个带图片的登录页面
一张100*100px的png图片,aspx已定义图片实际长宽,  为什么还横向延伸,遮挡其他控件并置于最高层,其他控件float亦无效,什么原因,要怎么处理?
[attach]9957[/attach]
[attach]9956[/attach]

作者: sanshi    时间: 2017-3-23 14:17
请基于空项目重现问题,并上传
作者: Ether    时间: 2017-3-23 14:52
http://pan.baidu.com/s/1boWe8AN
作者: Ether    时间: 2017-3-23 15:10
sanshi 发表于 2017-3-23 14:17
请基于空项目重现问题,并上传

已上传到云盘,请查看
作者: sanshi    时间: 2017-3-23 15:21

你的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>
复制代码


调整后的效果:
[attach]9975[/attach]

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

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



作者: Neal.六道    时间: 2017-3-23 15:32
三石大大好,真真好,三石大大妙,真果棒,我是铁头功,无敌铁头功,你是金刚腿 ...
作者: Ether    时间: 2017-3-23 15:34
sanshi 发表于 2017-3-23 15:21
你的ASPX代码:

好的,自以为手写更能提升自己,对比目测主要原因是window标签属性问题,十分感谢老大的细心指导!我一定会好好学习的。




欢迎光临 FineUI 官方论坛 (https://www.fineui.com/bbs/) Powered by Discuz! X3.4