html+css 模仿制作百度注册页面

一、html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><link rel="stylesheet" href="../css/baidu.css"><body>
<div class="left"><div class="logo"><img src="../img/baidu.logo.png"/></div><div class="ad"><dd style="color: white;font-size: 110px;">用科技</dd><dd style="color: white;font-size: 60px;">让复杂的世界更简单</dd></div>
</div>
<div class="right"><div class="login"><table class="register"><tr><span style="font-size: 70px;"><b>欢迎注册</b></span></tr><br><tr><span style="font-size: 25px;color: grey">已有账号？<a>登录</a></span></tr><tr><td>用户名</td><td><input type="text" name="username" placeholder="请设置用户名"></td></tr><tr><td>手机号</td><td><input type="text" name="tel" placeholder="可用于登录和找回密码"></td></tr><tr><td>密码</td><td><input type="text" name="password" placeholder="请设置登录密码"></td></tr><tr><td>验证码</td><td><input type="text" name="code" placeholder="请输入验证码" ></td></tr></table><br><input class="butt" type="button" value="注册"><br><br><input class="agree" type="checkbox" style="zoom: 180%"><span style="font-size: 25px;text-align: center">阅读并接受<a>《百度用户协议》</a>及<a>《百度隐私权保护声明》</a></span></div>
</div>
</body>
</html>

二、css

body {background: url("../img/baidu.bg.jpg") no-repeat;
}.left {height: 1163px;width: 1252px;float: left;
}.right {height: 1163px;width: 1252px;float: left;
}.logo {width: 250px;height: 80px;margin-top: 100px;margin-left: 150px;}.ad {padding-top: 550px;padding-left: 500px;
}.login {background: white;opacity: 0.85;border-radius: 15px;width: 700px;height: 900px;padding: 80px;margin: 90px 200px;
}tr > td {color: #bdbdbd;font-size: 30px;padding: 40px 0px;
}td > input {width: 560px;height: 65px;border: 1px solid #d0d0d0;border-radius: 10px;font-size: 25px;margin-left: 30px;
}a:hover {border-bottom: 1px solid blue;
}a {color: blue;
}.butt {width: 700px;height: 80px;border-radius: 30px;background: #bfcfed;color: white;font-size: 30px;border: 0px;
}.agree {font-size: 25px;
}

三、结果展示

html+css 模仿制作百度注册页面相关推荐

Html+CSS练习（百度注册页面）--div布局实现
效果图代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
html css js制作登录注册页面,【7】使用css/js/html模板来实现一个注册、登录和管理的功能...
1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 importtornado.web5 importlogging6 importdatetime ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
html制作登陆注册页面
html制作登陆注册页面源代码如下 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
本周总结前端第二次作业模仿制作百度界面
前端第二次作业: 制作百度界面: https://www.baidu.com/ 要求: 模仿制作,相似度达99%. 仿照https://www.runoob.com/css/css-tutorial. ...
【HTML+CSS+JS】登录注册页面大合集
前言学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便萌生了用人脸来进行注册和登录的想法,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进 ...
h5 php登录注册页面验证,H5制作一个注册页面的代码实例
HTML5写的注册页面,正在学习html5的朋友可以参考下代码如下: register.html function play(){ document .getElementById("me ...
使用html，css，javascript进行注册页面的实现
注册页面的实现功能实现一个用户注册页面实现表单校验功能效果图实现步骤 1) 创建Resign.html注册页面核心代码:  <div id=" ...
【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）
由于是个刚学这方面的菜鸡,所以好多代码都是从各个大佬那儿粘贴复制过来的orz,边搬运边学习吧可以说是.以下为部分参考.图片字体我都在网上找的,没有商用应该不犯法吧quq 密码强度检测:https:// ...

html+css 模仿制作百度注册页面

html+css 模仿制作百度注册页面相关推荐

最新文章

热门文章