web登录界面ui代码（web端UI）

本篇文章给大家谈谈web登录界面ui代码，以及web端UI对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、做一个登录页面，如果输入正确的用户名和密码，则进入欢迎页面，否则错误。请写出主要事件的程序代码
• 2、JavaScript Web UI 求解
• 3、【web测试】界面测试（UI）
• 4、使用jQuery UI库开发Web界面的简单入门指引

做一个登录页面，如果输入正确的用户名和密码，则进入欢迎页面，否则错误。请写出主要事件的程序代码

Default1.aspx窗体代码：

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head runat="server"

title登陆页/title

/head

body

form id="form1" runat="server"

div

用户名：

asp:TextBox ID="TextBox1" runat="server"/asp:TextBox

br /

br /

密   码：

asp:TextBox ID="TextBox2" runat="server"/asp:TextBox

br /

br /

asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="密码" Width="116px" //div

/form

/body

/html

代码窗体的代码如下：

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

if (TextBox1.Text == "admin" TextBox2.Text == "admin")

{ Response.Redirect("res/Default2.aspx"); }

else

{ Response.Write("登陆失败"); }

}

}

JavaScript Web UI 求解

按你说的，这个功能不是C#实现的，而是Javascript实现的功能

你可以搜索一下：Javascript input 光标处

来得到你想要的信息，比如：

selectedtext是System.Windows.Forms.TextBox的属性

是WinForm的东东

而你的这个TextBox是asp.net里的，不是一个东东

如果要在文本框中的任意字符间插入文字或图片，

可以用Substring，比如在123456的3和4之间插入aaa可以这样：

string a = TextBox3.Text;

a = a.Substring(0, 3) + "aaa" + a.Substring(3);

TextBox3.Text = a;

【web测试】界面测试（UI）

简称UI测试，测试功能模块界面上看到的所有元素（包括文字、控件等）颜色风格是否统一，布局是否合理、美观，符合用户习惯等等

核实用户与软件之间的交互，确保用户界面会通过测试对象的功能来为用户提供相应的访问或浏览功能

如：页面基调颜色刺眼；用户登入页面比较难于找到；文字中出现错别字；页面图片范围太广

缺陷影响：用户友好性、人性化、易操作性

进入一个页面测试，首先是检查title、页面排版、字段等，而不是马上进入文本框校验

（1）页面名称title是否正确

（2）文字格式统一性，字体属性是否正确

（3）元素大小是否合适，元素内容是否显示正确、易懂、友好

（4）排版是否整齐，界面元素是否对齐方式统一

（5）列表项显示字段是否齐全，列表项字段名称是否跟表单统一

（6）同一页面，是否出现字段名称相同、值取不同的问题。

（7）数据加载情况。

（1）文案：字体、字号、格式、规范（标题和正文、中英文换行、错别字、大小写、全半角标点）；

（2）图片：类型、大小、尺寸、是否变形；

（3）布局：尺寸大小、位置合理、排序规律、对齐方式

（4）控件：对话框、文本框、滑动滚轮、上下微调按钮、选项按钮

（5）快捷键：是否重复、如何切换、是否冲突、和系统常用快捷键冲突、和其他软件快捷键冲突、常用键盘键

使用jQuery UI库开发Web界面的简单入门指引

一．jQuery

UI

jQuery

UI

是以jQuery

为基础的开源JavaScript

网页用户界面代码库。包

含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很

好交互性的web

应用程序。

jQuery

UI

的官网网站为：

jquery-ui-x.xx.x.custom.zip

。里面目录结构如下：

1.css，包含与jQuery

UI

相关的CSS

文件；

2.js，包含jQuery

UI

相关的JavaScript

文件；

3.Development-bundle，包含多个不同的子目录：demos(jQuery

UI

示例文件)、docs(jQuery

UI

的文档文件)、themes(CSS

主题文件)和ui(jQuery

ui

的JavaScript

文件)。

4.Index.html，可以查看jQuery

UI

功能的索引页。

二．CSS

主题

CSS

主题就是jQuery

UI

的皮肤，有各种色调的模版提供使用。对于程序员，可以使用

最和网站符合的模版；对于美工，也提供了没有任何样式的模版基于设计。

可以在这里：

查看已有模版样式。

三.

简单引入

由于jQuery

UI

不同组件的引入都有类似的特点和语法，所以这里只介绍两种组件

的引入方式，这样可以以此类推其他组件的引入方式。

button

按钮

//将button

按钮设置成UI

$('#button').button();

dialog

对话框

//将div

设置成dialog

对话框

$('#dialog

').click(function

()

{

$("#dialog

").dialog();

});

这样的形式，可以得知，jQuery

UI的引入都是这样的

组件名()

方法的形式引入。

关于web登录界面ui代码和web端UI的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。