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

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

时间: 2024-10-07 06:09:03

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

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

标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获得了一

DIV+CSS实操一:经管系网页总体模块布局

首先我们先来打开经管系网页,看看网页效果是怎么样的.通过所学Web前端开发的知识,我们一步一步模仿出 标准的网页.我们知道DIV+CSS可以实现网页模块的总体布局,这基本取代了HTML中用table布局,DIV+CSS布局 更加灵活,改写代码方便. 经管系原网页截图: 我先开始做网页的整体模块布局草图: 下面开始编写代码: 第一次HTML代码: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W

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

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练习] 前四节课

DIV+CSS布局的优势和弊端

DIV+CSS的优势1.符合W3C标准.这保证您的网站不会因为将来网络应用的升级而被淘汰.2.对浏览者和浏览器更具亲和力.由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形.这样就支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是什么,您的网站都能很好的兼容.3.使页面载入得更快.页面体积变小,浏览速度变快,由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的

web前端开发教程:div+css的6个优点

关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来说,div+css是web设计标准,它是一种网页的布局方法,与传统中经过表格(table)布局定位的方法有所区别,它能够完成页面页面内容与体现相别离, 那么你在前端开发学习对div+css的优点了解多少呢?接下来Div css教程学习中,为大家介绍web前端开发中div+css的6个优点. 介绍web前端开发中div+css的6个优点 1.契合W3C规范标准.这确保您的网

浅谈div+css页面布局

解释:  DIV+CSS是Web设计标准,是一种网页布局方法.与传统的通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.“DIV+CSS”其实是错误的叫法,而标准的叫法应该是XHTML+CSS.因为DIV和table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式. 方法: 在HTML文档中加入CSS.css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,也是

div+css的优势

什么是div+css:在介绍div+css优势之前先来介绍一下什么是div+css.div+css是当下网页设计中最流行的词汇之一,它是一种网页布局方式.在XHtml标准中,不再使用table定位方式,而是通过CSS控制div来实现我们所需要的定位,即div+css布局.此种布局方式已经超越表格布局方式,成为当下最为流行的方式,当前主流的大型网站甚至中小企业网站都已div+css布局方式,可见它的优越性所在.div+css的优势:div+css网页布局相对于table布局方式具有以下几个主要的优

DIV+CSS简介

传统页面数据和布局都混合在一起,如下图: 而DIV+CSS存在下述优势: 1.符合W3C标准.微软等公司均为W3C支持者.这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰. 2.支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容. 3.搜索引擎更加友好.相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好. 4.样式的调整更加方便.内容和样式的分离,使页面和样式的调整变得更加方便. 现在YAHOO

如何用css和div写网页

先设计好框架,也就是容器,然后往里面塞东西,css是由外向里写,也就是先写外面大容器的css,在写内部小容器的css 结构如下图: css如下: 原文地址:https://www.cnblogs.com/xc1234/p/8603681.html