简介大方的登录界面

最新推荐文章于 2023-06-15 10:18:09 发布
最新推荐文章于 2023-06-15 10:18:09 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： 登录界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40329367/article/details/80901170
版权

html 代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>欢迎您，请先登录</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/login.css" type="text/css">
</head>
<body>
<div class="all">
<div class="header">
    <img src="../images/login/logo.png" alt="">
</div>
<div class="main">
    <div class="bodys">
        <div class="core">
            <img src="../images/login/big.jpg" alt="">
        </div>
        <div class="right">
            <div class="box">
                <h2>登陆</h2>
                <form name="reg" action="" onSubmit="return docheck()">
                    <div class="input_box">
                        <span class="font-set">用户名：</span><input name="regist_username" type="text"  placeholder="请输入用户名"/>
                    </div>
                    <div class="input_box">
                        <span class="font-set">密&nbsp;&nbsp;&nbsp;码：</span><input name="regist_password" type="password"  placeholder="请输入密码">
                    </div>
                    <div class="input_box">
                        <input type="submit" class="btn-primary" value="登录"/>
                        <a href="regist.html"><input type="button" class="btn-primary"  value="注册"></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="../js/regist/regist.js"></script>
</body>

</html>

CSS代码：

@CHARSET "UTF-8";
*{
    margin: 0;
    padding: 0;
    font-family: 微软雅黑;
    font-size: 12px;
}
body{
    background-color: #f5f5f5;
}
.all{
    background-color: #f5f5f5;
}
.box{
    width: 390px;
    height: 430px;
    border: solid 1px #ddd;
    background: #f5f5f5;
    position: absolute;
    left: 50%;
    top:42%;
    margin-left: -195px;
    margin-top: -160px;
    text-align: center;
}
.box h2{
    font-weight: normal;
    color:#666;
    font-size: 16px;
    line-height: 40px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #ddd;
    background: #f7f7f7;
}
.input_box{
    width:350px;
    padding-bottom: 15px;
    margin: 0 auto;
    overflow: hidden;
}
.font-set{
    font-family: 微软雅黑;
    font-size: 12px;
    color: #0178a4;
}
.input_box input{
    padding:10px 25px 10px 10px;
    width:40%;
    border:1px solid #79acff;
    text-align:left;
    outline:none;
    font-size:12px;
    /*background:url(../images/person.png) no-repeat 440px 10px;*/
    margin-top:4%;
    font-weight: bold;
    font-family: 'Muli', sans-serif;
    /*-- W3Layouts --*/
    border-radius: 4px;
    color: rgba(101, 101, 101, 0.61);
}
.input_box input[type="submit"]{
    position: absolute;
    bottom: 70px;
    height: 44px;
    width: 67px;
    right: 150px;
    font-family: 微软雅黑;
    color: #656565;
}
.input_box input[type="button"]{
    position: absolute;
    bottom: 70px;
    height: 44px;
    width: 67px;
    right: 80px;
    font-family: 微软雅黑;
    color: #656565;
    font-weight: bold;
}
.header{
    height: 60px;
    width: 100%;
    background-color: #f5f5f5;
}
.header img{
    margin-left: 100px ;
    margin-top: 10px;
    width: 115px;
    height: 64px;
}
.main{
    margin-top: 30px;
    float: left;
    height: 470px;
    width: 100%;
    background-color: #fd7a72;
}
.footer{
    float: left;
    height: 125px;
    width: 100%;
}
.bodys{
    position: relative;
    width: 974px;
    height: 445px;
    margin-left: 187px;
    margin-top: 0px;
}
.core{
    height: 416.5px;
    width: 572px;
    background-color: #f7f7f7;
    margin-left: 0px;
    margin-top: 0px;
}
.right{
    position: absolute;
    width: 390px;
    height: 420px;
    /*background-color: #f79926;*/
    top:1px;
    right: 1px;
}


张十一
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于登录界面与登录的知识介绍
weixin_44543271的博客
05-15 4428
今天我给大家讲一下登录，下图是我弄的一个登录页面，还有一点没有弄完成，但是并不影响我接下来讲解的内容。登录其实比较简单。平常大家也经常登录各种APP平台。主要就是账号和密码验证码的输入。 登录页面图如下。 登录界面代码借鉴搭档的： 登录页面设计：就是个个标签之间的相互作用与配合了；下面是我设计这个页面的部分代码，至于CSS的样式调试我就不截图给大家看了，因为没什么可看。 首先看上面的图；大家可...
简洁大方的登录界面
09-02
是一个登录界面，类似facebook 的蓝白css样式 ，文件格式为 html+css+js 望大家下载时候看清格式，别下载错了。
登录页面讲解
weixin_57727548的博客
03-08 1005
在很多网站和软件都会用到登录，所有今天就来讲一下登录。 生成验证码 在控制器中定义一个方法 首先声明一个字符串，可以直接赋值为固定的字符串，也可以生成一个随机字符串 例如：string strRandom = "abc"; string strRandom = ValidCodeUtils.GetRandomCode(3); 随机生成一个3位数的字符串 注：ValidCodeUtils.GetRandomCode和CreateImage自己定义的方法 方法详情已经在上一篇详细讲解了
简单大方的登陆页面
05-31
简单大方的登陆页面,包括flash动画，很简洁，很美观，
简介登录页面
12-20
非常简单实用又好看的登录页面，拓展性强，是从biweb网站系统提取出来的，没有多余的css
易语言登陆界面
08-21
易语言登陆界面源码系统结构:WindowLogin_鼠标事件,WindowLogin_载入数据,WindowLogin_方法调用事件, ======窗口程序集1 || ||------__启动窗口_创建完毕 || ||------WindowLogin_鼠标事件 || ||------WindowLog
linux redhat 登陆界面切换
09-16
"Linux RedHat 登陆界面切换" Linux RedHat 登陆界面切换是指在 Linux RedHat 操作系统中切换登陆界面的方法。在 RedHat 操作系统中，默认的登陆界面是文字界面，但是如果用户想要切换到图形界面，可以使用特殊的...
登陆界面.zipq111111111111
06-12
登陆界面.zip
一款简易好看的登陆界面
12-17
运用html+css实现简易好看的登陆界面，适合零基础的web学习人员
MFC的登陆界面
01-25
MFC的登陆界面MFC的登陆界面MFC的登陆界面MFC的登陆界面
简洁大气的登录页面----
01-16
简洁大方的html登录页面，花钱买的, 复制可以直接使用运行。简洁大方的html登录页面，花钱买的, 复制可以直接使用运行
漂亮大气注册登录页面模板.zip
04-03
简单大方的登录界面注册页面，可以直接使用，方便快捷，美观，大气，绝对值得拥有。可以自己添加内容。页面内容齐全
Java Web——初学者用户界面登录（2_10_5)
Dcwjh的博客
09-11 976
用户登录案例需求： 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表 3.使用JdbcTemplate技术封装JDBC 4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您 5.登录失败跳转到FailServlet展示：登录失败，用户名或密码错...
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 3万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
HTML登录界面的实现
热门推荐
有需要下载东西的可以私聊我
03-30 6万+
实现这个界面非常简单，以前就学过静态网页的开发，虽然学的不精，但还是懂一些的。 这次主要是实现对用户名，密码的验证，即验证用户名和密码是否为空，没什么说的，直接看代码吧 用户登录 function loginClick() { var name=document.login.username.value; var pwd=document.login.passwo
一个很好登录页面说明
morningsun19的博客
06-26 1926
一个简单美观的前端登录界面
u012947276的博客
01-18 6万+
在 webRoot目录下创建css文件夹 直接引入  style.css文件：body{    background: url("../img/1.jpg");    animation-name:myfirst;    animation-duration:12s;    /*变换时间*/    animation-delay:2s;    /*动画开始时间*/    animation-ite
一个简单大气的登陆（login)界面源码介绍学习
小狼驿站
12-21 9173
首先上页面截图： 然后贴段代码： Welcome 敲门 主要是标签中，placeholder属性的应用。以及css文件中对样式的设计，大家可以学习一下！！ 源码下载链接：源码下载链接 源码下载链接：http://download.csdn.net/detail/tangxiaolang101/9369998
C#读取WinCC实时和归档数据
最新发布
06-21
如何在 C#应用程序中读取 WinCC 变量归档数据，资源来自西门子官网
python游戏登陆界面
04-14
以下是一个简单的Python游戏登陆界面的示例： ```python def login(): username = input("请输入用户名：") password = input("请输入密码：") # 在这里可以添加验证用户名和密码的逻辑 # ... if username =...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值