简单的一个百度注册界面

最新推荐文章于 2024-04-30 10:00:00 发布
最新推荐文章于 2024-04-30 10:00:00 发布
阅读量4.7k 收藏 46
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45866849/article/details/109336531
版权

简单的一个百度注册界面

通过这两天对css的学习，做一个简单的百度登录界面，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#i1{
				background: url(img/reg_bg_min.jpg);
				
			}
			#i2{
				width: 400px;
				height: 450px;
				background-color: #F0F8FF;
				opacity: 0.8;
				border-radius: 15px;
				padding: 20px;
				float: right;
				margin-right: 100px;
				margin-top: 100px;
			}
			#i3{
				font-size: 30px;
				font-weight: bold;
			}
			.c1{
				width: 250px;
				height: 25px;
			}
			.c2,.c3{
				height: 25px;
			}
			.i5{
				margin: 30px;
		         margin-left: auto;
		         margin-right: auto;
		         text-align: center;
			}
			
			#i6{S
				border: 1px solid;
				color: #F0F8FF;
				background-color: #0000FF;
				height: 40px;
				width: 318px;
				border-radius: 15px;
				margin-left: auto;
				margin-right: auto;
			
			
			}
			.c3{
				border: 0;
				height: 40px;
			}
			.c4{
				border: 0;
				background-color: #0000FF;
				color: #F0F8FF;
				text-align: center;
				width: 38px;
				height: 20px;
			}
			#i7{
				font-size: 10px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
			}
			#box1{
				float: left;
				margin-left: 100px;
				margin-top: 100px;
			}
			#box2{
				color: aliceblue;
				font-size: 30px;
				float: left;
				margin-top: 350px;
				letter-spacing: 10px;
				line-height: 10px;
				}
			#box3{
				color:#F0F8FF;
				font-size: 15px;
				letter-spacing: 5px;
				float: left;
				position: relative;
				top: 120px;
				left: 100px;
				}
			a{
				text-decoration: none;
			}
		    a:hover{
				color: crimson;
			}
			#a1{
				color: #F0F8FF;
			}
			#a1:hover{
				color: crimson;
			}
			}
		</style>
	</head>
	<body id="i1">
		<div id="i2">
			<div id="i3">欢迎注册</div>
			<div id="i4">已有账号？<a href="">登录</a> </div>
			<div class="i5">用户名&nbsp;&nbsp;&nbsp;<input class="c1" type="text" placeholder="请设置用户名"/> </div>
			<div class="i5">手机号&nbsp;&nbsp;&nbsp;<input class="c1" type="text" placeholder="可用于登录和找回密码"/> </div>
			<div class="i5">密&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;<input class="c1" type="password" placeholder="请设置登录密码"/> </div>
			<div class="i5">验证码&nbsp;&nbsp;&nbsp;<input class="c2" type="text" placeholder="请输入验证码" />
			             <input class="c3" type="button" value="获取验证码" /> </div>
			<div class="i5"><input id="i6" type="submit" value="登录" /></div>
			<div id="i7"><input  type="checkbox" />阅读并接受<a href="">《百度用户协议》</a>
			       及<a href="">《百度隐私权保护声明》</a> </div>
		</div>
		<div id="box1" ><img src="./img/baidu.png"/></div>
		<div id="box2" >
			<h2>用科技</h2>
			<p>让复杂的世界更简单</p></div >
		<div id="box3"><a href=""i"a1">帮助中心</a>&nbsp;|&nbsp;<img src="./img/service-hover-2x.png" />&nbsp;&nbsp;2020@百度 </div>
		</div >
	
	</body>
</html>

上述代码实现结果如下图所示：

在这里插入图片描述

白居不易.
关注
  • 0
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
html+css制作简单百度登录界面
qq_43561835的博客
12-23 6179
html+css制作简单百度登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel...
简单制作一个百度注册页面
qq_45866940的博客
10-28 9330
通过这几天对css(级联样式表)的理解,简单制作一张百度注册页面 话不多说代码奉上 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #img{ background-image: url(img/reg_bg_min.jpg); backgroun
百度注册页demo
11-28
自己写的纯html的百度注册页面，适合初学者学习css的布局。
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
最新发布
DL_dldlhhj的博客
04-30 1116
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
用html+css模仿百度登录页
AKK188888881的博客
02-21 2078
用html+css模仿百度登录页
百度登录界面CSS+HTML
weixin_45962741的博客
05-13 3348
界面如下： 源代码： <!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"> &lt
百度网页注册HTML代码
热门推荐
JackieDYH的博客
10-16 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册百度账号</title> </head> <style> *{ margin:0; padding:0; } body{ width:...
Android 基于百度新闻api做的一个简单的新闻客户端
11-11
在Android平台上，开发一个基于百度新闻API的简单新闻客户端是一个常见的练习项目，旨在展示如何将网络数据集成到移动应用中。这个项目的核心是利用百度开放的新闻接口来获取实时资讯，然后通过Android SDK进行界面...
QT编写的一个简单上位机 qt webengine+串口通信+百度地图API
04-22
这个项目是利用QT创建的一个简单的上位机程序，集成了三个关键功能：QT WebEngine、串口通信以及百度地图API。 首先，QT WebEngine模块是QT框架的一部分，它允许开发者在应用程序中嵌入Web内容。WebEngine基于...
PyQt5打造一个简单的翻译软件
04-09
总之，这个项目展示了如何利用PyQt5的图形界面功能和百度翻译API，创建一个简单的翻译应用。通过学习这个项目，你可以掌握Python GUI编程的基本技巧，了解如何调用Web服务，以及如何处理API响应。这将对你的Python...
ubuntu下QT调用百度地图的HTML文件，在界面显示地图，可以输入经纬度进行定位
06-01
至此，你已经在Ubuntu上构建了一个简单的Qt应用，它能够调用百度地图的HTML文件并在界面中显示地图。用户可以通过输入经纬度进行定位。为了提高用户体验，你可以考虑添加错误处理、自动完成地址等功能，或者将地图...
百度登录代码
01-27
2015年1月27日最新百度登录代码，JAVA编写的，所有LIB均有。 从项目中抽出来整理的代码，去除了原有系统业务相关代码，通过运行main方法输入百度帐号用户名与密码直接登录。 1、有不明白之处可到博客处留言，看到留言会回复。 2、若无CSDN积分也没关系，请到博客处留下邮箱，看到后我会将源码发至你邮箱。谢谢支持！3、代码中还有一个readme是百度接口返回的状态一些个人理解。希望对你有帮助。
完整版百度注册源码.rar
04-03
完整版百度注册源码.rar
用uniapp实现一个简单的计算器
06-08
uniapp是一个基于Vue.js的多端开发框架，它允许开发者使用一套代码编写，然后可以发布到iOS、Android、Web（H5）、以及各种小程序（微信/支付宝/百度/QQ/快手/抖音/淘宝）、快应用等多个平台。在本项目中，我们将...
Html+CSS练习（百度注册页面）--div布局实现
wgf1997的博客
08-07 8835
效果图 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
html+css实现百度首页（简单版）
returnadsss的博客
12-25 1万+
从头开始学前端，先从小事做起，多写代码。 第一版：使用基本的html和css元素，在学完《html+css快速上手》后，可以将基本的元素配齐，和基本样式基本布局，但缺少对于块元素的排版，圆角边框等等。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面
CNdota_never_die的博客
04-25 2906
目的 根据百度登陆的网页界面，自己尝试写一个类似的界面，用 html 和 css 代码实现。 想要做出这个界面，首先根据该界面，我用草稿纸绘制了一张区域分布图： (请勿吐槽字丑和图片简陋！) 大概构思出整个页面的区域分布后，利用 HTML 的 div、a 、p 、 input 等标签对整个页面进行了构图，后面用贴上博主的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit
html css JS 小练习简单模拟百度注册页面 实现弹窗提示用户名等为空以及弹窗提示随机产生六位验证码
m0_58032275的博客
10-12 2333
简单模拟百度注册页面 原始页面 模拟 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js弹窗测试</title> <script type="text/javascript" src="js/test.js"></script> <link rel="stylesheet" href="css/testJs.css" t
利用html和css完成百度首页的制作（百度一下）
hhahahhahahhha的博客
06-14 3406
通过分析可以知道该部分由俩个部分组成，这样就可以采取二分布局的方式进行布局，而其中的左右两个部分也各自分成二个部分但是由于是上下分布所以不需要采取二分布局，不需要使用悬浮的方式。（1）分析可得百度首页的顶部是有俩部分得来的，所以可以采取二分法的办法来实现，用一个大盒子里放二个小盒子，才去左边的左悬浮和右边的右悬浮。分析可得可以采取在一个盒子里放置一个文本框和一个按钮，但是要做到和百度首页一样的程度要使用border-radius进行边框的优化，使其变的圆润。以及使用hover标记进行鼠标的触控反馈。
你可以为我设计一个使用百度云接口的软件在MIT App Inventor上吗，给我代码编程过程和界面设计
05-25
当然可以！下面是一个简单的使用百度云接口的软件在MIT App Inventor上的例子，包括代码编程过程和界面设计。 首先，我们需要在百度云AI开放平台上注册并创建一个应用程序。这里我们选择使用语音识别API作为示例。注册完成后，你会得到一个API Key和Secret Key，这两个密钥将用于连接你的应用程序和百度云API。 然后，我们可以开始设计MIT App Inventor的界面。在设计界面时，我们需要添加以下组件： 1. 一个“TextToSpeech”组件，用来将机器人的回答转换成语音。 2. 一个“SpeechRecognizer”组件，用来识别用户的语音输入。 3. 一个“Button”组件，用来触发语音输入。 4. 一个“TextBox”组件，用来显示机器人的回答。 界面设计如下图所示： ![alt text](https://i.imgur.com/g6dRS2T.png) 接下来，我们需要在MIT App Inventor上编写代码。代码如下所示： ![alt text](https://i.imgur.com/4HTtH4m.png) 1. 首先，我们需要在“Screen1”初始化时设置“SpeechRecognizer”组件的API Key和Secret Key。 2. 然后，我们需要在按钮被点击时触发“SpeechRecognizer”组件，开始录音。 3. 当用户停止说话时，我们需要将录制的音频数据发送到百度云API进行语音识别，将结果显示在“TextBox”组件中。 4. 最后，我们需要使用“TextToSpeech”组件将机器人的回答转换成语音，并播放出来。 至此，我们就完成了一个使用百度云接口的软件在MIT App Inventor上的设计和编程。你可以根据自己的需求进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白居不易.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值