HTML+CSS入门级仿知乎登录界面
2024-04-28 10:34:14
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>知乎 - 发现更大的世界</title><link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico"><style type="text/css">*{margin:0;padding:0;background-repeat: no-repeat;background-attachment: fixed;text-align:center;}body{background-image: url(image/background.png);}.main{margin:55px auto 30px auto;height:500px;width: 430px;border: 1px solid white;background-color: white;}.SignHeader{margin:30px auto 0 auto;color:#0084FF;font-family: "黑体";font-size: 23px;}.Signslogen{margin:18px auto 38px auto;}.download{background-color:#8590A6;color:white;font-family:"黑体";font-size:15px;margin: auto;width:430px;height:40px;cursor:pointer;border-radius: 5px;}.tel{}.num{margin:auto 0 auto 33px;float:left;height:45px;width:110px;}.telnum{float:right;height:45px;width:245px;text-align: left;}.mess{width:450px;height:60px;}.message{margin: auto 43px;border:0 solid #EBEBEB;border-bottom:1px solid #EBEBEB;float:left;}.getmess{margin: auto 65px auto auto;border:0 solid #EBEBEB;border-bottom:1px solid #EBEBEB;float:right;font-size:14px;/*color:#175199;*/}.voice{float:right;margin:30px 45px 30px auto;font-size:14px;}.register{width:350px;height:40px;font-size: 15px;background-color:#0077E6;color:white;cursor: pointer;border-radius: 5px;}.zhuce{margin: 30px auto 80px 45px;font-size:14px;}.xieyi{float:left;color:#8590A6;}.jigouhao{float:right;margin:auto 40px auto auto;color:#175199;}.getmess a:link,.getmess a:visited,.getmess a:active,.getmess a:hover,.login a:link,.login a:visited,.login a:active,.login a:hover,.jigouhao a:link,.jigouhao a:visited,.jigouhao a:active,.jigouhao a:hover{text-decoration: none;color: #175199;}.voice a:link,.voice a:visited,.voice a:active,.voice a:hover,.xieyi a:link,.xieyi a:visited,.xieyi a:active,.xieyi a:hover{text-decoration: none;color: #8590A6;}.login{height:56px;background-color:#F6F6F6;border:1px solid #ebebeb;}.logina{font-family:"黑体";font-size:16px;margin:20px auto auto auto;}.foot{font-size: 12px;font-family: "黑体";color: #8590A6;margin:auto;width:540px;height:60px;}.foot a:link{color: #8590A6;text-decoration:none;}.foot a:visited{color: #8590A6;}.font a:active,.font a:hover{/*未知原因 无效*/color: red;text-decoration: underline;}.chengxin{height:28px;margin:20px auto;}hr{/*设置默认横线必须加height并设边框为零*/background-color:#EBEBEB;height:1px;border:0;}.one{margin:56px auto 5px; auto;}.two,.three{margin:5px auto;}input{border: 0;border-bottom: 1px solid #EBEBEB;padding:10px 0 0 0;}.message input{width:200px;}.telnum input{width:200px;}</style></head><body><div class="content"><div class="main"><div class="SignHeader" style="padding-bottom:5px;"><svg viewBox="0 0 200 91" class="ZhihuLogo" style="height:65.625px;width:140px;" width="140" height="65.625" aria-hidden="true"><g><path fill="#0084FF" d="M53.29 80.035l7.32.002 2.41 8.24 13.128-8.24h15.477v-67.98H53.29v67.978zm7.79-60.598h22.756v53.22h-8.73l-8.718 5.473-1.587-5.46-3.72-.012v-53.22zM46.818 43.162h-16.35c.545-8.467.687-16.12.687-22.955h15.987s.615-7.05-2.68-6.97H16.807c1.09-4.1 2.46-8.332 4.1-12.708 0 0-7.523 0-10.085 6.74-1.06 2.78-4.128 13.48-9.592 24.41 1.84-.2 7.927-.37 11.512-6.94.66-1.84.785-2.08 1.605-4.54h9.02c0 3.28-.374 20.9-.526 22.95H6.51c-3.67 0-4.863 7.38-4.863 7.38H22.14C20.765 66.11 13.385 79.24 0 89.62c6.403 1.828 12.784-.29 15.937-3.094 0 0 7.182-6.53 11.12-21.64L43.92 85.18s2.473-8.402-.388-12.496c-2.37-2.788-8.768-10.33-11.496-13.064l-4.57 3.627c1.363-4.368 2.183-8.61 2.46-12.71H49.19s-.027-7.38-2.372-7.38zm128.752-.502c6.51-8.013 14.054-18.302 14.054-18.302s-5.827-4.625-8.556-1.27c-1.874 2.548-11.51 15.063-11.51 15.063l6.012 4.51zm-46.903-18.462c-2.814-2.577-8.096.667-8.096.667s12.35 17.2 12.85 17.953l6.08-4.29s-8.02-11.752-10.83-14.33zM199.99 46.5c-6.18 0-40.908.292-40.953.292v-31.56c1.503 0 3.882-.124 7.14-.376 12.773-.753 21.914-1.25 27.427-1.504 0 0 3.817-8.496-.185-10.45-.96-.37-7.24 1.43-7.24 1.43s-51.63 5.153-72.61 5.64c.5 2.756 2.38 5.336 4.93 6.11 4.16 1.087 7.09.53 15.36.277 7.76-.5 13.65-.76 17.66-.76v31.19h-41.71s.88 6.97 7.97 7.14h33.73v22.16c0 4.364-3.498 6.87-7.65 6.6-4.4.034-8.15-.36-13.027-.566.623 1.24 1.977 4.496 6.035 6.824 3.087 1.502 5.054 2.053 8.13 2.053 9.237 0 14.27-5.4 14.027-14.16V53.93h38.235c3.026 0 2.72-7.432 2.72-7.432z" fill-rule="evenodd"></path></g></svg><div class="Signslogen">注册知乎，发现更大的世界</div></div><div class="tel"><div class="num"><select><option>中国 +86</option><option>美国 +1</option><option>英国 +44</option><option>新加坡 +65</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option><option>其他...</option></select></div><div class="telnum"><input type="text" placeholder="手机号" /></div></div><div class="mess"><div class="message"><input type="text" placeholder="请输入6位短信验证码"/></div><div class="getmess"><a href="#">获取短信验证码</a></div></div><div class="voice"><a href="#">接收语音验证码</a></div><button class="register">注册</button><div class="zhuce"><div class="xieyi">注册即代表你同意 <a href="#">《知乎协议》</a></div><div class="jigouhao"><a href="#">注册机构号</a></div></div><div class="login"><div class="logina">已有帐号?<a href="#">登录</a></div></div></div><button class="download">下载知乎 App</button><div class="foot"><div class="one"><a href="#" target="_blank">知乎专栏·</a><a href="#" target="_blank">圆桌·</a><a href="#" target="_blank">发现·</a><a href="#" target="_blank">移动应用·</a><a href="#" target="_blank">联系我们·</a><a href="#" target="_blank">来知乎工作·</a><a href="#" target="_blank">注册机构号</a></div><div class="two">© 2018 知乎·<a href="#" target="_blank">京 ICP 证 110745 号·</a>京公网安备11010802010035 <a href="#" target="_blank">号出版物经营许可证</a></div><div class="three"><a href="#" target="_blank">侵权举报·</a><a href="#" target="_blank">网上有害信息举报专区·</a><a href="#" target="_blank">儿童色情信息举报专区·</a>违法和不良信息举报：010-82716601</div><hr /><a href="#"><img src="data:image/chengxin_logo.png" class="chengxin" /></a></div></div></body>
</html>最终效果:
官网图:
HTML+CSS入门级仿知乎登录界面相关推荐
- canvasnest 移动距离_GitHub - XiaoxinJiang/canvas-nest: 仿知乎登录页面canvas-nest
canvas-nest 仿知乎登录页面canvas-nest 首先上效果图: 因为使用gif图片的原因,线条不是很清晰,大家可以到我的博客观看效果:http://cherryblog.site/ ,( ...
- HTML+CSS实现品优购登录界面
HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
- HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是 罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连 一键三连 一键三连 ...
- 【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果
上周到湖南长沙待了一周,在行走的过程中,发现目前最重要就是你的码一定要是绿码,如果是黄码,哪里都去不了,为啥说这个事情呢,因为我自己有2台手机,一台安卓小米,一台苹果,发现我到了长沙以后,核酸还是72 ...
- 用Spring Boot实现知乎登录界面
一.创建一个Spring Boot项目 File--New--Project--选中Spring Initializr--Next 根据jdk版本修改Java Version 修改项目名称,包名 选中 ...
- ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）...
开始搭建登录界面 登录界面效果图: 步骤开始: 设置辅助窗口的位置在下方 快捷键option,然后拖拽复制之后: 这里就直接省去了将背景颜色改为经典黑了. 到这里QQ空间的登录界面搭建完毕. 下面进行 ...
- 高仿知乎android客户端,仿知乎分享界面
前言 最近在做一个资讯类的APP,上面需要一个分享功能,项目不大,如果去使用官方的SDK还需要审查之类的,感觉太麻烦.偶然看到知乎的分享界面做得不错,拿到我这个项目中正合适,在网上查了一下资料,使用B ...
- ios 仿电脑qq登录界面_iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇-模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
- 仿qq邮箱登录界面（html+css）
具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
最新文章
- c++ softmax sigmoid
- 精通八大排序算法系列：二、堆排序算法
- RDC如何打造支撑百万用户的分布式代码托管平台
- hadoop学习笔记（二）：centos7三节点安装hadoop2.7.0
- 【C language】动态数组的创建和使用
- 四、pink老师的学习笔记——元素的显示与隐藏
- CNN中的卷积核及TensorFlow中卷积的各种实现
- Win10 PC 能打电话了？腾讯追讨前员工 1940 万；淘宝进军 MR 购物 | 极客头条
- 使用AIDL实现进程间的通信之复杂类型传递
- python学习笔记：操作Excle
- 程序设计导引及在线实践--读书笔记一
- Eclipse查看对应windowsbuilder+GEF+EMF版本
- 记一次带有FSG壳的熊猫烧香病毒分析过程
- 在线搭建自己的网课答案公众号题库系统
- ABAP报表添加点击跳转事务的方法
- C语言加油站程序,计算机学院“0101”计划名师导航篇“C语言加油站”第一讲如期开讲...
- 云服务器连接不上怎么办
- 用前端代码智能识别身份证的头像
- opencv 显示无边框
- 中基鸿业投资理财好习惯