HTML+CSS+Asp.net 打造高大上UI

一时失言乱红尘 2022-08-19 11:08 142阅读 0赞

这次做的系统用的都是之前学过的内容，html，css，asp。做完一个可以上线的系统挺简单的，也没什么挑战性。我比较喜欢新颖的内容，我就找到了一个好看的动态UIdemo，给我们的调查问卷系统增色。下面是代码和实现效果，有兴趣的可以研究研究~

#       效果展示： #

![SouthEast][]

#       代码展示： #

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;
    }

ASP前台：

<!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.不论项目的大小，是不是开发，都可以获得锻炼

[SouthEast]: /images/20220731/33ae69d953e543fa8046a158a3166ee7.png