CSS网页布局要避免滥用div元素,用DIV实现圆角效果.docVIP

CSS网页布局要避免滥用div元素，用DIV实现圆角效果 CSS网页布局应该避免滥用div元素一直是我们倡导的，以合适的HTML标签组织文档是CSS网页布局的基础。 　　页面中div与span元素的使用是一个新问题，我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。这也是一直提倡的。 　　如果你审视你的HTML文档，发现有着很多的div与span，那你就得换一个眼光来看问题了，是不是存在滥用的情况？ 　　是不是还有更好的标记来替代它们？若h1可以更好的表示所标记的内容，那你就得放弃p或span来定义。 　　或许这是一对矛盾，我们本身也较难把握该如何正确的使用它们，也或许我们根本就得不到一个明确的答案。 　　但有一点需要阐明，我们应该使文档在逻辑上具有清晰的结构，而且更加容易应用样式。 　　我们可以将div仅看着是一个容器，或者叫做文档的组成“部分”。 　　我们使用太多的容器，并不是一个明智的模式。 　　而恰到好处居于合理位置的容器，可以让整个文档显的很有条理。 1、提法问题： 从 CSS兴起到现在也有好多年了，我周围也有不少做过前端的朋友，为了这个问题，我曾经也很努力的纠结过。我缺点不少但是对于不懂的总是喜欢搞清楚原理。相信很多人经常都会听到“DIV+CSS”这种提法，从郑州网建的现状来看，这种提法的确误导了很多很多的人，我个人感觉还是应该叫做“CSS网页布局”比较合适，因为在XHTML+JAVASCRIPT+CSS这种结构下，每个角色所承担的作用是不同的，XHTML应该只负责结构上的标记描述。而DIV只是XHTML中的一个元素，而且这个元素相对于其它元素来说是个没有意义的元素。在网页布局上面可以使用的元素还有很多很多，比如P,STRONG什么的，有些地方我个人感觉用别的元素去代替DIV反而会使你的XHTML文档会更加的语义化。 table标签在css技术中的角色也从传统的布局转移到现在的表格上来了，我见过一些朋友，做了1年多css从来都没有用过table标签的，我和他们交流过，一提到前端布局，都会说table 过时了，现在流行div+css，所以他们对table基本上不用了，我做过一些css布局方面的工作，个人感觉table用起来还是非常灵活的，不像一些人说的那么死板。其实我们在互联网上会见到很多很多的场合在xhtml里面如果用table表述应该会比用div或其它元素来表述更加准确一些。而且现在建站会越多越多的考虑到一些SEO方面的因素。感觉XHTML文档语义化很重要。 怎么做网站 做网站要多少钱 2、注释 这应该不光是CSS 要注意的问题，我们程序员在写代码的时候应该多写些注释，这样写出来的代码就会非常清楚，我刚从学校出来时候写的一些小代码好多都是因为注释的不够清楚，现在也看不懂了，我想一个出色的程序员也应该考虑一些细节问题，形成自己的程序风格。当然，我在这点上面目前做的不是很完美，我会在以后的职业生涯中慢慢的去完善。注释可以让我们看出整估段代码的思路。 3、CSS布局技术的意义何在 在这里我去讨论这个问题有点班门弄斧的嫌疑，晓光老师教我们需要自信，这里我就谈谈我的一些想法，欢迎板砖 防爆膜玻璃贴膜 1、让XHTML、JAVASCRIPT、CSS各尽其能，代码分明，修改方便：XHTML负责描述一个网页的结构，JAVASCRIPT负责描述一个网页中的行为，而CSS负责描述网页的布局和外观。 2、让XHTML可以比传统布局技术中的HTML更加语义化，对于搜索引挚更加友好。 3、代码体积明显会比table布局技术要小很多，加载速度快，而且很多在table布局技术下无法实现的效果完全可以用CSS轻松实现。 防爆膜玻璃贴膜 4、随着CSS技术的不断发展，相信会在更多的平台上有优越的表现，比如手持设备上。 5、CSS中整图背景技术可以很大程度上减少请求次数，节约请求资源，降低服务器的压力。 也许很多人还在为制作圆角导航而烦恼，因为在传统制作圆角效果时大多数人的思路是采用3个DIV加上浮动来实现，这样制作时很多情况会出现兼容性问题。下面我给大家分享一种较为简便的方法轻松实现圆角效果。 我们以下图为例： 首先说明一下整个思路的结构： 我们采用3层DIV嵌套的方式，外两层是背景层，一层背景是左边圆角，二层是右边圆角，三层是导航菜单容器。整个结构图如下： 然后我们把素材图切片做好，这里需要注意的是，坐圆角肯右圆角尺寸必须一样，方法是把左圆角水平反转后存为右圆角即可。把切好的图片放在img文件夹下 左圆角： 右圆角：导航栏背景：然后把bg_l这个DIV加上左圆角背景bg_l,jpg，背景位置是left center（左对齐，上下居中）; 把bg_r这个DIV加上右圆角背景bg_r.jpg，