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

Ether

一张100*100px的png图片，aspx已定义图片实际长宽，  为什么还横向延伸，遮挡其他控件并置于最高层，其他控件float亦无效，什么原因，要怎么处理？

sanshi

请基于空项目重现问题，并上传

Ether

http://pan.baidu.com/s/1boWe8AN

Ether

sanshi 发表于 2017-3-23 14:17
请基于空项目重现问题，并上传

已上传到云盘，请查看

sanshi

你的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. 
   
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>

复制代码

调整后的效果：


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

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

Neal.六道

三石大大好，真真好，三石大大妙，真果棒，我是铁头功，无敌铁头功，你是金刚腿 ...

Ether

sanshi 发表于 2017-3-23 15:21
你的ASPX代码：

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