站在DIV+CSS的顶端

开发 前端
再牛的技术也是看的见、摸得着的,只要想学、没有学不会的!但是思想的凝练却并不是谁都能做的,所以多思考、总结学习经验、提炼其中的方法才是各位读者进步的捷径!

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

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

全局思考问题的意识

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

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

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

找到共同之处

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

按照这种方式,针对上述的DIV代码,我们可以将它的公有成分抽象出来形成类,而在每个div块中保留他们的不同部分,代码如下

  1. <div class="style1" style="height:100px;">这是top部分</div>  
  2. <div class="style1"style="height:500px;">这是middle部分</div>  
  3. <div class="style1"style="height:100px;">这是bottom部分</div>  
  4.    
  5. <div class="style1"style="width:200px;float:left;">这是left部分</div>  
  6. <div class="style1"style="width:400px;float:left;">这是center部分</div>  
  7. <div class="style1"style="width:200px;float:left;">这是right部分</div> 

其中提出的公有成分放在CSS文件中,具体如下:

  1. .style1{  
  2. <SPAN style="WHITE-SPACE: pre"> </SPAN>border:1pxsolid red;  
  3. <SPAN style="WHITE-SPACE: pre"> </SPAN>margin:1px;  

对于Web开发者来说,公有部分的抽取是菜鸟和大鸟区别的重要部分!这种思考方式放在学习上就是:将我们未学过的放在学过的基础上进行,这其中的智慧,对于你我而言其实比学习很牛技术更值得推崇!

再牛的技术也是看的见、摸得着的,只要想学、没有学不会的!但是思想的凝练却并不是谁都能做的,所以多思考、总结学习经验、提炼其中的方法才是各位读者进步的捷径!

原文链接:http://blog.csdn.net/zs15932616453/article/details/7823956

【编辑推荐】

  1. 平时我都怎么组织CSS
  2. CSS 3D转换教程大放送
  3. 如何才能编写出兼容各浏览器的CSS
  4. 前端框架你究竟选什么
  5. CSS布局:40个教程、技巧、例子和最佳实践
责任编辑:张伟 来源: zs15932616453的博客
相关推荐

2010-08-25 09:11:57

DIVCSS

2010-08-23 14:30:14

DIV+CSS

2011-05-26 18:05:01

DIV+CSS

2010-08-24 11:25:06

DIVCSS

2011-05-17 09:51:27

Div+CSS

2010-08-27 14:05:40

DIV+CSS

2010-08-24 10:32:34

DIV+CSS

2010-08-30 10:46:13

DIV+CSS

2010-09-14 11:19:23

DIV+CSS技术

2010-08-25 12:47:40

DIVCSS

2010-08-30 13:09:40

DIVCSS

2010-08-16 15:19:35

DIV+CSS教程

2010-09-14 14:23:08

DIV+CSS

2010-08-30 15:55:54

DIV+CSS

2010-09-14 13:20:30

Div+CSS标准

2010-08-23 10:50:39

DIV+CSS

2010-09-03 13:51:59

DIVCSS

2010-09-14 12:58:41

DIV+CSS圆角

2010-08-16 16:17:21

2011-07-05 16:26:48

DIV+CSS
点赞
收藏

51CTO技术栈公众号