很漂亮的Flex 用户登录界面

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[0x000000,0x323232]" fontSize="12">
<mx:Script>
<![CDATA[
// Import easing classes if you use them only in MXML.
import mx.effects.easing.Bounce;
]]>
</mx:Script>

<!-- Define the transition to animate the change of view state. -->
<mx:transitions>
<mx:Transition>
<mx:Parallel
targets="{[loginPanel, registerLink, loginButton, confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">
<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
<mx:Sequence targets="{[confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">
<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>

<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="confirm" label="确 认:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="realnameL" label="真实姓名:">
<mx:TextInput id="realname"/>
</mx:FormItem>
</mx:AddChild>
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="telL" label="电话:">
<mx:TextInput id="tel"/>
</mx:FormItem>
</mx:AddChild>
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="emailL" label="Email:">
<mx:TextInput id="email"/>
</mx:FormItem>
</mx:AddChild>
<mx:AddChild relativeTo="{loginForm}"
position="lastChild">
<mx:FormItem id="areanameL" label="所在区域:">
<mx:TextInput id="areaname"/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}"
name="title" value="用户注册"/>
<mx:SetProperty target="{loginButton}"
name="label" value="注册"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="返回登录"
click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>

<mx:Panel id="loginPanel"
title="用户登录" color="0xffffff" borderAlpha="0.15"
horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalCenter="0" verticalCenter="022">

<mx:Form id="loginForm" color="0x323232">
<mx:FormItem label="用户名:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密 码:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>

<mx:ControlBar>
<mx:LinkButton id="registerLink"
label="新用户注册"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,以下是一个简单的示例代码,用HTML和CSS编写了一个漂亮的登录界面: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>登录</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login"> <h1>欢迎登录</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> </div> </body> </html> ``` CSS代码: ``` body { background-color: #F0F0F0; } .login { background-color: #FFF; border-radius: 10px; box-shadow: 0px 0px 10px #888; margin: 100px auto; padding: 20px; width: 400px; } h1 { text-align: center; color: #555; } form { display: flex; flex-direction: column; } label { margin-top: 10px; color: #555; } input[type=text], input[type=password] { padding: 10px; border: 1px solid #CCC; border-radius: 5px; margin-bottom: 20px; } input[type=submit] { background-color: #4CAF50; border: none; color: white; padding: 10px; border-radius: 5px; cursor: pointer; margin-bottom: 20px; } input[type=submit]:hover { background-color: #45a049; } ``` 这个登录界面使用了一个带圆角和阴影的白色框作为背景,以及一些简单的HTML表单元素。登录按钮在鼠标悬停时会变成深绿色。这只是一个简单的示例,你可以根据自己的需要和品味进行更改和扩展。 ### 回答2: 编写一个漂亮的登录界面需要使用HTML和CSS来实现。下面是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>登录界面</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .login-container { width: 300px; margin: 50px auto; padding: 20px; background-color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .login-container h2 { text-align: center; color: #333333; } .login-container input[type="text"], .login-container input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #cccccc; border-radius: 3px; } .login-container button { width: 100%; padding: 10px; background-color: #4CAF50; border: none; color: #ffffff; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 3px; } .login-container button:hover { background-color: #45a049; } </style> </head> <body> <div class="login-container"> <h2>用户登录</h2> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button>登录</button> </div> </body> </html> ``` 上述代码中,我们创建了一个登录容器(login-container),该容器位于屏幕中央,具有漂亮圆角和阴影效果。在该容器内,我们添加了一个标题、一个输入框用于输入用户名、一个输入框用于输入密码,以及一个登录按钮。其中,用CSS定义了容器的样式,包括宽度、边距、背景色、阴影等;定义了输入框的样式,包括宽度、内边距、边框等;定义了按钮的样式,包括宽度、内边距、背景色、边框等。这些样式都帮助我们创建了一个漂亮的登录界面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值