没有合适的资源?快使用搜索试试~ 我知道了~
DIV CSS基础教程-15页word资料.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 43 浏览量
2022-11-26
19:03:26
上传
评论
收藏 38KB DOCX 举报
温馨提示
试读
15页
...
资源推荐
资源详情
资源评论
DIV CSS 基础教程
DIV+CSS 基础教程
第一节了解 DIV+CSS
一、什么是 DIV+CSS DIV 元素是 html(超文本语言)中的一个元素,
是标签,用来为 HTML 文档内大块(block-level)的内容提供结构和背景
的元素。DIV 的起始标签和结束标签之间的所有内容都是用来构成这个
块的,其中所包含元素的特性由 DIV 标签的属性来控制,或者是通过使
用样式表格式化这个块来进行控制。
css 是英语 Cascading Style Sheets(层叠样式表单)的缩写,它是
一种用来表现 HTML 或 XML 等文件式样的计算机语言。
DIV+CSS 是网站标准(或称"WEB 标准")中常用术语之一,通常为了
说明与 HTML 网页设计语言中的表格(table)定位方式的区别,因为
XHTML 网站设计标准中,不再使用表格定位技术,而是采用 DIV+CSS 的
方式实现各种定位。
HTML 语言自 HTML4.01 以来,不再发布新版本,原因就在于 HTML 语
言正变得越来越复杂化、专用化。即标记越来越多,甚至各个浏览器生
产商也开发出只适合于其特定浏览器的 HTML 标记,这显然有碍于 HTML
网页的兼容性。于是 W3C 组织进而重新从 SGML 中获取营养,随后,发布
了 XML,XML 是一种比 HTML 更加严格的标记语言,全称是可扩展标记语
言。但是 XML 过于复杂,且当前的大部分浏览器都不完全支持 XML。于
是 XHTML 这种语言就派上了用场,XHTML 语言就是一种可以将 HTML 语言
标准化,用 XHTML 语言重写后的 HTML 页面可以应用许多 XML 应用技术。
使得网页更加容易扩展,适合自动数据交换,并且更加规整。
二、DIV+CSS 的优势
1、符合 W3C 标准。这保证您的网站不会因为将来网络应用的升级
而被淘汰。
2、对浏览者和浏览器更具亲和力。由于 CSS 富含丰富的样式,使
页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和
不变形。这样就支持浏览器的向后兼容,也就是无论未来的浏览器大
战,胜利的是什么,您的网站都能很好的兼容。
3、使页面载入得更快。页面体积变小,浏览速度变快,由于将大
部分页面代码写在了 CSS 当中,使得页面体积容量变得更小。相对于表
第 1 页
格嵌套的方式,DIV+CSS 将页面独立成更多的区域,在打开页面的时
候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使
得加载速度很慢。
4、保持视觉的一致性。以往表格嵌套的制作方法,会使得页面与
页面,或者区域与区域之间的显示效果会有偏差。而使用 DIV+CSS 的制
作方法,将所有页面,或所有区域统一用 CSS 文件控制,就避免了不同
区域或不同页面体现出的效果偏差。
5、修改设计时更有效率。由于使用了 DIV+CSS 制作方法,使内容
和结构分离,在修改页面的时候更加容易省时。根据区域内容标记,到
CSS 里找到相应的 ID,使得修改页面的时候更加方便,也不会破坏页面
其他部分的布局样式,在团队开发中更容易分工合作而减少相互关联
性。
6、搜索引擎更加友好。相对与传统的 table,
采用 DIV+CSS 技术的网页,由于将大部分的 HTML 代码和内容样式
写入了 CSS 文件中,这就使得网页中代码更加简洁,正文部分更为突出
明显,便于被搜索引擎采集收录。
三、CSS+DIV 网站设计的缺陷
尽管 DIV+CSS 具有一定的优势,不过现阶段 CSS+DIV 网站建设存在
的问题也比较明显,主要表现在:
1、对于 CSS 的高度依赖使得网页设计变得比较复杂。相对于
HTML4.0 中的表格布局(table),CSS+DIV 尽管不是高不可及,但至少要
比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不
要说初学者了,这在一定程度上影响了 XHTML 网站设计语言的普及应
用。
2、CSS 文件异常将影响整个网站的正常浏览。CSS 网站制作的设计
元素通常放在一个或几个外部文件中,这些文件有可能相当复杂,甚至
比较庞大,如果 CSS 文件调用出现异常,那么整个网站将变得惨不忍
睹。
3、对于 CSS 网站设计的浏览器兼容性问题比较突出。虽然说
DIV+CSS 解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用
出现异常,CSS+DIV 还有待于各个浏览器厂商的进一步支持。
第 2 页
4、CSS+DIV 对搜索引擎优化与否取决于网页设计的专业水平而不是
CSS+DIV 本身。CSS+DIV 网页设计并不能保证网页对搜索引擎的优化,甚
至不能保证一定比 HTML 网站有更简洁的代码设计。因为对于搜索引擎而
言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指
标。
如何更有效、更合理的运用 WEB2.0 设计标准,这需要很长时间的
学习和锻炼。而如何将 DIV+CSS 运用的更好,需要通过不断的实践和体
检,积累丰富的设计经验,才能很好的掌握这门技术。
第二节 CSS 布局标签
一、什么时候应该用 DIV?
DIV 元素是一个标签,但多层嵌套的 DIV 会严重影响代码的可阅读
性。什么时候应该用 DIV 虽然没有什么硬性的规定,但 DIV 更适用于大
体框架的定位。
例如我们要定义一块头部的区域,一般会这样定义一个 DIV:
ul id="navbar"
li id="articles"
Articles/li li id="topics"
Topics/li li id="about"
About/li li id="contact"
Contact/li li id="contribute"
Contribute/li li id="feed"
Feed/li
/ul h1 id="masthead"
a href="/"
img src="/pix/alalogo.gif"alt="A LIST Apart:For People
Who Make Websites"
/h1 No.214
这个例子定义了最上面的导航(ul 部分),左边的 logo 和 No.214 的
标记.
第 3 页
剩余14页未读,继续阅读
资源评论
不吃鸳鸯锅
- 粉丝: 8254
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功