HTML+CSS+Asp.net 打造高大上UI
来源：互联网 发布：怎么看淘宝信誉值 编辑：程序博客网 时间：2024/06/17 09:12
这次做的系统用的都是之前学过的内容，html，css，asp。做完一个可以上线的系统挺简单的，也没什么挑战性。我比较喜欢新颖的内容，我就找到了一个好看的动态UIdemo，给我们的调查问卷系统增色。下面是代码和实现效果，有兴趣的可以研究研究~
效果展示：
代码展示：
CSS
body{margin: 0;padding: 0;background: #214D90 url(../images/bg.gif) repeat-x;color: #999999;font-family: Tahoma,Verdana;}.Main{width: 960px;margin: 150px auto 0 auto;}/*cloud*/#mainBody {width:100%;height:100%;position:absolute;z-index:-1;}.cloud {position:absolute;top:20px;left:50px;width:100%;height:100%;background:url(../images/cloud.png) no-repeat;z-index:1;opacity:0.5;}#cloud2 {z-index:2;}.login_input{width:940px; height:420px; background:url(../images/login.png) no-repeat; margin-top:20px;}.input_login{position:absolute; margin-left:350px; margin-top:60px; width:260px;}/*input*/input[type="username"],input[type="password"],input[type="captcha"]{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: -webkit-calc(3em + 2px); height: calc(3em + 2px); margin: 0 0 1em; padding: 1em; border: 1px solid #cccccc; border-radius: 1.5em; background: #fff; resize: none; outline: none;}input[type="password"],input[type="captcha"]{ margin-top:-15px;}input[type="username"][required]:focus ,input[type="password"][required]:focus,input[type="captcha"][required]:focus{ border-color: #00bafa;}/*username*/input[type="username"][required]:focus + label[placeholder]:before { color: #00bafa;}input[type="username"][required]:focus + label[placeholder]:before,input[type="username"][required]:valid + label[placeholder]:before { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9); -ms-transform: translate(0, -1.5em) scale(0.9, 0.9); transform: translate(0, -1.5em) scale(0.9, 0.9);}input[type="username"][required]:invalid + label[placeholder][alt]:before { content: attr(alt);}input[type="username"][required] + label[placeholder] { display: block; pointer-events: none; line-height: 2.3em; margin-top: -webkit-calc(-3em - 2px); margin-top: calc(-3em - 2px); margin-bottom: -webkit-calc((3em - 1em) + 2px); margin-bottom: calc((3em - 1em) + 2px);}input[type="username"][required] + label[placeholder]:before { content: attr(placeholder); display: inline-block; margin: 0 -webkit-calc(1em + 2px); margin: 0 calc(1em + 2px); padding: 0 2px; color: #898989; white-space: nowrap; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: linear-gradient(to bottom, #ffffff, #ffffff); -webkit-background-size: 100% 5px; background-size: 100% 5px; background-repeat: no-repeat; background-position: center;}/*password*/input[type="passwordt"][required]:focus + label[placeholder]:before { color: #00bafa;}input[type="password"][required]:focus + label[placeholder]:before,input[type="password"][required]:valid + label[placeholder]:before { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9); -ms-transform: translate(0, -1.5em) scale(0.9, 0.9); transform: translate(0, -1.5em) scale(0.9, 0.9);}input[type="password"][required]:invalid + label[placeholder][alt]:before { content: attr(alt);}input[type="password"][required] + label[placeholder] { display: block; pointer-events: none; line-height: 2.3em; margin-top: -webkit-calc(-3em - 2px); margin-top: calc(-3em - 2px); margin-bottom: -webkit-calc((3em - 1em) + 2px); margin-bottom: calc((3em - 1em) + 2px);}input[type="password"][required] + label[placeholder]:before { content: attr(placeholder); display: inline-block; margin: 0 -webkit-calc(1em + 2px); margin: 0 calc(1em + 2px); padding: 0 2px; color: #898989; white-space: nowrap; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: linear-gradient(to bottom, #ffffff, #ffffff); -webkit-background-size: 100% 5px; background-size: 100% 5px; background-repeat: no-repeat; background-position: center;}/*captcha*/input[type="captcha"][required]:focus + label[placeholder]:before { color: #00bafa;}input[type="captcha"][required]:focus + label[placeholder]:before,input[type="captcha"][required]:valid + label[placeholder]:before { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9); -ms-transform: translate(0, -1.5em) scale(0.9, 0.9); transform: translate(0, -1.5em) scale(0.9, 0.9);}input[type="captcha"][required]:invalid + label[placeholder][alt]:before { content: attr(alt);}input[type="captcha"][required] + label[placeholder] { display: block; pointer-events: none; line-height: 2.3em; margin-top: -webkit-calc(-3em - 2px); margin-top: calc(-3em - 2px); margin-bottom: -webkit-calc((3em - 1em) + 2px); margin-bottom: calc((3em - 1em) + 2px);}input[type="captcha"][required] + label[placeholder]:before { content: attr(placeholder); display: inline-block; margin: 0 -webkit-calc(1em + 2px); margin: 0 calc(1em + 2px); padding: 0 2px; color: #898989; white-space: nowrap; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: linear-gradient(to bottom, #ffffff, #ffffff); -webkit-background-size: 100% 5px; background-size: 100% 5px; background-repeat: no-repeat; background-position: center;}.captimg{position:absolute; margin:-73px 5px 1px; width:111px; height:36px;}.submit{ position:relative; margin:20px 0 0 145px;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewLogin.aspx.cs" Inherits="WEB.NewLogin" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>思政课调查问卷</title> <link href="css/alogin.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> if (window != top) top.location.href = location.href; //function changeCode() { // var imgNode = document.getElementById("vimg"); // imgNode.src = "handler/WaterMark.ashx?t=" + (new Date()).valueOf(); // // 这里加个时间的参数是为了防止浏览器缓存的问题 //} //检查登录的前提条件 function CheckLogin() { //var txtStudentCode = document.getElementById("txtStudentCode"); //用户名 //var txtUserPassword = document.getElementById("txtUserPassword"); //密码 var txtStudentCode = document.getElementById("txtStudentCode").value; //用户名 var txtUserPassword = document.getElementById("txtUserPassword").value; //密码 if (txtStudentCode.value == "") { alert("请输入学号!"); txtStudentCode.focus(); return false; } if (txtUserPassword.value == "") { alert("请输入密码!"); txtUserPassword.focus(); return false; } return true; } //响应回车事件 function KeyDown() { //判断是否为回车，响应按钮点击，否则返回false if (event.keyCode == 13) { document.getElementById("<%= btnLogin.ClientID%>").click(); } return false; } </script></head><body style="background-color:#04090d; background-image:url(images/login_bg01.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;"> <div id="mainBody"> <div id="cloud1" class="cloud"></div> <div id="cloud2" class="cloud"></div> </div> <div class="Main"> <div class="login_input"> <div class="input_login"> <form id="form" runat="server"> <input id="txtStudentCode" required='' type='username' name="username"> <label alt='请输入您的用户名' placeholder='Username'></label> <input id="txtUserPassword" required='' type='password' name="password"> <label alt='请输入您的密码' placeholder='Password'></label> <asp:Button ID="btnLogin" runat="server" style="background-image: url('/images/btnlogin.gif');" OnClientClick="javascript:return CheckLogin();" OnClick ="btnLogin_Click" Height="40px" Width="108px" /> </form></div> </div> </div> </body></html>ASP后台：
/******************************************************************************* *文 件：NewLogin.aspx.cs *作 者：周洲 *所属小组：评教小组 *文件说明：学生登陆界面 *创建日期：2016年1月1日19:33:16 *修改作者： *修改日期： *修改描述： *版 本 号：V1.0 *版本号变更记录： ********************************************************************************/using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data;using BLL;using Entity;namespace WEB{ public partial class NewLogin : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnLogin_Click(object sender, EventArgs e) { //try //{ // //判断验证码输入是否正确 // string code = txtSN.Text.Trim().ToUpper(); // string rightcode = Session["Code"].ToString(); // if (code != rightcode) // { // Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('请输入正确的验证码！');</script>"); // return; // } //} //catch (Exception exception) //{ // Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('请关闭浏览器，重新登录！');</script>"); // return; //} // string studentCode = txtStudentCode.Text.Trim();//学号 //string pwd = txtUserPassword.Text.Trim();//密码 string studentCode = Request.Form["username"]; string pwd = Request.Form["password"]; //新建学生实体类对象 StudentEntity enStudent = new StudentEntity(); //填充学生实体类对象 enStudent.StudentCode = studentCode; enStudent.Password = pwd; try { //新建B层对象 StudentBLL studentManager = new StudentBLL(); //获取用户信息 DataTable dtStudent = studentManager.QueryStudentInfoByIDAndPassword(enStudent); string studentName;//学生姓名 studentName = dtStudent.Rows[0]["StudentName"].ToString().Trim(); Session["StudentID"] = dtStudent.Rows[0]["StudentID"].ToString().Trim(); Session["StudentCode"] = studentCode; Session["StudentName"] = studentName;//学生姓名 //转向首页 Response.Redirect("EvaluateSystemStudentFrame.aspx"); } catch (Exception ex) { Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('" + ex.Message + "');</script>"); } } }}总结：
1.旧的东西也可以做出新的花样，只要你敢想
2.不是维护就等于没事干，维护也是需要用心的
3.不论项目的大小，是不是开发，都可以获得锻炼
4 0
- HTML+CSS+Asp.net 打造高大上UI
- 打造高大上的Canvas粒子动画
- 打造高大上的Canvas粒子动画
- asp.net MVC学习手记2：Spring.Net部分高大上
- 用Ueditor为Asp.net mvc打造可视化HTML编辑器
- Asp.net、Html、Css之间的关系
- 高大上
- UI设计之“Banner”高大上的花边设计
- animate.css高大上的CSS3动画库
- Asp.net中如何过滤html,js,css代码
- 在Asp.net中过滤html,javascript,css样式代码
- Asp.net中如何过滤html,js,css代码
- HTML / CSS 、JavaScript 、Seriver Side 、 ASP.NET 、XML 。。。
- HTML、CSS、JS打造Windows桌面版《2048》
- 纯css打造漂亮的html表格
- 【传智播客郑州校区分享】来聊聊UI里面哪些颜色看起来高大上
- 技巧和诀窍：使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- 使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- eclipse创建配置struts项目时遇到的ClassNotFoundException问题解决方案
- 好用的编码工具Sublime_安装install package以及格式化代码
- Javaweb学习总结（二）：JSP的指令元素
- Floyd算法正确性
- C#软件加序列号激活、试用期限
- HTML+CSS+Asp.net 打造高大上UI
- 由《英雄联盟》引发的思考
- vs2013 配置是的问题 windows7
- 【慕课笔记】第三章 常用的运算符 第3节 JAVA中的赋值运算符
- CSS权威指南学习笔记（1）
- 第一章 词法陷阱
- hibernate one-to-many关联查询<set>中使用filter
- cocoapods的安装与使用自己经验教程
- SAP-ABAP之bdc技术call f-65
