简陋的知乎登录界面[html+css实现]

这三天为了完成蓝线的第二次作业:做一个知乎的登录界面。花费了不少时间,现在把这个完成过程写成一个blog的形式,并附上鄙人的简陋代码。

题目要求:

编写HTML和CSS还原知乎的登陆页面(如果你已经登陆,需要先退出登陆),要求如下:

  1. 不需要实现点击效果,包括登陆标签、“注册知乎”按钮、“社交账户登陆”以及底下的一堆小链接
  2. 右上角的”下载知乎APP”鼠标放上去弹出二维码的效果需要实现
  3. 背景动画不需要,验证码用一张写死的图片就行
  4. 原网页在不同的屏幕下会有不同的显示效果,只需要实现在>740px的设备(笔记本电脑)上的版本就行

因为不需要实现各种点击效果以及动画效果,所以只用html+css即可实现题目的要求。先贴一下代码以及效果图:

代码:请移步我的github

效果图:

QQ图片20160213114541

 

其实我在github上也用注释的形式写出来了:边距的问题真的是有些坑,自己还是没有很好的理解盒模型的边距与元素的长宽关系,很多元素的长宽都是我对着浏览器调试出来的,论设计师的重要性二维码实现使用:hover结合display: none达到弹出效果的。而验证码图片则采用绝对定位定位至了表单里面。
css的确有很多很有趣的属性= =还好这次作业也算完成了吧,我真的很想进入blueline俱乐部,说几句题外话:看着其他当初也是嚷嚷着要进俱乐部,然后天天在俱乐部群里面水群的家伙,我貌似突然理解了ACM俱乐部为何禁止水群。水群绝对是降低生产力的方式。尤其是在计软这样的学院,一些人听学长说只专重技术就好不用管GPA,所以他们学了点半吊子的技术先不论他们到底学到了什么就开始在群里吹逼,各种互膜,以为能看懂一些程序员的笑话自己就是程序员了。说多了,你们既然浪费时间去水群,我就要用这些时间学习真正的技术,想起了长者的一句话:一句话也不说是最好的。
不过HIT的技术俱乐部里水群的情况也太严重了,还好微软ACM和蓝线之类的还是很好的。具体哪个俱乐部我也不说了,还好自己没加。

update 2016-02-14

一些注意事项:

  • 如果是针对某个元素的样式,一般不要使用标签选择器,而是用类或者id选择器
  • 可以利用属性的缩写形式,比如margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; 可以缩写成margin: 10px 20px 30px 40pxborderbackground, padding等系列也都有这样的缩写,这样可以让代码更简洁
  • 把相同的属性作为父元素的属性,然后让子元素使用inherit(很多属性的默认值就是inherit,这样就不需要再手动设置),比如这个页面基本上所有字体都是”Helvetica Neue”,那就可以设置bodyfont-family,然后让其它字体的子元素覆盖这个属性。这样不但可以简化代码,如果要修改也更方便。

发表评论

电子邮件地址不会被公开。 必填项已用*标注