HTML+CSS+Asp.net 打造高大上UI
这次做的系统用的都是之前学过的内容，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;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewLogin.aspx.cs" Inherits="WEB.NewLogin" %>
思政课调查问卷
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", "");
// return;
// }
//}
//catch (Exception exception)
//{
// Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "");
// 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", "");
}
}
}
}总结：
1.旧的东西也可以做出新的花样，只要你敢想
2.不是维护就等于没事干，维护也是需要用心的
3.不论项目的大小，是不是开发，都可以获得锻炼