HTML+CSS制作知乎登录页面

由于没有用上js相关的技术，所以无法做出相应的功能，，只能做出知乎登录页面的用密码登录的界面，不能切换到免密码登录。相关界面的图片如下：

网页上的原图：

我做的：

具体代码如下：

首先要创建一个reset.css的文件，因为每个浏览器的设置都不一样，为了防止制作的页面布局错乱，需要将浏览器的布局重置。

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}html,body{width: 100%;height: 100%;
}a{text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

页面设计如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>知乎 - 有问题，上知乎</title><link rel="icon" type="image/x-icon" href="img/favicon.ico"><link rel="stylesheet" href="CSS/reset.css"><style>body {background-color: #B8E5F8;background-image: url("img/知乎背景.png");background-size: 100%;background-attachment: fixed;}#logo > img {width: 128px;height: 81px;}#logo {text-align: center;margin-top: 115px;margin-bottom: 24px;}#content {width: 350px;height: 312px;background-color: white;margin: auto;padding: 0px 24px;border-radius: 4px 4px 0px 0px;position: relative;}#content_login_select {font-size: 16px;}#content_login_select > span {height: 18px;padding: 0px 24px;display: inline-block;}#content_login_select > span:first-child {margin-right: 20px;}.chick {padding: 20px 0px 18px 0px !important;font-weight: 700;border-bottom: #0084FF solid;}#ewm {position: absolute;width: 52px;top: 0px;right: 0px;border-radius: 0px 4px 0px 0px;}#img_div {position: absolute;border: 26px #fff solid;border-top: 26px rgba(0, 0, 0, 0) solid;border-right: 26px rgba(0, 0, 0, 0) solid;top: 0px;right: 0px;border-radius: 0px 2px 0px 0px;}#content_login_form input:not([type=submit]) {width: 100%;height: 42px;border: none;border-bottom: 1px rgba(0, 0, 0, .1) solid;outline: none;margin: 7px 0px;font-size: 14px;}#content_login_form {position: relative;padding-top: 20px;}#content_login_form > form > div {padding: 5px 0px;}#content_login_form > form > div > a {font-size: 0.9em;color: #175199;}#content_login_form > form > div > a:last-of-type {float: right;color: #8792a8;}#content a:hover {color: #677288 !important;}#content_login_form input[type=submit] {width: 100%;height: 36px;border: none;background-color: #0084FF;color: white;margin-top: 30px;font-size: 14px;border-radius: 3px;}#content_login_form input[type=submit]:hover {background-color: #0074dd;}#content_login_form img {position: absolute;right: 0px;top: 100px;}#content_login_bottom {width: 356px;height: 26px;background-color: #F6F6F6;border-radius: 0px 0px 4px 4px;margin: auto;font-size: 13px;padding: 17px 21px;color: #8792a8;}#content_login_bottom > div:first-of-type {float: left;}#content_login_bottom > div:last-of-type {padding: 6px 0px;float: right;}#content_login_bottom > div:last-of-type > a {color: #8792a8;}#content_login_bottom a {color: #8792A8;}#content_login_bottom > div:last-of-type > a:hover {color: #1751a5;}#social_contact_login {width: 350px;height: 16px;border-radius: 3px;background-color: #fff;padding: 22px 24px;margin: auto;margin-top: 24px;color: #8A95AA;text-decoration: none;}#social_contact_login a {display: inline-block;margin: 0px 6px;color: #8A95AA;}#social_contact_login > div {float: right;}#social_contact_login > span {float: left;}#btn_dow_app {text-align: center;}#btn_dow_app > a {width: 400px;height: 22px;display: inline-block;border-radius: 3px;background-color: #fff;margin-top: 24px;padding: 10px 0px;color: #0E8BFF;}#btn_dow_app > a > img {width: 22px;}#btn_dow_app span {position: relative;bottom: 5px;left: 7px;}#content_bottom{text-align: center;margin-top: 150px;font-size: 13px;color: #fff;}#content_bottom a:hover{text-decoration: underline;}#content_bottom img{width: 16px;}#content_bottom a{color: #fff;}#content_bottom>div{margin: 8px;}#content_bottom>div>*:after{content:' · '}#content_bottom>div>*:last-child:after{content: ' ';}</style>
</head>
<body>
<div id="logo"><img src="img/1.png" alt="">
</div>
<div id="content"><div id="content_login_select"><span>免密码登录</span><span class="chick">密码登录</span></div><img src="img/二维码.png" alt="" id="ewm"><div id="img_div"></div><div id="content_login_form"><form action="#" method="post"><input type="text" name="userName" placeholder="手机号或邮箱"><input type="password" name="password" placeholder="密码"><br><img src="img/yj2.png" alt=""><div><a href="#">海外手机号</a><a href="#">忘记密码？</a><br></div><input type="submit" value="注册/登录"></form></div>
</div>
<div id="content_login_bottom"><div>未注册手机未注册手机验证后自动登录<br>注册即代表同意<a href="#">《知乎协议》</a><a href="#">《隐私保护指引》</a></div><div><a href="#">注册机构号</a></div>
</div>
<div id="social_contact_login"><span>社交账号登录</span><div><a href="#"><img src="img/wx.png" alt=""><span>微信</span></a><a href="#"><img src="img/qq.png" alt=""><span>QQ</span></a><a href="#"><img src="img/vb.png" alt=""><span>微博</span></a>
</div>
</div>
<div id="btn_dow_app"><a href="#"><img src="img/zhi.png" alt=""><span>下载知乎 App</span></a>
</div>
<div id="content_bottom"><div><a href="#">知乎专栏</a><a href="#">圆桌</a><a href="#">发现</a><a href="#">联系我们</a><a href="#">来知乎工作</a><a href="#">注册机构号</a></div><div><span >© 2019 知乎</span><a href="#">京 ICP 证 110745 号</a><img src="img/ga.png" alt=""><a href="#">京公网安备 11010802010035 号</a><a href="#">出版物经营许可证</a></div><div><a href="#">侵权举报</a><a href="#">网上有害信息举报专区</a><a href="#">儿童色情信息举报专区</a><span>违法和不良信息举报：010-82716601</span></div>
</div>
</body>
</html>

HTML+CSS制作知乎登录页面相关推荐

html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
canvasnest 移动距离_GitHub - XiaoxinJiang/canvas-nest: 仿知乎登录页面canvas-nest
canvas-nest 仿知乎登录页面canvas-nest 首先上效果图: 因为使用gif图片的原因,线条不是很清晰,大家可以到我的博客观看效果:http://cherryblog.site/ ,( ...
html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...
HTML5+Canvas知乎登录页面动态线条背景动画代码 body{ text-align: center; background: #F7FAFC; overflow: hidden; backgr ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
php制作登录页面的过程_一个用Html制作的漂亮登录页面
这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先来看看样子. html源码: Login Login 登录 css代码: CS ...
HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
用PHP制作简单的登录页面
题目要求: 登录页面:设计一个登录页面,获取登录表单中的用户名和密码,如果用户名为"admin",密码为"123456",则提示登录成功.效果参考下图: 代码: ...
java制作网易邮箱登录页面_Page Object实例(一) - Java + Selenium 登录163邮箱
Page Object 是什么: Page Object(selenium wiki)是Selenium2开始提供的一种代码设计模式. 其核心思想是把web页面的元素查找及操作和页面测试分离开. 这样 ...

HTML+CSS制作知乎登录页面

HTML+CSS制作知乎登录页面相关推荐

最新文章

热门文章