[置顶] CSS+DIV总结
HTML在Web飞速发展的过程中起着重要作用，有着重要地位。HTML初衷是为了表达标签（<p>、<table>）的内容信息。同时文档布局由浏览器来完成，不使用任何格式的标签。慢慢地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、行内样式
<body> <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p> <p style="color:#000000; font-style:italic;">正文内容2</p> <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p> </body>
在行内直接写样式，很简单的对某个元素单独定义样式。
2、内嵌式
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>
有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!--注释 -->）隐藏内容而不让它显示。
3、链入外部样式表
<link href="1.css" type="text/css" rel="stylesheet">
4、导入内部样式
<head> <style type="text/css"> <!-- @import url(1.css); --> </style> </head>
导入外部样式表存在于内部样式表中。必须在样式表开始部分，在其他内部样式表上面。
总结：学习CSS+DIV重在理解和操作。还需要多练习。不论哪门语言都有其优缺点。
Div+CSS的优点：
1、减少页面的加载时间
页面体积变小，浏览速度变快。
2、易于修改
HTML页面和CSS代码是分开的，将网页的内容和表现形式分离。修改设计时只需要改一下样式即可，不会打破页面中其他样式的布局，这种特点是table不具备的。
3、保持视觉的一致性，强大的字体和排版能力
把样式都放在CSS文件中，避免了不同区域或页面的效果偏差。
4、有利于搜索引擎爬虫：一般而言相同页面html文件table布局字节大于DIV+CSS布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。
缺点：
1、开发技术高：要兼容各浏览器以及版本浏览器要求较高。
2、开发时间长：比表格定位复杂的多，很容易出现问题。
3、开发成本相对table高：高技术和长时间决定了高成本。
[置顶] CSS+DIV总结的更多相关文章
- [置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;
都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...
- [置顶] CSS语言精粹
本文主要是对CSS中一些比较重要的高级部分作了一些整理,这些内容也许不是经常使用,但是都很强大.本文将长期更新. 边框 CSS2.1 规定:元素的背景是内容.内边距和边框区的背景.设置背景颜色时是没有 ...
- jquery——制作置顶菜单
置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 自定义置顶TOP按钮
简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...
- js之滚动置顶效果
0.js获取高度 ? 1 2 3 4 5 6 document.all // 只有ie认识 document.body.clientHeight // 文档的高,屏幕 ...
- JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏
一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- css3特效第二篇--行走的线条&&置顶导航栏
一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...
随机推荐
- HDU 1290 献给杭电五十周年校庆的礼物
题解:http://www.cnblogs.com/forever97/p/3522238.html #include <cstdio> int main() { int n; while ...
- JSP中的相对路径和绝对路径(转)
1.首先明确两个概念: 服务器路径:形如:http://192.168.0.1/的路径 Web应用路径:形如:http://192.168.0.1/yourwebapp的路径 2.关于相对路径与绝对路 ...
- Objective-c Category（类别）
category是Objective-c里面最常用的功能之一. category可以为已经存在的类增加方法,而不需要增加一个子类. 类别接口的标准语法格式如下: #import "类名.h& ...
- Objective-c 数据类型
这里列出Objective-c中独有数据类型: 一.字符串 在Objective-c中,字符串常量是由@和一对从引号括起的字符串序列.比如:@"China".@"obje ...
- CSS一些设置用法
今天就简单写点的知识点 1. CSS字体样式小结 1) text-indent :值 实现段落首行缩进功能 (在起初我们编写段落时为了实现首行缩进两个字符时用的是HTML的标签元素&nb ...
- 使用JQuery插件，排序Gridview的某个字段
1. 前台代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server" ...
- 精通Activity
在平时开发中,Activity我们每个人应用的都滚瓜烂熟,回忆起来没有太难的地方,但是我们学习知识不应该只知其一不知其二,这样才能在学习的道理上越走越远,今天我要给大家分享的内容会让大家明白一些And ...
- Android学习之Drawable（一）
Drawable有很多种,它们表示一种图像概念,但它们不全是图片.Drawable是什么呢?下面是Google Android API中的定义: A Drawable is a general abs ...
- c 占位符
%d, %i,代表整数,%f-浮点,%s,字符串,%c,char. %p 指针,%fL 长log,%e科学计数,%g 小数或科学计数. C语言中的格式占位符: %a,%A 读入一个浮点值(仅C9 ...
- java线程中的sleep／wait/notify/yield/interrupt方法 整理
java线程中的sleep/wait/notify/yield/interrupt方法 sleep 该方法能够使当前线程休眠一段时间 休眠期间,不释放锁 休眠时间结束之后,进入可执行状态,加入到线程就 ...