HTML+CSS入门级仿知乎登录界面

最新推荐文章于 2024-07-27 11:58:54 发布
最新推荐文章于 2024-07-27 11:58:54 发布
阅读量9k 收藏 51
点赞数 6
分类专栏： 前端 文章标签： html css 知乎 前端 UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hai1124948893/article/details/79833956
版权 
<!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">
					&copy; 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="image/chengxin_logo.png" class="chengxin" /></a>
			</div>
		</div>
	</body>
</html>

最终效果:


官网图:


追风筝的程序员
关注
  • 6
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
shell实例手册
yonggeit的博客
05-27 5977
shell实例手册 1文件{ touch file # 创建空白文件 rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制) dos2unix # windows文本转linux文本 unix2dos # linux文本转windows文本 enca filename ...
仿知乎网站
weixin_33726943的博客
09-18 995
技术栈： 1. Git，IntilliJ IDEA 2. Spring Boot，Velocityhttps://www.cnblogs.com/liguo-wang/p/9568764.html 3. myBatis 4. 登陆/注册 5. 前缀树 敏感词过滤 6. Redis 7. 异步框架 8. 邮件发送，排序推送算法 9. 推拉timeline 10.爬...
HTML知乎注册登录页面模板.zip
05-28
HTML知乎注册登录页面模板，界面简洁，很实用。
用HTML、JavaScript、CSS写一个登录界面【一万字讲解】
最新发布
2401_83116349的博客
07-27 421
论如何用html、javascript、css做一个登录界面（附完整代码）
HTML+CSS制作知乎登录页面
热门推荐
qq_45145165的博客
09-15 1万+
HTML+CSS制作知乎登录页面 ​ 由于没有用上js相关的技术，所以无法做出相应的功能，，只能做出知乎登录页面的用密码登录的界面，不能切换到免密码登录。相关界面的图片如下： 网页上的原图： 我做的： 具体代码如下： 首先要创建一个reset.css的文件，因为每个浏览器的设置都不一样，为了防止制作的页面布局错乱，需要将浏览器的布局重置。 /** * Eric Meyer's Reset CS...
仿知乎前端页面
10-12
包括主页、发现、话题、话题广场、个人中心、 设计技术：angularjs、spring、路由 下载后用IDEA导入 找到index.html然后用浏览器打开
仿知乎问题系统php+html模版
10-23
问答知乎模版仿问答系统，安装即可在服务器运行php初学资源。
仿知乎登录界面
10-15
仿知乎登录界面的风格，蓝色背景，渐变效果。
在Typora路上愈走愈远，几乎涵盖所有入门攻略和常见问题以及typora继续探索~
weixin_45152271的博客
03-28 1657
在Typora路上愈走愈远  什么是Markdown 为什么选用Typora Typora入门 段落和格式简介及快捷键 Typora的菜单栏 标题 列表 代码块 任务列表 表格 脚注 链接引用 分割线 Typora探索 空格与换行 emoji表情 学术写作 文件导入导出多种格式 HTML标签 插入图片，解决图片问题 Typora+ipic Typora...
收藏=学会 前端小程序开源项目121个
m0_57290404的博客
05-09 2822
微信小程序 Demo 案例 大厂资源开源项目 weapp-demo ★852 - 仿豆瓣电影微信小程序 wechat-weapp-gank ★567 - Gank微信小程序 wechat-weapp-mall ★531 - 微信小程序移动端商城 SmallAppForQQ ★492 - 微信小程序高仿QQ应用 weapp-wechat-zhihu ★348 - 微信中的知乎 仿芒果TV ★289 - 微信小程序demo weChatApp-Run ★202 - 跑步微信小程序Demo we
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5018
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
模仿知乎登录页面，后台登录模板
09-25
模仿知乎登录页面，后台登录模板 后台登录 模仿知乎登录页面，后台登录模板 后台登录模仿知乎登录页面，后台登录模板 后台登录
仿知乎的登录页面.rar
10-16
学习过程中写的知乎登录页面，用的HTML+CSS+JS。比较简单，欢迎大家指正。
知乎网站的登录前端源码
02-28
登录和注册动态可视界面
zhihuparticle仿知乎登录页面
08-11
zhihu-particle 仿知乎登录页面，基于canvas实现了一个粒子（Particle）随机运动的动画效果
仿知乎程序
10-27
一个仿知乎的程序。实现了大体的功能，因为没有分析其中的数据结构，所以里面的数据不是很准确
iOS知识点,iOS开发笔记
u014616159的博客
09-06 2357
前言：iOS开发之路笔记,iOS知识点总结,在ios开发路上查阅的资料,都是开发时候一点一点积累的笔记,希望能帮到大家,喜欢的记得点个❤️哦。 启动页相关 iOS启动时如何添加引导页面 小demo - 于丹丹 no zuo no die no life - 博客频道 - CSDN.NET http://blog.csdn.net/yudandan10/article/details/42...
仿做知乎的登录页面
weixin_43042647的博客
10-16 1927
仿做的知乎登录页面 #CSS部分 <style> *{ margin:0px; padding: 0px; font-family: 微软雅黑; } body { background: url(images/sign_bg.db29b0fb...
仿知乎静态登陆页面
scholar_1的博客
07-06 1711
此文，书生带来了一个仿知乎的静态的登录页面跟上一篇仿京东商城登录页面一样可以根据自己的需求对代码进行修改下面，展示代码：
html+css还原知乎
12-13
以下是使用HTML和CSS还原知乎的基本步骤： 1. 首先，需要使用HTML创建页面的基本结构，包括头部、导航栏、主体内容和页脚等。 2. 接下来，使用CSS样式来美化页面，包括字体、颜色、布局、背景等。 3. 在页面中添加知乎的logo、搜索框、导航栏、问题列表、回答等元素，使用CSS样式来调整它们的位置和样式。 4. 最后，使用CSS媒体查询来实现响应式布局，使页面在不同设备上都能够良好地显示。 由于还原知乎需要涉及到大量的HTML和CSS代码，这里无法提供完整的代码示例。建议您可以参考一些开源的知乎页面模板，或者自己动手尝试还原。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值