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>

  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" Width="200px" CssClass="login_style"></f:TextBox>
  8.                         <f:TextBox ID="txt_userpwd" runat="server" Label="密码" Required="true" ShowRedStar="true" LabelWidth="60px" Width="200px" CssClass="login_style"></f:TextBox>
  9.                     </Items>
  10.                 </f:SimpleForm>
  11.             </Items>
  12.         </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://fineui.com/bbs/) Powered by Discuz! X3.4