web前端--html 5---qq注册

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>qq注册</title>

<link rel="import" href="component.html">

<style>

.theme{

width: 300px;

height: 600px;

margin: 0px auto;

}

.theme1 select{

padding:5px 10px;

border:none;

border-color: #B8B8B8;

box-sizing: border-box;

font-size: 14px;

color: #B8B8B8;

}

.a1{

color: #4b7cde;

}

.form-group1 input{

width: 100%;

padding:10px 10px;

border-radius:5px;

border-color: #B8B8B8;

box-sizing: border-box;

font-size: 15px;

}

.form-group2 select{

width: 25%;

padding:10px 10px;

border-radius:5px;

border-color: #B8B8B8;

box-sizing: border-box;

font-size: 15px;

}

.form-group2 input{

width: 73.5%;

padding:10px 10px;

border-radius:5px;

border-color: #B8B8B8;

box-sizing: border-box;

font-size: 15px;

}

.form-group3{

width:100%;

padding: 10px 10px;

border: none;

border-radius:10px;

background-color:#2c5df0;

color: white;

font-size: 20px;

cursor:pointer;

transition:background-color 0.3s;

}

.form-group4{

font-size: 15px;

color:#B8B8B8

}

</style>

</head>

<body>

<table>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>

<span class="theme1">

<img style="width: 40px;height: 40px;" src="img/down.jpeg" alt="qq">

<select >

<option value="简体中文">简体中文</option>

<option value="繁体">繁体</option>

<option value="English">English</option>

</select>

<font size="2" color=#B8B8B8>意见反馈</font>

</span>

</td>

</tr>

<tr >

<td rowspan="2">

<img style="width: 300px; height: 700px;" src="./img/屏幕截图 2024-10-16 170937.png" alt="qq注册">

</td>

<td style="width: 300px; height: 600px;">&nbsp;</td>

<td>

<div class="theme">

<h1>欢迎注册QQ</h1>

每一天,乐在沟通。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<SPAN class="a1">免费靓号</SPAN>

<form accept="#" method="post">

<div class="form-group1" >

<p><input type="text" name="username" id="username" placeholder="昵称"></p>

<p><input type="password" name="password" id="password" placeholder="密码"></p>

</div>

<div class="form-group2">

<select >

<option value="+86">+86</option>

</select>

<input type="text" name="number" id="number" placeholder="手机号码">

<font size="2" color=#B8B8B8>可通过手机号找回密码</font>

</div>

<P><button type="submit" name="ENER" class="form-group3">登录</button> </P>

<div class="form-group4">

<P><input type="checkbox" name="checkbox" value="checkbox">我已阅读并同意</P>

</div>

<div>

<p>&nbsp;

</p>

<p>&nbsp;

</p>

<p>&nbsp;

</p>

<p>&nbsp;

</p>

<font size="2" color=#B8B8B8>copyringmi@ 18346-54244Tencent UK HJDGUSD</font>

</div>

</form>

</div>

</div>

</td>

</tr>

</table>

</body>

</html>

相关推荐
web小白成长日记1 天前
企业级 Vue3 + Element Plus 主题定制架构:从“能用”到“好用”的进阶之路
前端·架构
APIshop1 天前
Python 爬虫获取 item_get_web —— 淘宝商品 SKU、详情图、券后价全流程解析
前端·爬虫·python
风送雨1 天前
FastMCP 2.0 服务端开发教学文档(下)
服务器·前端·网络·人工智能·python·ai
XTTX1101 天前
Vue3+Cesium教程(36)--动态设置降雨效果
前端·javascript·vue.js
LYFlied1 天前
WebGPU与浏览器边缘智能:开启去中心化AI新纪元
前端·人工智能·大模型·去中心化·区块链
Setsuna_F_Seiei1 天前
2025 年度总结:人生重要阶段的一年
前端·程序员·年终总结
model20051 天前
alibaba linux3 系统盘网站迁移数据盘
java·服务器·前端
han_1 天前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
aPurpleBerry1 天前
React 01 目录结构、tsx 语法
前端·react.js
jayaccc1 天前
微前端架构实战全解析
前端·架构