如何布局登录页面

2024-07-11 08:47:00

字体：大中小

来源：转载

供稿：网友

所谓login就是一般的登录页面，应用系统或网站后台都会用到这个login页面，因为通过这个页面的用户名密码信息的验证才能登进系统做必要的操作。所以这个页面这个页面的关键及重要性不言而语。另外本人也是砖引玉，借此更好向高手们学习靠近。

第一步：先从工具谈起，工具建议使用 dw cs4 + zen coding组合。关于这个组合的具体请参看我的另外几篇文章。

http://www.cnblogs.com/jikey/tag/zen+coding/

也许会有人问，不用dw cs4不行吗？不用zen coding不行吗？我的回答是：当然可以。但是用了这两个工具之后，使你的工作效率能提高许多。同样一件事情，你用别人一半的时间就做出来了。这就是你的优势，这就是竞争中最大的筹码。

第二步：拿到设计图，先别急着切，先分析。

因为切图不只是切图，设计不只是设计。你得考虑四方面的因素：

1. 合理的切图，语义准确，注释明了。

这个主要就是考虑不同的浏览器，不同的显示设备等等。

语义我就不说了，这不是一个入门分享，而是在掌握基本概念的基础上的实例分享。注释明了的意思是：不管是css,html文件都要写好注释，不然，过一段时间，某块代码块的含义你自己都会搞不清的，别说是其它人。

2. 切图的同时更要考虑程序嵌套问题。

因为你切完图的页面是交给程序员的，而程序员是看的不是设计视图，而是干干净净的代码。所以这时候考虑代码的缩进，合理的结构嵌套循环，无论是div还是table。就程序来说，它处理的是页面上有机的重复的html结构单元，而不只是为了得到浏览器里边最终效果。设计图里的内容是不可变的，而程序处理的内容是可变的。

另外：你的思维是平面散发式的，程序员的思维是直线逻辑性，有时候要站在别人的角度来思考问题，你会有更意外的收获。

3. 合理的把握时间。

整个项目有总体的时间，到你这儿有单独的页面开发时间。这个时间要掌握好，因为时间是质量的灵魂。

4. http请求，浏览器最简单的执行原理，计算机最基础原理。

这个是最主要的，好多开发者，都不知道什么是http请求，浏览器执行原理是什么东东，我现在用的浏览器版本，不太清楚，应该是ie9吧。

这里我想说的是：因为你从事的是这个行业，这个行业有它本身的游戏规则，不知道游戏规则，你就不知道怎么玩，知道了游戏规则你才会玩，才会玩得高兴，才会玩得high。才不会为了月底的那点俸禄而驱使你的灵魂走向坠落的深渊。

也有好多人纳闷一件事情，同样的代码在我边上机子可以，我这儿死活不行，杀了我也不行。ie可以,ff连图片都显示不了。其实要求也不高，你也不需要懂什么二次四次握手信号，你只是需要具象的把页面在浏览器执行的过程在脑海中模拟出来就行了。这个往深就不多说了，不是砖家不敢多言。

关于布局我再说两句，拿到一个设计稿效果图时该如何下手，怎么样的方案是适合seo，程序员，方便以后维护的，这都应该考虑到的问题。

但对一个刚入门的来说要求不高，先知道怎么样把设计图能变成xhtml + css 的文件就可以了。毕竟胖子不是一口吃成的，是一大口一大口吃成的。

xhtml + css 布局就我个人来看有三种：

1. 一种是自然布局。

所谓自然者，就是顺其自然，不用其它布局元素的修饰。

复制代码

上一篇：css屏幕居中的方法(推荐)

下一篇：web标准教程，帮你走进web标准设计的世界第一讲