html+css 漂亮的登陆界面

最新推荐文章于 2024-03-12 11:37:27 发布
最新推荐文章于 2024-03-12 11:37:27 发布
阅读量3.3w 收藏 63
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuefengqing/article/details/51815963
版权
html 同时被 2 个专栏收录
37 篇文章 1 订阅
订阅专栏
css
7 篇文章 0 订阅
订阅专栏

Login.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
    <div class="header">Login to <span>iyaq</span></div>
    <form action="" method="post">
        <ul>
            <li>
                <div class="text">
                    <span class="yonghu"></span><input type="text" placeholder="请输入用户名">
                </div>
            </li>
            <li>
                <div class="password">
                    <span class="mima"></span><input type="password" placeholder="请输入密码">
                </div>
            </li>
            <li class="remember">
                <input type="checkbox">记住我
            </li>
            <li>
                <a href="">忘记我</a>
            </li>
            <li>
                <input type="button" value="登陆">
            </li>
        </ul>
    </form>
    <div class="footer">
        <p>iyaq Personal Blog  <a href="">Copyright ©2012 Wang Yuyan</a></p>
        <p><a href="">iiyaq Home</a> | <a href="">Bolg
        </a> | <a href="">Work</a> | <a href="">Terms of Use</a> | <a href="">Contact Me</a></p>
    </div>
</div>
</body>
</html>

style.css

@font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/font_1463147324_946932.eot'); /* IE9*/
    src: url('//at.alicdn.com/t/font_1463147324_946932.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('http://at.alicdn.com/t/font_1463147324_946932.woff') format('woff'), /* chrome、firefox */
    url('http://at.alicdn.com/t/font_1463147324_946932.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('//at.alicdn.com/t/font_1463147324_946932.svg#iconfont') format('svg'); /* iOS 4.1- */
}

*{margin: 0;padding: 0}
li{list-style: none;}
form a{text-decoration: none;}
html,body {
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}
.wrapper{text-align: center;}
.header{
    font-size: 25px;
    font-family: 微软雅黑;
    color: rgb(98,94,91);
}
.header span{
    font-size: 30px;
    font-family: "Brush Script Std";
}
form{
    background: url(input-bg.png);
    width: 260px;
    height: 260px;
    margin: 35px auto;
    padding: 30px;
    box-shadow:0px 1px 2px 1px #aaaaaa,
    inset 0px 1px 1px rgba(255,255,255,0.7);
    border-radius: 3px;
}
form ul{
    width: 100%;
    height: 100%;
    text-align: left;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
ul li div{
    width: 260px;
    height: 40px;
    background: #e1dcd8;
    color: rgb(98,94,91);
    box-shadow: inset 0px 2px 5px #aaaaaa;
    border-radius: 5px;
    position: relative;
}
ul li .yonghu{
    font-family: iconfont;
    position: absolute;
    top: 12px;
    left: 10px;
}
ul li .mima{
    font-family: iconfont;
    position: absolute;
    top: 12px;
    left: 10px;
}
ul li div input{
    height: 40px;
    width: 190px;
    padding: 0 35px;
    border: none;
    background: #e1dcd8;
    color: rgb(98,94,91);
    box-shadow:
            0px 1px 1px rgba(255,255,255,0.7),
            inset 0px 2px 5px #aaaaaa;
    border-radius: 5px;
}
ul li input:focus{
    outline: none;
    background: #f5f2ef;
}
ul .remember{
    font-size: 14px;
    font-family: 微软雅黑;
    font-weight: bold;
    color: rgb(98,94,91);
    position: relative;
    display: flex;
    justify-content: center;
}
ul .remember input[type*="checkbox"]{
    width: 20px;
    height: 20px;
    vertical-align: super;
    margin-right: 12px;
}
.remember label {
    cursor: pointer;
    position: absolute;
    width: 22px;
    height: 22px;
    top: 7px;
    left: 0;
    background: #eee;
    border:1px solid #cccccc;
    border-radius: 4px;

}
/*Display the tick inside the checkbox*/
.remember label:after {
    opacity: 0.4;
    content: '';
    position: absolute;
    width: 12px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 4px;
    border: 3px solid #74884a;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/*Create the hover event of the tick*/
.remember label:hover::after {
    opacity: 0.7;
}
/*Create the checkbox state for the tick*/
.remember input[type=checkbox]:checked + label:after {
    opacity: 1;
    border-color: #74884a;
}
ul li a{
    font-size: 14px;
    font-family: 黑体;
    color: rgb(152,142,135);
    display: flex;
    justify-content: center;
}
ul li input[type*="button"]{
    width: 100%;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
    background: -moz-linear-gradient(
            top,
            #94aa64 0%,
            #7a924a 50%,
            #607738);
    background: -webkit-gradient(
            linear, left top, left bottom,
            from(#94aa64),
            color-stop(0.50, #7a924a),
            to(#607738));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #7d8862;
    -moz-box-shadow:
            0px 1px 0px rgba(170,170,170,1),
            inset 0px 1px 1px rgba(255,255,255,0.7);
    -webkit-box-shadow:
            0px 1px 0px rgba(170,170,170,1),
            inset 0px 1px 1px rgba(255,255,255,0.7);
    box-shadow:
            0px 1px 0px rgba(170,170,170,1),
            inset 0px 1px 1px rgba(255,255,255,0.7);
    text-shadow:
            0px -1px 0px rgba(000,000,000,0.3),
            0px 0px 0px rgba(255,255,255,0);
}
ul li input[type*="button"]:hover{
    opacity: 0.8;
}
ul li input[type*="button"]:active{
    width: 100%;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
    background: -moz-linear-gradient(
            top,
            #607738 0%,
            #7a924a 50%,
            #94aa64 );
    background: -webkit-gradient(
            linear, left top, left bottom,
            from(#607738),
            color-stop(0.50, #7a924a),
            to(#94aa64));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #7d8862;
    -moz-box-shadow:
            0px -1px 0px rgba(170,170,170,1),
            inset 0px -1px 1px rgba(255,255,255,0.7);
    -webkit-box-shadow:
            0px -1px 0px rgba(170,170,170,1),
            inset 0px -1px 1px rgba(255,255,255,0.7);
    box-shadow:
            0px -1px 0px rgba(170,170,170,1),
            inset 0px -1px 1px rgba(255,255,255,0.7);
    text-shadow:
            0px 1px 0px rgba(000,000,000,0.3),
            0px 0px 0px rgba(255,255,255,0);
}
.footer{
    font-size: 12px;
    font-family: 黑体;
    color: rgb(98,94,91);
}
.footer a{
    color: rgb(152,142,135);
}

 

 

 

效果图：

lengyuefengqing
关注
  • 2
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+css的用户登录界面
qq_45988058的博客
05-28 1471
HTML是常用的前端语言，前端语言的更新大概18个月为一个周期，这是我自己做的登录页面。 <html> <head> <meta charset="utf-8"> <title>登录注册页</title> <style> body{ margin: 0;/**/ } /*CSS样式*/ .box{
非常好好看的几个登录页面（html，css）
12-09
非常好好看的几个登录页面（html，css）
login.html
03-31
HTML/html5/H5 登陆注册后台前端界面,纯代码和CSS样式， 欢迎大家下载与分享交流， 好看的后台界面，大家好好学习。
一款简易好看的登陆界面
12-17
运用html+css实现简易好看的登陆界面，适合零基础的web学习人员
前端之用html做一个用户登陆界面
最新发布
banliyaoguai的博客
03-12 1238
【代码】前端之用html做一个用户登陆界面。
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
叶绿体不忘呼吸
12-30 5581
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码，拿来即可用。
用html+css制作简单好看的登陆注册界面
小袁同学的博客
07-19 5万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
基于 HTML5/CSS3 制作漂亮的登录页面
老T的专栏
09-29 7772
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5是互联网的下一代标准，被认为是互联网的核心技术之一。CSS3是CSS（层叠样式表）技术的升级版本，CSS3原CSS基础上新增了很多新特征。
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 2万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
5个炫酷登录页面，拿去就能用（附源码）
王春燕的博客
04-27 8万+
登录页面，觉得显示效果很好，借鉴其他博主的，喜欢的可以收藏关注，不商用，只为学习传播 目录 1、炫酷星空登录 2、动态云层登录 3、深海灯光水母登录 4、炫酷蛛网登录 5、彩色气泡登录 1、炫酷星空登录 代码： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title...
html+css唯美登录页面，代码提供（效果展示）
languageStudent的博客
03-20 6万+
效果图 所有代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
炫酷登录界面（html+css）
weixin_52831324的博客
11-24 1889
炫酷登录界面（html+css）
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
星空登陆界面html+CSS框架
11-13
星空登陆界面html+CSS框架
HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！
weixin_65251013的博客
01-30 3087
需要代码的小伙伴可以在评论区拿哦！！！
【html+css】炫酷登录页面
ZHAOYANGLloveyou的博客
06-15 581
html+css炫酷登录页面
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 24万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
用HTML+CSS构建一个绚丽的登录页面
jakelihua
12-25 1038
自动切换背景，登录页面，水滴效果，绚丽的登录页面
html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
01-19 1099
今天花了几个小时的时间整理了一些响应式网站模板，代码下载方式放在了文章末尾，有什么问题可以私信我或者评论区留言。
html css 漂亮的登陆界面
06-10
好的，我可以为您提供一些 HTML 和 CSS 代码来创建漂亮的登录界面。以下是一个简单的示例： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>Login Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-box"> <h2>Login Here</h2> <form> <div class="user-box"> <input type="text" name="" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="" required=""> <label>Password</label> </div> <a href="#"> <span></span> <span></span> <span></span> <span></span> Submit </a> </form> </div> </body> </html> ``` CSS 代码： ``` body { margin: 0; padding: 0; font-family: sans-serif; background: linear-gradient(to right, #00C9FF, #92FE9D); } .login-box { width: 320px; height: 420px; background: #000; color: #fff; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; padding: 70px 30px; } h2 { margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px; } .user-box { position: relative; } .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .user-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: 0.5s; } .user-box input:focus ~ label, .user-box input:valid ~ label { top: -20px; left: 0; color: #00bcd4; font-size: 12px; } a { text-decoration: none; display: inline-block; background: #00bcd4; color: #fff; padding: 10px 20px; margin-top: 40px; border-radius: 30px; transition: 0.5s; } a:hover { background: #fff; color: #00bcd4; } ``` 该代码将创建一个黑色背景的登录框，其中包括一个标题、“用户名”和“密码”输入框以及一个提交按钮。您可以根据需要进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值