日期:2014-05-17  浏览次数:20667 次

站在DIV+CSS的顶端

      作为一个程序员,不能只学习技术,适当的时候需要站的高一点,这样才能看的更远,才会取得更高的成就!

   如果你是做Web开发的,那么DIV+CSS将是我们学习的基础,很多人认为DIV+CSS很简单,的确如此,一个好的程序员,几乎可以模仿出所有显示的网页,并实现非常炫的页面特效,给人耳目一新的感觉,我也经常为能够看到一个漂亮的网页而兴奋。但是如果学习停留的层次仅限于此,那么除了做一个码工还能干什么呢!

 

全局思考问题的意识

 

   任何页面设计首先要做的就是用DIV设计框架,例如考虑页面整体上应该是什么样子的结构,是上、中、下三层,还是左、中、右三层,又或者只有其中的一部分等等。

 


 

<div style="border:1px solidred;margin:1px;height:100px;">这是top部分</div>
<div style="border:1px solidred;margin:1px;height:500px;">这是middle部分</div>
<div style="border:1px solidred;margin:1px;height:100px;">这是bottom部分</div>
 
<div style="border:1px solidred;margin:1px;width:200px;float:left;">这是left部分</div>
<div style="border:1px solidred;margin:1px;width:400px;float:left;">这是center部分</div>
<div style="border:1px solidred;margin:1px;width:200px;float:left;">这是right部分</div>

 

   尽管这已经成为了所有Web开发人员做网页的第一步,并且在此道路上混迹江湖很多年,但是这其中的智慧并不是所有人都会思考的。框架要求设计者有站在高处的思维能够从全局的角度思考问题,而不是一味的在一个层次上勇往直前,否则你的设计将是眉毛胡子一把抓,既没有清晰整体的架构也没有明确的细节处理!

 

找到共同之处

 

   完成DIV的框架设计之后,通常需要将页面元素进行分类,这样对页面样式的修改将会变得非常方便,比如常见的CSDN左侧的博客栏目都有他们共同的样式,这样当我们修改样式的时候,就可以尽可能的保证页面样式的统一,避免因样式不同而导致页面不堪入目!