ASP.NET学习心得四:结合CSS做一个简单的html登入页面

登入页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="We_Div.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登入界面</title>
    <link href="../frmModifyPwd.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <h1>E-boy网咖</h1>
        <div class="textbox">
            <i class="fa fa-user" aria-hidden="true"></i>
            <input type="text" placeholder="请输入用户名" name="username"/>
        </div>
        <div class="textbox">
            <i class="fa fa-lock" aria-hidden="true"></i>
            <input type="password" placeholder="请输入密码" name="password" />
        </div>
        <input class="btn" type="button" value="登录" runat="server" />
    </form>
</body>
</html>

CSS文件
里面不懂的可以查看https://www.runoob.com/css/css-boxmodel.html

@import"https://cdn.bootcss.com/font-awesome/5.8.2/css/all.css";

/*主体部分样式,body元素包含文档的所有内容*/
body 
{
    width:500px;
    margin: auto; /* 外边框元素区域,没有背景颜色,是完全透明的https://www.runoob.com/css/css-margin.html */
    padding: 0; /*  定义元素边宽和元素内容之间的空间 */
    font-family: Georgia; /* 规定元素的字体系列  */
    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561611916356&di=a80b01f66d57237932a268463496778f&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-16%2F5a5dc3f3588b6.jpg) no-repeat;
    background-size: cover; /*规定背景图像的尺寸*/
    background-color:white;
    text-align: center;/*字体居中*/
}

/*登录盒子样式*/
.login-box 
{
    width: 280px;
    position: center;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
}

    /*E-boy网咖字体样式*/
    .login-box h1 
    {
        float: left;
        font-size: 40px;
        border-bottom: 6px solid #4caf50;
        margin-bottom: 50px;
        padding: 13px 0;
       
    }

.textbox
{
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #4caf50;
}

    /*图标样式*/
    .textbox i 
    {
        width: 26px;
        float: left;
        text-align: center;
    }

    /*表单文本框样式*/
    .textbox input 
    {
        border: none;
        outline: none;
        background: none;
        color: white;
        font-size: 18px;
        width: 80%;
        float: left;
        margin: 0 10px;
    }

/*表单登录按钮样式*/
.btn 
{
    width: 100%;
    background: none;
    border: 2px solid #4caf50;
    color: white;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
    margin: 12px 0;
}

转载博客ASP.NET——分享一个HTML+CSS写的漂亮的登录界面(代码相当全)做了一些修改

你可能感兴趣的:(ASP.NET)