零基础~仿qq登录界面
2024-09-27 18:06:04
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ登录界面</title>
<link rel="stylesheet" type="text/css" href="css/index4.css">
</head>
<body>
<div id="container">
<div class="input">
用户名:<input type="text" id="user">
</div>
<div class="input">
密 码:<input type="password" id="password">
</div>
<div class="button">
<input type="button" class="btn" value="登录">
<input type="button" class="btn" value="注册">
</div>
</div>
</body>
</html>
css代码:
#container{
height: 300px;
width: 400px;
border: 1px solid;
margin-top: 300px;
margin-left: 40%;
background-image: url("../img/qq.jpg");
background-repeat: no-repeat;
background-position: center center;
}
.input{
height: 40px;
width: 280px;
margin-top: 50px;
margin-left: 50px;
}
.button{
margin-top: 10px;
margin-left: 100px;
}
.btn{
margin-left: 30px;
}
#user{
background-image: url("../img/head.png");
background-repeat: no-repeat;/*图片背景取消平铺*/
padding-left: 30px;
}
#password{
background-image: url("../img/key.jpg");
background-repeat: no-repeat;
padding-left: 30px;
}
图片:
最新文章
- 最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目
- 设置JDK环境变量(linux版)
- pandas.DataFrame对行和列求和及添加新行和列
- loadrunner资源过滤器
- Linux chkconfig 命令详解
- HDU 1754区间最值 &; SPLAY
- #入魔这些年#零度智控&;模型控社区大型征文活动,万元大奖等你拿
- asp.net MVC开发过程中,使用到的方法(内置方法及使用说明)
- chubu
- cut命令如何截取以空格隔开的字段
- 批量扫描互联网无线路由设备telnet,并获取WIFI密码
- GPS(Global Positioning System)全球定位系统
- iTerm2 + oh my zsh代替mac自带的bash shell
- ASP.NET中过滤HTML字符串的两个方法
- 正则表达式(即:匹配模式Pattern)
- x86平台上的Windows页表映射机制
- The Movie db (TMDB)的API申请
- xstream实现对象的序列化和反序列化(Java)
- openvas scanner 服务未启动修复
- Oracle 口令文件:即 oracle密码文件
热门文章
- Python开发环境Wing IDE如何使用GTK和PyGObject
- android ContentProvider共享数据
- python模块详解 sys shutil
- CentOS6.5安装Jenkins
- 用户管理的设计--3.jquery的ajax实现二级联动
- 利用Excel导入数据到SAP C4C
- 377. Combination Sum IV 70. Climbing Stairs
- ZOJ - 2112 Dynamic Rankings(BIT套主席树)
- PHP APC安装与使用
- python_1_变量的使用