div+css3纯手工制作登录页

最新推荐文章于 2023-03-28 16:24:21 发布
原创 最新推荐文章于 2023-03-28 16:24:21 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #html5

本文分享了如何手工创建一个登录页面，并详细展示了HTML和CSS代码实现过程，包括页面布局、输入框样式和自定义动画效果。通过实例演示，帮助开发者掌握基本的网页设计技巧。

上午闲的没事干，手工制作了个登录，看图



重点是这个地方的制作！

好吧！第一次在这里编辑，不太顺手！不多说，上代码，页面部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>

</head>
<body>
<div class="login">
    <div class="name">
    <div class="nameLeft">
        <div style=" width:100%; height:40%;">
                <div class="nameLeftTop" ></div>
            </div>
            <div style=" width:100%; height:60%;">
            <div class="nameLeftBoot"></div>
            </div>
        </div>
        <input type="text" value="用户名" style="color:#CCCCCC"/>
    </div>
    <div class="pwd">
    <div class="pwdLeft">
        <div style=" width:100%; height:40%;">
                <div class="pwdLeftTop" ></div>
            </div>
            <div style=" width:100%; height:60%;">
            <div class="pwdLeftBoot"></div>
            </div>
        </div>
    <input type="password" value="123456"></input>
    </div>
</div>
</body>
</html>

css部分

<style type="text/css">
.login{width:300px;height:200px;
border:1px solid #CCCCFF;
margin:200px auto;
}
.name,.pwd{width:200px;height:28px; border:1px solid #FF6633;
margin:20px auto;
}
.nameLeft,.pwdLeft{ width:30px; height:100%;float:left;
 background:#FF6633;
}
.name input,.pwd input{width:164px; height:26px; float:left; border-style:none; line-height:26px; padding-left:4px}
*:focus { outline: none; }


.pwdLeftTop{width:10px; height:8px; background:#FFFFFF;border-radius:4px 4px 2px 2px; margin:2px auto; z-index:1}
.pwdLeftTop:before{
width:6px;height:6px;
margin:2px 2px;
background:#FF6633;
border-radius:3px 3px 0px 0px;
z-index: 2;
  position: absolute;
  content: "";
   }
.pwdLeftBoot{width:16px; height:14px; background:#FFFFFF; margin:-2px auto;border-radius:1px 1px 6px 6px ;}
.pwdLeftBoot:before{
z-index: 2;
  position: absolute;
  content: "";
width:4px; height:4px;
border-radius:2px;
background:#FF6633;
margin:2px 6px;
}
.pwdLeftBoot:after{
z-index: 2;
  position: absolute;
  content: "";
width:2px; height:4px;
border-radius:2px;
background:#FF6633;
margin:6px 7px;
}
.nameLeftTop{width:8px; height:8px; background:#FFFFFF;margin:3px auto; border-radius:5px}
.nameLeftBoot{width:16px; height:12px; background:#FFFFFF;margin:-1px auto; border-radius:14px 14px 1px 1px}
</style>


新人制作，写错的地方还请大牛指出！



html+css+javascript 大数据科技登录界面模板html
qq_365392777
08-19 8329
大数据科技登录界面模板html 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：蓝色科技风格后台登录框，科幻的网站后台系统登录界面模板下载, 文章页支持手机PC响应式布局。 2.网页作品编辑方面：此作品为登录页面设计题材，HTML+CS...
DIV+CSS纸张效果博客模板
10-24
DIV+CSS纸张效果博客模板 DIV+CSS纸张效果博客模板 DIV+CSS纸张效果博客模板
使用CSS3制作首页登录界面实例
weixin_30610755的博客
05-28 339
响应式设计 在这个页面中,使用下面3点来完成响应式设计 1、最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容.； 2、margin : 30px auto; 使其保持时刻居中； 3、输入用户名，密码时需要将元素上移20px，使其为触发状态，并使字体缩小4px； 4、内容主色调采用#18B4ED； DEMO页面Html： <div class="c...
css3+js制作漂亮动态登录界面设计
01-20
css3+js制作漂亮动态登录界面设计 直接可以下载使用
HTML5+CSS3精美登陆界面
03-02
从国外下载的20个左右的精美登陆界面，供大家参考。歪果仁真的好有创意~~我只是搬运工，不收费~~没有一一试过，可能会有些问题~大家可以去https://www.freshdesignweb.com/css-login-form-templates自行查看哦~~那里面的资源有些没下过来~~sorry~
HTML5和CSS3登录页面制作实录
精彩人生
02-11 877
本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程。 View demo login.html Log In Forgot your password?Register
用div+css做个小企业的门户网站,哎.
海阔天空的专栏(web前端+LAMP)
03-05 1158
我应该掌握了这个了吧?http://www.cn-fuwa.net/yjjq宇晶机器http://www.cn-fuwa.net/cst01西思特电梯还有一个,没有上传,天一香茶叶.哎,用这些技术做网站,权当练手吧,无事找事吧.在各个主流浏览器上不断测试,什么IE,FF,Opera 就连IE6.0和IE7.0,有时也会出现偏差哟.提成也不高,哈哈,刚学嘛.希
Div+CSS静态页面生成工具支持多格式网页制作
这种跨平台、多格式支持的能力极大提升了开发效率，尤其适用于需要频繁制作企业官网、产品展示页、营销落地页等标准化页面的场景。 从技术实现角度来看，这类工具通常内置了智能图像识别算法，能分析源设计图的图层...
采用html+div+css+js技术 纯手写的一个网站前台
11-26
在IT行业中，构建网站前端是至关重要的步骤，它关乎到用户体验和交互效果。...开发者通过纯手工编写这些代码，展现了扎实的Web前端技能。在实际工作中，熟练掌握这四者并灵活运用，是成为一名优秀前端开发者的关键。
27款基于DIV+CSS的后台管理页面设计源码
这27款页面正是通过纯手工编写HTML标签与CSS样式，展示了如何不依赖任何JavaScript框架或UI库来完成复杂的后台界面布局，包括侧边栏导航、顶部工具栏、数据表格展示区、统计图表区域、分页控件、模态弹窗等典型组件...
基于DIV+CSS的静态网站设计与实现
这种纯手工编码的方式有助于初学者深入理解HTML文档对象模型（DOM）的结构层次以及CSS选择器、盒模型、浮动（float）、定位（position）等核心概念的实际应用。 在项目文件结构方面，压缩包内仅包含一个名为“tldn...
div+css模仿登录界面
weixin_30319097的博客
06-02 210
我的代码，这种方式形成了遮罩层，遮罩层的"登录"按钮仍可被点击，非我想要的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遮罩画面</title> <script src="jquery-1.1...
HTML+CSS实现炫酷的登录界面
m0_46625346的博客
01-16 1万+
谢谢大家的支持，您的一键三连是 罡罡同学前进的最大动力！ 一键三连 一键三连 一键三连 一键三连 一键三连 一键三连 HTML+CSS实现炫酷的登录界面 上效果图！ 鼠标点击用户名或密码，字体会向上滑动，调节大小并高亮。 鼠标放到登录按钮上，按钮可以高亮！ 下面是HTML的代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta
初学css能做的实战 登录页面制作
m0_62200674的博客
07-14 1364
初学就能做，要求学到flex布局就可以，不包含任何动画
<div+css页面布局课堂笔记>7---登录和注册界面的实现
Fuego801的博客
03-27 1487
1.登录界面居中布局实现： 随浏览器大小，界面布局始终在中间。 Eg: #one { position:relative; top:50%; left:50%;  margin-left:-150px; margin-top:-100px; width:300px; height:200px; background:red; } 12
html+css实现登录界面
李宸净
03-28 3605
【代码】html+css实现登录界面。
【前端学习】HTML + CSS 写一个登陆界面
Liaojiajia-Blog
03-03 4203
HTML + CSS 写一个登陆界面1. index.html2. style.css3. iconfont.css4. 界面效果 1. index.html <!-- * @Author: your name * @Date: 2021-03-04 16:27:09 * @LastEditTime: 2021-03-04 16:37:03 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit
一个系统登录界面的设计（含相关代码）
热门推荐
WXJWHQWY的专栏
09-02 1万+
为了忘却的纪念，于是乎就把登录界面设计和实现的过程记录下来。 1.修改档案管理登录界面的起因 当初档案管理界面非常简单，上线之前，觉得这样太简单，有点难为情，人家用户信任我们，我们弄给这样没有技术含量的登录界面 也太对不起人了，于是，搜搜一些大型网站的登录界面，后来看到12306网站的登录界面，眼睛一亮：就是它了。 2.登录界面的设计草图 根据上面的浏览和研究，决定弄一个类似的登录界面，垂直方向分三栏，具体是：logo区...
HTML+CSS制作登录页面
weixin_55076626的博客
05-15 2890
登录页面效果图： 注册页面效果图： 登录页面： <!DOCTYPE > <html> <html lang="ch"> <head> <meta charset="utf-8"> <title>登录页面</title> <style type="text/css"> #title{ font-family:"新宋体"; position: absolute..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值