HTML+CSS系列:登录界面实现
2024-08-29 23:26:25
一.效果
二.具体实现
1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="css/iconfont.css"/>
<title>登录界面</title>
</head>
<body>
<div id="bigBox">
<h1>LOGIN</h1> <div class="inputBox">
<div class="inputText">
<span class="iconfont icon-user"></span>
<input type="text" placeholder="username" />
</div>
<div class="inputText">
<span class="iconfont icon-password"></span>
<input type="password" placeholder="password" />
</div>
<input type="button" value="LOGIN" class="inputButton" />
</div>
</div>
</body>
</html>
2.style.css
body{
margin: 0;
padding: 0;
background-image: url(../img/timg.jpeg);
background-repeat: no-repeat;
} #bigBox{
margin: 0 auto;
margin-top: 200px;
padding: 20px 50px;
background-color: rgba(0,0,0,0.8);
width: 400px;
height: 300px;
border-radius: 10px;
text-align: center;
} #bigBox h1{
color: white; } #bigBox .inputBox{
margin-top: 50px;
} #bigBox .inputBox .inputText{
margin-top: 20px;
} #bigBox .inputBox .inputText span{
color: white;
} #bigBox .inputBox .inputText input{
border: 0;
padding: 10px 10px;
border-bottom: 1px solid white;
background-color: #00000000;
color: white;
} #bigBox .inputBox .inputButton{
border: 0;
width: 150px;
height: 25px;
color: white;
margin-top: 30px;
border-radius: 20px;
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}
3.iconfont.css
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1601708272399'); /* IE9 */
src: url('iconfont.eot?t=1601708272399#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACIAAAAQIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEZIQNATYCJAMMCwgABCAFhG0HORtWB8iemjwJVGYD2yABESTIaRRB/djr3nsXAlCZyKQ8vgpRAftEtuzq6tiY6gpdCSh8/xCedv10Sv8dbM5oXIoh1UA95bYvIG8HF8L5j3unf3WehfNZlssckz91AcYBBTTG9GiKFEhAHlDD2AUt8TCBdtOssI6FRCUBVckcFYibfG4+UM0YZQM1tGqaKxameAWatJbHE87jZfD5+GcrVCmaKnPi8RvBRcDvp+HzTGTvf5NzHgJE09nBllGxCUjiQqXzFCRKbkK0q0p2c2GzFMpUkf8NAqGmbt7oD68QzUxlJ6SsKspFiRwOwa+zAqhy/ctoRiu+4D+kDG6csrNzN0CHze66LJenKBSpMlny9es1tjwp5KdvIpdX9cgTCHKdwnXVKnIW2cxifXKYOZeYS8pTj3E4T1fg43jvEVnSuPbYamz2egyMj+P5y413yMxx7PL1gguyXkXswZSVKwli5lxNFjlrk5YWPoucB2vJbXKLuShGzLS6zUTRJ16Hk3FsDO97Qw6+xRzXacJmm40tN7pe2yu7IgM63h4AZW8/OvnJQRayf8iUw9pXXFPAyaXnDEDjbM/u/euBkk4bD+79b4/95UtC+i+fXRmb2iok6filY791yONvyFpkHZSvozxIY69jr/2P6Db/uBHXbXN6wkJMbytrJO+zUsLMeSZjz6xjFpKDrgHL0pQWDggMDczPsblT/S7l+RBjVcRBH7UeOtmhsGZfsElYz5ptI67RVVkt1n3N1iWFYTNMzSHdcd0gKnC/am3ibuhF4Ut1J4KLo481hQ6nQ42+aSlFmP1S77AZxnU1eqZy1NaTHCdqoc4GXf1EJAaoAdzIX9NR09/IOXezo1aTtqO2hfO6Ji3HzXnORlr+hv6abuYWTRbvsHV+6zST1BezNNSdXzura7AWg0sAGnUr4gAA9QQy/P+/42mn2c/cnp2vqiX4+sb/QxBsJOiubn07ruBvizrWpSYxTTUVoSM0XNXrlF8B8rnKP66GfveGq4c6lxNaDSVQtJiCqtUimpRNaNJhG5q1OgjtNoQu7zBADBHZhnXtAEKvTVB0+wxVrwtoUu5Ck2FvoVlvINDuRAxs2GE5+OhRMcyXwiKqoJriFzJltG2RomFlAuSWl+SL05KAngLFEn6Esrexy2dCYRkUTzFFUsF1kEppihYzpVQIOA6WlDCUUMwIYKHUhieVCj1sbemqK9kUMqUAdZQYlE8KKkIpUI3CV4hRhvaaS6GF9yeAuMqVyCduIFW5U0BiEvz2KfZs2HVAQ5VlnUi30l2iApcDKSkaD6OJMUpRQqAdKrGSDIqwup8AVEjKBm9AXMiDLWpEd1XaLK8ufb8t0M7cuUaJGikfSaBY9W6+RFLJiIsAAA==') format('woff2'),
url('iconfont.woff?t=1601708272399') format('woff'),
url('iconfont.ttf?t=1601708272399') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1601708272399#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-user:before {
content: "\e623";
} .icon-password:before {
content: "\e75b";
}
最新文章
- C#学习手册
- 如何在cluster上跑R脚本
- 51nod算法马拉松14
- vim总结
- [MFC] CList
- iOS--九宫格奥秘(UIView)(arc4random)
- 蓝桥杯 ALGO-108	最大体积 (动态规划)
- PHP错误处理及异常处理笔记
- laraval框架之数据库不可不吐槽的坑
- 嵌入式C语言头文件的建立与使用
- 使用ef code first模式,在部署后服务器端把数据库同步到最新版本的方法
- 获取sql执行时间
- Java这些冷知识你知道吗?
- 关于帧动画steps属性的理解
- Lua 数组排序 table.sort的注意事项
- [物理学与PDEs]第1章习题5 偶极子的电场强度
- webapi接口发布出错 OwinStartupAttribute
- 安装GDB-ImageWatch ,在QT中查看图像
- Django框架----用户认证auth模块
- 关于ActionBar 左侧添加完返回后 点击无效的问题
热门文章
- Qt 如何使窗体初始最大化
- route和过滤器的基础知识
- Unity3d启动事件 - InitializeOnLoad
- [第二届全国中学生网络安全竞赛]bypass
- 百度网盘,实现免费不限速,10M/S?
- Activiti7 任务人员动态分配(UEL-Value方式)
- Spring security OAuth2.0认证授权学习第四天(SpringBoot集成)
- webapi上传图片的两种方式
- 基于STM32的脉搏心率检测仪(OLED可以实时显示脉冲波形)
- 案例:ADG环境遇到redo日志member路径有误以及RMAN-6571错误