初学者用div+css结构写网页的几个误区

  网页的制作中对于用div和css结构写静态页目前已经很成熟,但许多新入行的朋友对于使用div和css结构还有很多误区,这些误区也是我曾经经历过的并且被“老鸟”指正的地方,所以总结下来分享给大家,希望对写网页有所帮助。

  

  1、用div+css结构制作静态html网页不等于彻底抛弃古老的table写法。之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦。

  在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人、发布时间、信息标题、联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写6184.html">数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似excel数据的地方,也建议用table来写。

  2、div+css结构不等于通篇区域都用div包起来。遇到一个区块就用一个div标签,这样你写完代码后全篇都是div,失去了语义的存在价值,区块修改起来也不容易找到,合理的利用dl、ul、ol、span、等标签,不仅让你的网页看起来条理清晰,而且修改起来很方便,见名知意,比如你要修改一个新闻列表,先找到新闻列表所在的div或者dl标签,然后再找其中的ul,修改具体内容就很容易。

  3、并不是css文件一定要和html代码分开。之所以将css文件和html分开,是因为有些css同时为多个页面服务,而用户访问时css文件可以缓存在本地,这样下次再访问其他页面时就不用重复加载css,可以节约时间和流量,提高访问速度,但是如果你的页面有些区域的css是独一无二的,其他页面用不到的,就不用把css剥离出去,直接用style标签包括在html网页里就可以。

  4、用div和css写网页一定要在不同类型和不同版本的浏览器进行测试。建议最好是同时打开多个浏览器,如果说你认为你的网站访客还没有养成使用火狐、谷歌等浏览器的习惯,那最少也得兼容ie6、7、8几个版本,由于软件限制,没有办法在一个电脑上装不同版本的多个浏览器,因此要借助版本模拟软件,我常用的是ietest,用来测试网页足够了。

  对于经验不太丰富的页面制作者来说最好是写一个小区块就在不同浏览器下看一看效果,如果出现问题可以及时调整代码,不要只在一个浏览器里测试,一口气写完,那么当你在其他浏览器测试时发现网页奇形怪状时你就抓狂了(我曾经就这么干过)。

  总结的要点暂时就这么多,剩下的就是拼写代码的功力了,建议新手还是不要用代码提示类的软件,最好是自己动手写出完整的语句,当你写熟练的时候你会发现你写代码的速度比用代码提示要快的多。

  文章来源:建站江湖 http://www.sunfei.net (作者:孙飞)

时间: 2024-10-06 14:08:18

初学者用div+css结构写网页的几个误区的相关文章

初学者用div+css结构写静态网页的几个误区

网页的制作中对于用div和css结构写静态页目前已经很成熟,但许多新入行的朋友对于使用div和css结构还有很多误区,这些误区也是我曾经经历过的并且被"老鸟"指正的地方,所以总结下来分享给大家,希望对写网页有所帮助. 1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数

DIV+CSS制作的网页如何让网页居中

 我写网页是包在一个叫 #container 的DIV中的,所以这里主要讲一下BODY与#container之间的关系.     先看一下body的CSS样式:     body{ margin:0;padding:0;text-align:center;}     这里的body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触.然后text-align:center 把body的内容全部居中,这样就包括了#container也一起居中了.     再来看一下#c

DIV+CSS布局的网页对网站SEO的影响

css|seo|网页 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处. 表格的嵌套问题 很多网站如何推广的文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实.我的几项实验结果没有完全出来,但根据目前掌握的情况来看,spider爬行Ta

DIV+CSS常用的网页布局代码

   单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }  #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  两行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center;}  #content-top { margin-left:auto

DIV CSS标准制作网页学习之学习DTD的元素

css|标准|网页 在一个DTD中,XML元素通过DTD元素声明来进行声明. 声明一个元素 在DTD中,XML元素通过元素声明来进行声明.元素声明使用下面的语法: <!ELEMENT 元素名称 类别> 或者 <!ELEMENT 元素名称 (元素内容)> 空元素 空元素通过类别关键词EMPTY进行声明: <!ELEMENT 元素名称 EMPTY> 例子: <!ELEMENT br EMPTY> XML例子: <br /> 只有PCDATA的元素 只

div和css网页制作:初学者使用div和css误区

文章简介:初学者用div+css结构写网页的几个误区. 网页的制作中对于用div和css结构写静态页目前已经很成熟,但许多新入行的朋友对于使用div和css结构还有很多误区,这些误区也是我曾经经历过的并且被"老鸟"指正的地方,所以总结下来分享给大家,希望对写网页有所帮助. 1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义

div+css做企业网站系列教程之一

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 跟天豪学div+css做企业网站系列之一 现在做网站流行用什么写网页代码?用table做网站已经不流行了,现在流行用什么做网站吗?接下来, 跟天豪学div+css做企业网站,你可以学到div+css为什么会那么流行用来做网站. 我们先从简单的企业网站讲起,用div+css来写网页代码. 所有网站第一步:构思 不管你是用word还是用ps,或者

DIV+CSS网页布局对于网站的好处

  一.代码精简 采用DIV+CSS布局使代码很精简,这一点相信对此方法熟透的朋友都有所了解的都知道,css文件可以在每一个网页中使用,只要调用就可以,采用table表格修改一些页面的话就很麻烦了,如果是一个门户网站的话,要手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是这要是在css中只要改一个代码就可以了 二.表格嵌套 使用Table布局,为了达到一定的视觉效果,不得不套用多个表格,这样不仅表格会很多,还很乱;所以使用table为了达到很好的视觉效果,就要嵌套很多表格,这就会有

DIV+CSS网页布局和TABLE相比有哪些明显优势

DIV+CSS是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种样式制作定位. div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离. div 是标签 css是层叠样式表(css样式) DIV CSS高级布局已逐渐流行,