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

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

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

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

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  2. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  3. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  4. div+css基础教程

    本文存下来作为备忘. 第一节  了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...

  5. DIV+CSS布局的优势和弊端

    DIV+CSS的优势1.符合W3C标准.这保证您的网站不会因为将来网络应用的升级而被淘汰.2.对浏览者和浏览器更具亲和力.由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示 ...

  6. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  7. DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  8. H5学习小结——div+css创建电子商务静态网页

    使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. 【Android测试】【第十七节】Instrumentation——App任你摆布(反射技术的引入)

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处.  转载请注明出处:http://www.cnblogs.com/by-dream/p/5569844.html 前言 学习了上节之后,大家是否已经 ...

  2. Java提高篇——equals()方法和“==”运算符

    equals() 超类Object中有这个equals()方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public boolean equals(Object obj) { retu ...

  3. Hadoop+Spark:集群环境搭建

    环境准备: 在虚拟机下,大家三台Linux ubuntu 14.04 server x64 系统(下载地址:http://releases.ubuntu.com/14.04.2/ubuntu-14.0 ...

  4. !! 据说年薪30万的Android程序员必须知道事

    http://www.th7.cn/Program/Android/201512/742423.shtml Android中国开发精英 目前包括: Android开源项目第一篇——个性化控件(View ...

  5. BJFU 1057

    描述 斐波那契额数列,我们都知道.现在qingyezhu想求斐波那契的某项值对2的某次方的结果.你可以帮一下他吗?他好可怜哦!计算了N的N次方次都错了,也挨了ben大哥的N的N次方次的训了.我想你是个 ...

  6. 摸索js的3d全景

    先我在网上找到了一个例子,http://silali.vicp.net/three/emaple.html 完美实现3d全景,在详细查看这个例子后,发现他在手机上运行并不流畅,而且显不全并会卡顿. 我 ...

  7. install cygwin

    make clean

  8. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表

    系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...

  10. 介绍Android HAL的一篇好文章

    从Linux driver到HAL再到JNI再到Java都讲了一个遍,算是对HAL有一个基本的了解了,其中hw_module_t的设计非常巧妙,每个module都会有自己的特定函数,而HAL是不知道的 ...