仿知乎静态登陆页面

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量1.5k 收藏 15
点赞数 2
分类专栏： 前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scholar_1/article/details/125649400
版权

此文，书生带来了一个仿知乎的静态的登录页面

跟上一篇仿京东商城登录页面一样

可以根据自己的需求对代码进行修改

下面，展示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知乎 - 有问题，就会有答案</title>
    <link rel="icon" href="img/zh/icon.ico">
    <link rel="stylesheet" href="css/reset.css">

    <style>
        /*重置样式*/
        a {
            text-decoration: none;
            color: inherit;
        }

        /*设置页面的背景*/
        body {
            background-image: url("img/zh/bj.png");
            background-size: 101% 143.5%;
            background-color: #B8E5F8;
            background-attachment: fixed;
        }

        .page-icon-box {
            width: 100%;
            text-align: center;
            padding-top: 43px;
            margin-bottom: 24px;
        }

        .page-icon {
            display: inline-block;2
            width: 128px;
            height: 81px;
        }

        .form-box {
            width: 352px;
            height: 295px;
            padding: 0px 24px 84px;
            background-color: #fff;
            margin: auto;
            border-radius: 3px 3px 0px 0px;
            overflow: hidden;
            position: relative;
        }

        .login-select-box {
            height: 60px;
            width: 100%;
            display: flex;
        }

        .login-select-box > div {
            display: inline-block;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24px;
        }

        .login-active {
            height: 56px;
            border-bottom: 4px #0066FF solid;
            font-weight: 700;
        }

        .form-box form input:not([type='submit']) {
            width: 352px;
            padding: 12px 0px;
            border: none;
            outline: none;
            border-bottom: 1px #EBEBEB solid;
            margin: 10px 0px;
            font-size: 15px;
        }

        .input-box {
            margin-top: 5px;
        }

        .input-box > form > div {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
        }

        .input-box > form > div > a {
            font-size: 14px;
            color: #175199;
        }

        .input-box > form > div > a:last-of-type {
            color: #8590A6;
        }

        .input-box > form > div > a:hover {
            color: #657086;
        }

        .form-box form > input[type='submit'] {
            width: 100%;
            height: 36px;
            margin-top: 40px;
            background-color: #0066FF;
            color: #fff;
            border: none;
            outline: none;
            border-radius: 3px;
            font-size: 15px;
        }

        .form-box form > input[type='submit']:hover {
            background-color: #0055ee;
        }

        .agreement-box {
            font-size: 13px;
            color: #808080;
            padding-top: 40px;
        }

        .hr {
            margin-top: 8px;
            border-bottom: 1px #EBEBEB solid;
        }

        .social-login-box {
            width: 352px;
            height: 60px;
            padding: 0px 24px;
            background-color: #fff;
            margin: auto;
            display: flex;
            justify-content: space-between;
            color: #8590A6;
        }

        .social-login-box > div:first-of-type {
            height: 60px;
            display: flex;
            align-items: center;
        }

        .social-login-box > div:last-of-type {
            height: 60px;
            display: flex;
        }

        .social-login-box > div:last-of-type > div > a {
            height: 60px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }

        .social-login-box img {
            width: 16px;
            height: 16px;
            padding-right: 4px;
        }

        .bottom-btn-box {
            width: 352px;
            height: 60px;
            padding: 0px 24px;
            margin: auto;
            background-color: #F6F6F6;
            display: flex;
            justify-content: space-between;
            border-radius: 0px 0px 3px 3px;
        }

        .bottom-btn-box img {
            width: 23px;
            height: 23px;
            border-radius: 4px;
            margin-right: 10px;
        }

        .bottom-btn-box a {
            height: 60px;
            display: flex;
            align-items: center;
            color: #0066FF;
        }

        .bottom-menu-box {
            color: #fff;
            font-size: 12px;
            width: 100%;
            text-align: center;
            margin-top: 50px;
            padding-bottom: 25px;
        }

        .bottom-menu-box > div > *:not(:last-child):after {
            content: " ·";
        }

        .bottom-menu-box > div {
            margin-top: 3px;
        }

        .bottom-menu-box > div:nth-child(2) {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #code {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 60px;
            height: 60px;
        }

        #zd {
            border-top: 30px rgba(0, 0, 0, 0) solid;
            border-bottom: 30px #fff solid;
            border-left: 30px #fff solid;
            border-right: 30px rgba(0, 0, 0, 0) solid;
            position: absolute;
            right: 0px;
            top: 0px;
        }

        #password-is-show {
            position: absolute;
            width: 23px;
            right: 10px;
            top: 17px;
        }

        .bottom-menu-box a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="page-icon-box">
    <img src="img/zh/zhihu.png" class="page-icon" alt="">
</div>
<div class="form-box">
    <img id="code" src="img/zh/code.png" alt="">
    <a href="#"><span id="zd"></span></a>
    <div class="login-select-box">
        <div>免密码登录</div>
        <div class="login-active">密码登录</div>
    </div>
    <div class="input-box">
        <form action="#" method="post">
            <input type="text" name="userName" placeholder="手机号或邮箱" autocomplete="off">
            <div style="position: relative">
                <input type="password" name="password" placeholder="密码">
                <img src="img/zh/yj.png" id="password-is-show">
            </div>
            <div>
                <a href="#">海外手机号登录</a>
                <a href="#">忘记密码？</a>
            </div>
            <input type="submit" value="登录">
        </form>
    </div>
    <div class="agreement-box">
        未注册手机验证后自动登录，注册即代表同意
        <a href="#">《知乎协议》</a>
        <a href="#">《隐私保护指引》</a>
    </div>
    <div class="hr"></div>
</div>
<div class="social-login-box">
    <div>社交账户登录</div>
    <div>
        <div>
            <a href="#">
                <img src="img/zh/wechat.png">
                <div>微信</div>
            </a>
        </div>
        <div>
            <a href="#">
                <img src="img/zh/qq.png">
                <div>QQ</div>
            </a>
        </div>
        <div>
            <a href="#">
                <img src="img/zh/wb.png">
                <div>微博</div>
            </a>
        </div>
    </div>
</div>
<div class="bottom-btn-box">
    <div>
        <a href="#">
            <img src="img/zh/kt.png">
            <span>开通机构号</span>
        </a>
    </div>
    <div>
        <a href="">
            <img src="img/zh/zh.png">
            <span>知乎App</span>
        </a>
    </div>
</div>
<div class="bottom-menu-box">
    <div>
        <a href="#">知乎专栏</a>
        <a href="#">圆桌</a>
        <a href="#">发现</a>
        <a href="#">移动应用</a>
        <a href="#">联系我们</a>
        <a href="#">来知乎工作</a>
        <a href="#">注册机构号</a>
        <a href="#">Investor Relations</a>
    </div>
    <div>
        <span>© 2021 知乎</span>&nbsp;
        <a href="#">京 ICP 证 110745 号</a>&nbsp;
        <a href="#">京 ICP 备 13052560 号 - 1</a>&nbsp;
        <img src="img/zh/jc.png" alt="">&nbsp;
        <a href="#">京公网安备 11010802020088 号</a>&nbsp;
        <a href="#">出版物经营许可证</a>&nbsp;
        <span>互联网药品信息服务资格证书（京）- 非经营性 - 2017 - 0067</span>&nbsp;
    </div>
    <div>
        <a href="#">侵权举报</a>
        <a href="#">网上有害信息举报专区</a>
        <a href="#">儿童色情信息举报专区</a>
        <span>违法和不良信息举报：010-82716601</span>
    </div>
</div>
</body>
</html>

接下来就是仿知乎登录页面的效果图：

接下来，水一点字

人生如棋，仅有舍弃一些棋子，才能换得一生的平静和幸福。

上帝是公平的，冬天里失去的东西，到春天的时候会还给你；

这方面舍弃的东西，在另一方面会补给你。

舍与得，其实是一个无限循环的圈。越敢舍，越能得；

越愿舍，越易得。舍得之间，人生迥异，以舍为得，妙用无穷！ 

希望大家能从书生文章里能有点收获。(相关资源可从我的资源下载，免费，可能因为系统原因暂时看不见我的资源，可以先收藏或关注，不迷路)

文章结束，浪客书生，以键证道。

浪客书生
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML+CSS制作知乎登录页面
qq_45145165的博客
09-15 1万+
HTML+CSS制作知乎登录页面 ​ 由于没有用上js相关的技术，所以无法做出相应的功能，，只能做出知乎登录页面的用密码登录的界面，不能切换到免密码登录。相关界面的图片如下： 网页上的原图： 我做的： 具体代码如下： 首先要创建一个reset.css的文件，因为每个浏览器的设置都不一样，为了防止制作的页面布局错乱，需要将浏览器的布局重置。 /** * Eric Meyer's Reset CS...
模仿知乎登录页面，后台登录模板
09-25
模仿知乎登录页面，后台登录模板 后台登录 模仿知乎登录页面，后台登录模板 后台登录模仿知乎登录页面，后台登录模板 后台登录
HTML+CSS入门级仿知乎登录界面
season_hai
04-06 8945
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;知乎 - 发现更大的世界&lt;/title&gt; &lt;link rel="shortcut icon" type="image/x-icon"
仿做知乎的登录页面
weixin_43042647的博客
10-16 1842
仿做的知乎登录页面 #CSS部分 <style> *{ margin:0px; padding: 0px; font-family: 微软雅黑; } body { background: url(images/sign_bg.db29b0fb...
前端仿知乎登录注册页面
m0_73592256的博客
05-02 1236
图中的背景图片可以去知乎官网右击检查下载保存。
Python使用selenium模拟登录知乎
人生苦短， 还不用Python？
08-08 1543
首先控制selenium模拟请求知乎登录界面：https://www.zhihu.com/signup?next=%2F 但是默认为注册，所以需要控制鼠标来点击上边那个登录按钮，就变成这样了。 然后我们在控制浏览器找到输入用户名、密码的这两个input标签，使用send_keys()来将用户名密码输入进去即可，部分代码如下： 但就在我正要点击登录按钮时问题出现了：验证码 经过测试，知乎的验证...
【小程序】仿知乎——知识付费类小程序（大咖咨询、Live推荐...）
C_xixixixi的博客
01-19 3274
1软件功能说明 “听我说”是一个知识付费分享平台，服务包括优质音频信息提供、个性化咨询、知识和技能分享等。将邀请行业大咖到平台进行分享，以此获得影响力和知识变现收益。同时为多个领域的学习者提供知识及其他优质服务，通过规模化降低学习成本为学习者提供有价值的学习服务，并鼓励更多人参与分享。项目小组致力于打造一个分享知识、经验和技术的平台。本平台既能够能供大家分享自己的知识经验，同时又能提供有针对性咨询服务，包括音频、视频等多媒体形式。与用户交互的部分以微信小程序的形式呈现，另包括一个能实现审批、监控等功能的后台
仿知乎前端页面
10-12
包括主页、发现、话题、话题广场、个人中心、 设计技术：angularjs、spring、路由 下载后用IDEA导入 找到index.html然后用浏览器打开
java课程设计基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip
11-28
java课程设计java课程设计基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zipjava课程设计java课程设计基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zipjava课程设计java课程设计基于Servlet+MySql+JSP的简易仿...
期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip
11-27
期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip期末大作业基于Servlet+MySql+JSP的简易仿知乎登录注册页面.zip期末大作业基于Servlet+...
仿知乎界面源码
12-30
仿知乎界面的源码，界面和知乎界面差不多，有兴趣的可以下载 ，看看Android 代码
知乎网站的登录前端源码
02-28
登录和注册动态可视界面
Vue3.0+TS 仿知乎
11-09
仿知乎每天更新好文章，包括权威的时事解读、有趣的生活建议 　更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域 　长评优先展示 　离线下载功能，及时缓存近期的 30 篇文章
仿知乎登陆邮箱自动补全
03-12
仿知乎登陆界面邮箱自动补全，需要1分积分
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 631
【代码】用html写一个旋转菜单。
Web前端开发之HTML_3
zx1026409886的博客
04-23 903
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML随机点名程序
m0_65992344的博客
04-22 316
HTML随机点名程序
如何创建响应式HTML电子邮件模板
晓风晓浪
04-20 1171
在这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。这个项目非常适合渴望掌握电子邮件设计基础的新手！（本文视频讲解：java567.com）
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 445
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
springboot 仿知乎
01-08
springboot 是一个用于构建企业级应用程序的开源框架，而知乎是一个知识分享社区。如果要使用 springboot 来仿制知乎，首先要设计和实现用户相关的功能，包括用户注册、登录、个人信息管理等。可以使用 springboot 的安全框架来保护用户信息的安全，并且可以使用数据库让用户的个人信息得以存储和管理。 其次，知乎主要提供了问题和回答的功能。利用 springboot 的 web 开发功能，可以设计并实现类似的问题发布和回答功能，同时也可以加入评论和点赞等交互功能。 此外，知乎还提供了关注和推荐功能，可以使用 springboot 来实现用户之间的关注和推荐功能，以便让用户更好地发现、关注和分享内容。 最后，springboot 也支持前后端分离方案，可以使用前端框架如 Vue.js 或 React.js 来搭配实现知乎的前端界面，这样可以更好地实现知乎的页面交互效果。 总的来说，利用 springboot 来仿制知乎，可以充分利用其快速开发和便捷部署的特性，快速地实现一个类似知乎的知识分享社区应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值