写给刚刚接触web标准的新人们
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-05
| 很乱，而结构则使内容具有逻辑性、易用性。因此，可将上例中的文字结构化如下： 标题=〉盒模型（BOX Model） 正文=〉如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。 结构对于页面来说，是非常重要的，可以说它是一个页面的骨架，只有真正搞懂了“结构”的意义，才能实现表现和内容分离，保证页面的源代码语义清晰且简洁。 因此，当制作人员拿到一个设计图的时候，首先要做的，并不是划分切片，而是提取页面的内容将其结构化，而上例中的页面结构如图1所示。 
图1 页面的结构 此时，可以看到标题文字已经变大、表单有边框、文字也没有挤在一起，这是因为浏览器内有预制的css设定，规定了标题的大小、表单的样式等。虽然这个页面不好看，但是它却有很高的可读性，浏览者已经可以轻松地阅读页面的内容，而且，这个页面内没有为了装饰而存在的div或者其它什么代码。 还在想怎么用div来实现1px的横线？仔细看看css中border的定义吧！ 当然，为了更好的视觉效果，还是需要使用css来完成“表现”。 只有在确定了结构之后，才能确定css以及图片切片如何划分。划分切片已经从原来最重要的工作变得不那么重要了。 再回到div与table之争。 之所以提出用div布局来替换table布局，其实中心思想是让xhtml的各个标签能名副其实，专职专用。例如，上面的例子中，“盒模型（BOX Model）”使用h2（2级标题），而正文则用p（段落）。css可以应用在任何的xhtml标签上，因此不要嵌套一层又一层的div和span。 但是，table是否就被判了死刑不能再用了呢？ 当然不是！ table也是xhtml的标签之一，而且它有它的意义——放置表格类数据，表格内的数据也是内容的一部分。例如一个班学生的考试成绩表，自然要用表格来显示，如果也非要用所谓的div布局，那就是舍本逐末了。 理论搞清楚了，那么还有什么难点挡在我们实现表现与内容分离的路上？ 首先就是浏览器！ 这个问题无法回避，毕竟页面就是为了放在浏览器内看的。而不同的浏览器自然会有不同的表现方式。虽然ie在国内是应用最广的浏览器，但是现在使用firefox和opera等浏览器的也大有 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
上一篇: CSS:浏览器特定选择器介绍下一篇: CSS样式表中继承关系的空格与不空格
关于写给刚刚接触web标准的新人们的所有评论
