[置顶] CSS+DIV总结_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 12:27:46

1426人浏览过

来源于php中文网

原创

html在web飞速发展的过程中起着重要作用，有着重要地位。html初衷是为了表达标签（

、

）的内容信息。同时文档布局由浏览器来完成，不使用任何格式的标签。慢慢地ie不断将新的html标签和属性添加到html规范中，创建文档内容清晰地独立于文档表现层的站点越来越困难。所以为了解决这个问题，创造出了html之外的样式即css层叠样式表。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

下载

立即学习“前端免费学习笔记（深入）”；

学习了一周CSS+DIV，总结如下：

立即学习“前端免费学习笔记（深入）”；

本视频主要讲的是用CSS+DIV进行网页布局。前半部分是一些基础的css样式，后面的是一些例子，根据例子来理解CSS+DIV的布局。把每一块都写成div，然后用CSS控制其样式进行美化布局效果，着重实际操作。

本视频主要包括CSS的基本语法与概念：设置文字、图片、背景、表格和菜单等网页元素的方法，以及CSS滤镜的使用。还有一些扩展知识：CSS与JavaScript、CSS与XML、CSS与Ajax的综合应用。后面还有几个大例子，通过大例子深刻理解了CSS+DIV布局。把一块内容放在一个DIV中，然后对其标签的id,class的样式在CSS中进行设置。保持了HTML代码和CSS代码的分离。

那么HTML中引入CSS的三种方式如下：

1、行内样式

正文内容1

正文内容2

正文内容3

在行内直接写样式，很简单的对某个元素单独定义样式。

2、内嵌式

 页面标题

有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示。

3、链入外部样式表

4、导入内部样式

立即学习“前端免费学习笔记（深入）”；

导入外部样式表存在于内部样式表中。必须在样式表开始部分，在其他内部样式表上面。

立即学习“前端免费学习笔记（深入）”；

总结：学习CSS+DIV重在理解和操作。还需要多练习。不论哪门语言都有其优缺点。

Div+CSS的优点：

1、减少页面的加载时间

页面体积变小，浏览速度变快。

2、易于修改

HTML页面和CSS代码是分开的，将网页的内容和表现形式分离。修改设计时只需要改一下样式即可，不会打破页面中其他样式的布局，这种特点是table不具备的。

3、保持视觉的一致性，强大的字体和排版能力

把样式都放在CSS文件中，避免了不同区域或页面的效果偏差。

4、有利于搜索引擎爬虫：一般而言相同页面html文件table布局字节大于DIV+CSS布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。

缺点：

1、开发技术高：要兼容各浏览器以及版本浏览器要求较高。

2、开发时间长：比表格定位复杂的多，很容易出现问题。

3、开发成本相对table高：高技术和长时间决定了高成本。

立即学习“前端免费学习笔记（深入）”；

解决HTML元素拼写错误导致的CSS样式失效及创建动态横幅效果

如何使用CSS调整重叠区域的颜色

构建交互式横幅：从HTML标签错误到CSS布局优化

CSS实现包含多元素Div的水平居中布局教程

使用CSS Flexbox实现动态内容卡片中按钮底部对齐

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：6.DIV+CSS排版技巧_html/css_WEB-ITnose 下一篇：控制div固定在页面的某个位置，用js感觉很麻烦 CSS更好一些_html/css_WEB-ITnose

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

xml格式相关教程

本专题整合了xml格式相关教程汇总，阅读专题下面的文章了解更多详细内容。

2026.01.19

PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践，涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例，帮助开发者掌握使用 PHP 构建实时通信与推送服务的完整开发流程，适用于即时消息与高互动性应用场景。

2026.01.19

微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全，阅读专题下面的文章了解更多详细内容。

2026.01.18

高德地图升级方法汇总

本专题整合了高德地图升级相关教程，阅读专题下面的文章了解更多详细内容。

109

2026.01.16

全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总，阅读专题下面的文章了解更多详细内容。

155

2026.01.16

C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立可测试、可维护、高质量的 C++ 项目体系。

2026.01.16