HTML+CSS+Asp.Netは高大なUIを作ります
今回作ったシステムはすべて前に学んだ内容で、html、css、aspです.オンラインできるシステムを作るのは簡単で、挑戦性もありません.私は比較的に斬新な内容が好きで、私は1つの美しい動態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;
}
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.プロジェクトの大きさにかかわらず、開発するかどうかにかかわらず、トレーニングを受けることができる
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>");
}
}
}
}