div+css学习总结材料
div+css的自学总结
5.应用web标准制作网页，建立自己的web标准代码规范，提高开发效率
web标准现在还是在推广之中，没有一个成熟的模式，毕竟需要手写代码，你这时就可以根据自己的经验提出一些提高自己开发效率的方法，可以把一些常用的代码片段，习惯的css命名，和一些能够重复使用的功能模块作成代码剪辑提高代码的复用性！
使用<div>配合CSS为你的网页布局，而不要使用table了，这样的文章很多，实例也很多，推荐你去，div布局的好处很多，就提级几个实用的：
1.代码冗余小，网页打开速度快。
2.结构和表现分离了，你可以只通过css改变你的布局，而信息不变，这样维护和升级的成本降低了。
（3）总结两种定位的特征
绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积（父级）有关。相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。
绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行-index值为无单位的整数，大的在最上面，可以有负值（目前负值FF不支持）。
2.建立标准化的声明(DOCTYPE)和head
以前的网页，甚至大型的门户网站也连个声明也没有，就仅仅是<html>，现在要做的就是给你的网页加上声明，规范head区域，让搜索引擎和喜欢你的网站。
推荐写法
<!--(1)过渡型（Transitional）--> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--(2)严格型（Strict）--> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--(3)框架型（Frameset）--> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!--设定一个名字空间（Namespace）lang="zh-CN"/--> <htmlxmlnshtmlxmlns="/1999/xhtml"lang="zh-CN"> <head> <!--声明你的编码语言:GB2312/UTF-8/Unicode/ISO-8859-1--> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=GB2312"/> <metahttp-equivmetahttp-equiv="Content-Language"content="zh-CN"/> <!--为搜索引擎准备的内容--> <!--允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用robots.txt方法--> <metacontentmetacontent="all"name="robots"/> <!--设置站点作者信息--> <metanamemetaname="author"content=webmaster@,建站学/> <!--设置站点版权信息--> <metanamemetaname="Copyright"content=",版权所有"/> <!--站点的简要介绍(推荐)--> <metanamemetaname="description"content="网站制作,网页制作技术教程站"/> <!--站点的关键词(推荐)--> <metacontentmetacontent="网页,网页制作,网页教学,网页设计"name="keywords"/> <!--收藏夹小图标--> <linkrellinkrel="icon"href="/favicon.ico"type="image/x-icon"/> <linkrellinkrel="shortcuticon"href="/favicon.ico"type="image/x-icon"/> <title>网页标题</title> <!--连接样式表--> <linkrellinkrel="stylesheet"rev="stylesheet"href="css/style.css"type="text/css"media="all"/> <styletypestyletype="text/css"media="all">@importurl(css/style01.css);</style> <!--RSS--> <linkrellinkrel="alternate"type="application/rss+xml"title=""href="/"/> <!--JS--> <scriptsrcscriptsrc="/upload/tu/upload/js/jzxuecom.js"type="text/javascript"language="javascript""></script> </head> <body></body> </html> 3.学习div配合CSS进行网页布局
网页制作DIV+CSS工作心得体会
网页制作DIV+CSS工作心得体会一、头部的定义1、content=“IE=EmulatEiE7" 这句是把IE8 浏览器强制使用IE7的兼容模式2、头部的DTD定义要根据需要定义（一般不用管它）二、DIV布局1、居中问题：IE通过设置text-align属性为center可以实现，margin:0 auto;可以实现ＤＩＶ居中，但前提是DIV不能再float。
bodydiv id=”wrapper”/divbody#wrapper { Width:720px; Margin:0 auto; }2、Div之间默认是会自动换行的，如果要实现不换行就要应用float或借助绝对定位。
同级的元素尽量同时浮动或者不浮动，这样有利于控制和兼容性。
3、绝对定位问题：如果一个父Div的几个子Div要实现绝对定位，切记父Div的position属性一定要设置为relative，几个子Div的position则设置为absolute。
为了实现子Div的精准定位，子Div的高度和宽度都建议明确规定像素大小。
Z-index属性值为整数，属性值大的在上层。
Left、right、top、bottom、四个属性控制子DIV的位置。
4、外连文件式CSS放在在网页的〈head〉与〈/head〉之间加上一句这样的代码：〈link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件名）" type="text/css"〉5、首行缩进“text-indent”右面的缩进单位选择框中“em”指的就是字符位（1汉字）。
6、盒子模型虚线内部是内容显示的地方，黄色的地方是算在border里面的，同时背景图片也是计算黄色区域的面积的（padding与背景图片这样经常搭配实现一些效果的）。
三、CSS样式1、CSS权重（优先级）div class="case1" id="case2" style="cloor:red"/divstyle.case2{样式内容}#case2{样式内容}/style以上为例：权重最高的是style="cloor:red"，然后是ID="case2" 最后是class。
div+css学习笔记
DIV+CSS学习笔记DIV+CSS学习笔记 0一、css基础知识 (2)（1）样式表代码写在哪？ (2)（2）在20130227.css文件中注释的写法： (2)（3）选择器的写法： (2)二、布局 (6)（1）块级元素的对齐方式：float:left; (6)（2）边框 (8)（3） overflow:值 (10)（4）边距 (11)三、背景图片和背景颜色 (13)（1）背景颜色： (13)（2）背景图片： (13)（3）背景图片平铺方向： (13)（4）背景图片定位： (13)四、文字和文本 (14)（1）文字：（指对一个一个的文字进行设置） (14)（2）文本：（两个文字以上合起来设置文本） (14)五、伪类 (14)（1）链接标签伪类的使用： (14)（2）借用伪类实现样式切换： (15)（3）定义元素内第一个字符的样式（所有浏览器都兼容） (15)（4）定义元素内第一行字符的样式（所有浏览器都兼容）常用 (15)（5）定义同级元素的相同class的第一个元素样式（仅火狐（FF）兼容） (16)（6）在元素内容的前面插入文字 (16)（7）在元素内容的后面插入文字 (16)（8）定义鼠标指针：参考文档：css20.chm (16)六、定位 (16)（1）position:static: (16)（2）相对定位： (16)（3）绝对定位： (17)七、其他 (17)一、css基础知识（1）样式表代码写在哪？1：写在head标签里，叫内联样式表<head><style type="text/css">此处填写样式表</style></head>注：type=”text/css”意思是样式表的类型是以css的方式解释文本文件。
练习时常用此种方式。
2：写在div标签内，叫内嵌样式表<div style="width:100px;height:100px;background-color:red;"></div>注意：内嵌样式表写法优先级最高；不常用。
cssdiv学习心得
cssdiv学习心得竭诚为您提供优质文档/双击可除cssdiv学习心得篇一：基于css+DIV方式的网页设计的心得体会基于css+DIV方式的网页设计的心得体会现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。
我利用这一学期的时间，对网页设计进行了初步的认识和了解。
综合网站技术和设计人员的体会，css+DIV网站建设具有以下优势和不足，其中css网页布局的优点体现在如下方面：一、使页面载入得更快由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。
相对于表格嵌套的方式，DIV+css将页面独立成更多的区域，在打开页面的时候，逐层加载。
而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率由于使用了DIV+css制作方法，在修改页面的时候更加容易省时。
根据区域内容标记，到css里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性DIV+css最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
而使用DIV+css的制作方法，将所有页面，或所有区域统一用css文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录由于将大部分的hTmL代码和内容样式写入了css文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+css在这方面更具优势。
由于css 富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
DIV+CSS布局使用的个人心得
DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。
1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。
（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。
3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。
5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。
6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。
7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。
有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。
CSS+DIV学习笔记(史上最实用的CSS笔记)
CSS 学习笔记1、理解web标准的含义----为什么要用web标准*****将内容与样式分离*****2、web标准三部分与对应技术：结构--XHTML 表现--CSS 行为--JavaScript3、静态页面：XHTML+CSS4、理解表现与结构分离（1）内容：制作者放在页面真正想要让访问者浏览的信息（2）结构：是内容更加具有逻辑性和易用性（类似于标题正文列表）（3）用于修饰内容的外观的样式的东西（4）行为：对内容的交互及操作效果5、(1)使用XHTML结构化内容（2）使用CSS表现化内容（3）使用Javascript行为化内容：如果实用程序控制网页中的某些内容，为了标语区分，给内容加上一个唯一的标示符，我们称为ID。
<h1 id="main">标题</h1>（4）用javascript控制：用CSS再单独为id为main的元素加一个样式，就是加一个类.blue{background:blue;}6、网页开发的小工具火狐浏览器下的firebug插件左边html 右边CSS7、作为前端工作：要兼容的浏览器，IE6/7/8/9，火狐，谷歌等8、CSS:Cascading Style Sheets 层叠样式表可以作为html xhtml xml 的样式9、网页是否有CSS样式，测试--改变文字大小10、CSS语法结构body{font-size:12px;}body 表示我们想要控制的范围--针对的对象font--size表示样式的属性，就是是什么样的12px就是样式的值--属性的值格式：选择符{属性：属性值}11、CSS定义的技巧（1）为了将来的CSS代码优化，建议所有的属性值后面都要带上“；”（2）某些xhtml标签有自己默认的CSS属性值例如：h1 标签就有自己的属性值自动加粗字号较大（3）为了兼容主流的浏览器，为了统一效果，建议我们在设置时将所有元素的CSS属性，重置为标准的。
div+css js+jQuery两周学习总结
变量可以使用短名称（比如 x 和 y），也可以使用描述 性更好的名称（比如 age, sum, totalvolume）。
• 变量必须以字母开头 • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做） • 变量名称对大小写敏感（y 和 Y 是不同的变量）
声明（创建） JavaScript 变量
多行注释以 /* 开始，以 */ 结尾。
例：/* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */ document.getElementById("myH1").innerHTML="Welcome to my Homepage";
JavaScript变量
变量是存储信息的容器。
JS中使用的条件语句
条件语句用于基于不同的条件来执行不同的动作。 • if 语句 - 只有当指定条件为 true 时，使用该语句来执 行代码 • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码 • if...else if....else 语句 - 使用该语句来选择多个代码块之 一来执行 • switch 语句 - 使用该语句来选择多个代码块之一来执 行
Span和div的区别
Span和div的区别在于：
1）div是一个块级元素，可以包含段落、标题、表格等。 2）Span是行级容器标签，只能包含文字内容。它的前后 不会换行，没有结构的意义，纯粹是应用样式，当其他行 内元素都不适合时，可以使用span。
Css常用属性
样式表的常用属性分为以下几类：
• 我们使用 var 关键词来声明变量：var carname; • 在声明变量时对其赋值：var carname="Volvo"; • 声明新变量时，可以使用关键词 "new" 来声明其类型：var x=new Number;
DIV+CSS工作心得
DIV+CSS工作心得
第一、灵活应变。
DIV+CSS技术不断发展，新技术不断涌现，我们要不断学习，了解
最新的技术和趋势。
客户的需求也随着时间不断变化，我们需要及时调整和处理，力求达
到最佳的效果。
比如，当移动设备开始普及时，我们需要尽快学习响应式设计的技术，开
发适配移动设备的网站。
第二、代码优化。
优化代码的目的是提高网站的性能和用户体验。
我们需要了解网站
的访问时间、页面大小、JS文件大小等数据，寻找优化的空间。
比如，我们可以压缩CSS
代码和JS代码，减小网页的大小，从而提升网站的访问速度。
优化代码也需要考虑兼容性，在测试时要对各种浏览器进行兼容性测试。
第三、跨平台适用。
现在的网站用户使用的设备不仅仅有桌面电脑，还有平板、手机
等移动设备。
我们需要尽可能地多测和多平台开发，确保网站可以在不同的设备和浏览器
上运行良好。
根据用户的不同需求和使用习惯，我们要进行有针对性的CSS开发。
第四、细节处理。
在开发过程中，往往有很多细节需要处理。
这些细节包括按钮、链接、颜色等，虽然看似微小，但在网页用户体验方面却有着不可忽视的作用。
我们要注意
细节处理，从而体现网站的专业性和质量，以及使用户体验更加友好和便捷。
总之，DIV+CSS工作不仅需要技术实力，还需要勇于尝试和学习新技术，优化代码，
跨平台适用和注重细节。
只有在不断学习、不断尝试的基础上，才能更好地满足客户需求，将网站从好到更好的方向发展。
div css设计知识点
div css设计知识点<div css设计知识点>CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。
它为网页提供了丰富的样式和排版选项。
在这篇文章中，我们将介绍一些关于CSS的重要知识点，包括选择器、盒模型、布局、定位和响应式设计等。
选择器:选择器是CSS中用于选取元素并应用样式的方法。
常见的选择器包括标签选择器、类选择器、ID选择器和属性选择器等。
使用选择器可以精确地选择要样式化的元素。
1. 标签选择器：使用HTML标签名作为选择器，将样式应用于相应的元素。
例如，使用div选择器可以选择所有的<div>元素。
2. 类选择器：使用类名作为选择器，将样式应用于具有相同类名的元素。
例如，使用.class选择器可以选择所有class属性为"class"的元素。
3. ID选择器：使用ID名作为选择器，将样式应用于具有相同ID名的元素。
例如，使用#id选择器可以选择具有id属性为"id"的元素。
盒模型:盒模型是CSS中用于描述元素尺寸和布局的核心概念。
每个元素都被视为一个矩形框，包含内容区域、内边距、边框和外边距。
理解盒模型是进行网页布局和样式化的基础。
1. 内容区域：元素内部用于显示内容的区域，由元素的宽度和高度确定。
2. 内边距：内容区域与边框之间的空白区域，用于调整元素内容与边框之间的距离。
3. 边框：内容区域和内边距之间的线条，用于围绕元素显示边界。
4. 外边距：边框与相邻元素之间的空白区域，用于调整元素之间的距离。
布局:CSS提供了多种布局方法，用于控制元素在网页中的位置和排列。
1. 流式布局：元素按照其在HTML中出现的顺序自动从左至右流动，并在空间不足时换行显示。
2. 定位布局：通过将元素的定位属性设置为绝对定位或相对定位，可以精确控制元素的位置。
3. 弹性布局：使用CSS的flexbox属性可以创建响应式的布局，使得元素能够自动适应不同屏幕尺寸和设备方向。
div+css 学习笔记
一.建站流程平面设计---- 制作----- 程序1.平面设计：ps2.制作：div+css3.程序：asp；; php; jsp。
jQuery：制作和程序中常用二．简介html：超文本标记语言（目前常用版本xhtml，最新版本html 5.0）xml：可扩展标记语言xhtml：相当于html 4.0版本html标签<html></html> <head></head> <div></div> <p></p> <br />……常用标签：<div></div> <ul><li></li></ul> <dl><dt></dt><dd></dd><dl>CSS:（Cascading Style sheet）层叠样式表命名：一般以英文命名（首字母不能为数字）三．css 调用方法外联：在<head></head>之间调用<link href="css/css.css" rel="stylesheet" type="text/css" /> 内联：写在<head></head>之间<style rel="stylesheet" type="text/css" ></style>内嵌：嵌在标签里style=" "四．属性1. class （.）id （#）2.属性写在花括符里，每条用逗号隔开（内嵌style=" "）3.常用weight：宽height：高border: 边线margin：边距（margin：0 auto；居中）padding：填充color：字体颜色font-size: 字体font-family：字体float：浮动（使两个div 在同一行上）background:背景4.边线border：1px solid #ccc；border-top：1px solid #ccc；border-left：border-right：border-bottom：solid:实线dashed:虚线dotted: 点线double:双线5.边距margin-top:10px;margin-left:10px;margin-right:10px;margin-bottom:10px;简写margin：10px；margin：10px 20px 30px 40px; (由上面开始顺时针方向)margin：10px 20px; （上下10px 左右20px）边距还可以是负数6.填充padding-top:10px;padding-left:10px;padding-right:10px;padding-bottom:10px;简写padding：10px；padding：10px 20px 30px 40px; (由上面开始顺时针方向)padding：10px 20px; （上下10px 左右20px）7.文字font-family:"黑体", Arial;font-size：12px; 文字大小color:#555;文字颜色font-weight: bold;line-height：22px; 行高text-indent:2em; 首行缩进（单位em首行缩进）text-align:center; 水平对齐word-spacing;英文单词letter-spacing:1px;汉字或字母间距font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）简写font:italic bold 12px/22px arial, "宋体";文字两端对齐最后一行左对齐text-align:justify;text-justify:inter-ideograph;文字超出显示省略号text-overflow:ellipsis;white-space:nowrap;*white-space:nowrap;overflow:hidden;8.背景background-color：#fff；背景颜色background-image：url(../images/index2_01.png); 背景图片background-repeat：no-repeat; 背景不重复值：repeat-x x轴重复repeat-y：y轴重复background-position：10px 20px；（离左边10像素上边20像素）它的值可以是left right center top bottombackground-attachment:fixed; 背景浮动scroll(默认值)背景滚动简写：background: #fff url(../images/index2_01.png) no-repeat 10px 20px fixed;9.大小weight：宽height：高值可以的auto （自动搞）%；例如：weight:20px; weight:auto; weight:80%;min 最小值max 最大值例如：min-height：最小高度10.内隐藏属性overflowvisible 默认值。
DIV+CSS学习要点整理
font 字体 color 颜色 font-size 字体大小 text-align 文本位置 background 背景 margin 外补丁 padding 内补丁 border 边框 float 布局 CSS 布局常用的方法：float:none|left|right 取值： none: left: right: position:static|absolute|fixed|relative 取值： static: 循 HTML 定位规则 absolute: left，right，top，bottom 等属性相 对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父 对象，则依据 body 对象。
而其层叠通过 z-index 属性定义 fixed: (absolute)方式。
但是要遵守一些规范 relative: left，right，top，bottom 等属性在正常 文档流中偏移位置 选择合适的标签（区别与 table 布局的习惯..） 布局用：<div></div>； 文本用：<h1～6></h1>，<p></p> 图片用：<img></img> 列表用：<ul><ol><li><dl><dt><dd> 数据用：<table></table> 其他的：form，input，select标签选择器类别选择器(.class)ID 选择器(#id)集体声明:并列关系<style type=“text/css” > ｛body,td,th,#header,.one{color:blue;font-size:12px;} </style> 嵌套声明:从属关系 <style type=“text/css” > P h1{color:blue;font-size:14px;} </style> 混合声明:并列及从属关系 <style type=“text/css” > P H1,#header ul{color:blue;font-size:12px;} </style> 并且同一个 HTML 元素可以具有多个类，每个类中间用空格分开： .center {text-align: center} .col{color:green;} <p class="center col">这个段落将会居中并且绿色</p> 注意：类名的第一个字符不能使用数字！ 派生选择器功能就是根据文档的层级关系来确定某个标签的样式。
DIV CSS经验总结
DI V+CSS经验总结1、网页居中显示：需要设置两个地方，一个是body，一个是外边框di v。
CSS：2、文字垂直居中显示：在DIV中定义一个行高与其高度相同即可。
CSS：3、图片垂直居中显示：在<i mg>标签中加入al i gn="absmiddl e"即可。
4、清除浮动：如果在同一行上有几个DIV并列显示，那么必须在其中加入清除浮动代码，如果在一行上只是一个DIV，好象不必清除浮动。
CSS：HTML示例：5、三列结构中的的DIV写法：适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。
CSS：HTML示例：6、textarea在Fi reFox中不能自动换行的处理：有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了word-break:break-al l;word-warp:warp;也没有效果，怎么回事呢？主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。
解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。
7、设置<ul>表列缩进值：默认情况下，<ul>列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。
CSS：默认值是0，负值表示向左移，正值表示向右移。
8、水平导航条的制作示例：HTML代码如下：CSS中，首先清除ul的l i st-styl e、margi n和paddi ng：然后，可以将l i的di spl ay属性设置了i nl i ne或者设置fl oat为l eft，di spl ay l i可能会出现bug，所以我一般用fl oat l eft的方法：附：fi reFox IE css差异1针对Fi refox i e6IE7的Css样式现在大部分都是用!i mportant来hack，对于i e6和fi refox测试可以正常显示，但是ie7对!i mportant可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+Html”，现在用IE7浏览一下，应该没有问题了。
div+css 知识汇总
三、CLASS和ID的区别
id是先找到结构/内容，再给它定义样式；
class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
class(类)在同一个html网页页面可以无数次的调用相同的class类
只要你这个链接被点击过了，就会永远是visited，除非清空临时文件，明白否？
另外，如果你用的是空链接的话，只要点击过一个其他空链接也都会变成visiteN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式
＜/span>＜span>标识符允许你将一个段落分成不同的部分
clear 属性
如果您希望文本流在内联表格或图像的下一行继续输出，请使用 clear 属性，该属性有三个可选的值：left、right 或者 all，每个值都代表一个边界或两边的边界。
五、HTML <p> 标签
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
一、鼠标事件知识点：
:visited 已经访问过的链接，被访问过的链接会记录在ie的临时文件当中
:hover 这才是鼠标悬停事件
:link 一般的链接
:active 鼠标点下去的刹那会发生的事件
严格来说，不能成为事件，这些是css的伪类，可以附加在任何标签后面，比如td:hover
但是由于ie的不支持，这几个伪类只能用在a上面。
三、字间距
字间距设置用：letter-spacing:4pt;即可
div+css学习总结
在一个元素中不能有两个及以上 id 选择器，但可以有多个 class 选择器
2.8 将类选择器和 id 选择器相同部分的内容整合
2.9 课堂练习
练习 1
html: CSS:
练习 2
html： CSS：
3 块元素和行内元素 3.1 概念
3.2 各自存放的内容及相互转换
4 CSS 核心内容 4.1 流
HtmlPage1.html:
my.css:
2.2id 选择器
my.css:
2.3html 选择器
2.4 综合练习：
HtmlPage1.html: my.css:
第二天
2.5 通配符选择器
2.6 父子选择器
页面效果： HTML: CSS:
2.7id 选择器和类选择器同时修饰
html： CSS： 注：重叠的部分是以 id 的为准，如颜色样式，其他不重叠的部分还要正常显示 class 中的部 分.
（一）
（二）
对应页面：
（一） （二）
4.7 清除浮动 4.8 定位
relative
html CSS
absolute
static
fixed
（只能相对 body 定位）
5 仿 sohu 页面
图片在 div 中居中的方法
小知识：配置 eclipse 模板：
4.2 CSS 的盒子模型
案例：
页面： HTML： CSS：
4.3 盒子模型综合案例
该案例可以当做一个模板来使用，很多大型网站都有用到。
CSS：
HTML：
4.4. 盒子模型练习
CSS：
html
4Байду номын сангаас5 浮动
推荐学习总结--CSS+DIV
CSS+DIVCSS标准CSS(cascading style sheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。
CSS是1996由W3C审核通过，并且推荐使用的。
CSS的引入就是为了使HTML语言更好的适应页面的美工设计。
它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和PDA等）来设置不同的样式风格。
CSS 的引入引发了网页设计一个又一个的新高潮。
使用CSS设计的优秀页面层出不穷。
和HTML类似，CSS也是由W3C组织负责制定和发布的。
1996年12月发布了CSS1.0规范，1998年发5月布了2.0规范。
目前的有两个新版本正处于工作状态，即2.1版和3.0版。
然而，W3C只是一个民间技术组织，并没有任何强制力要求软件厂商的产品必须符合规范，因此目前流行的浏览器都没有完全符合CSS2.0的规范，这也为设计师设计网页带来了不便。
传统HTML的缺点在CSS没有引入页面之前，传统的HTML语言要实现页面美工设计是十分麻烦的。
例如在一个网页中加一个<h2>标签定义的标题，如果要把它设为蓝色，并对字体进行相应的设置，则需要引入<font>标签，如下：<h2><font color=”#0000ff”face=”黑体”>CSS标签1</font></h2>看上去这样的修改并不是很麻烦，但是当页面的内容不仅仅只有一段，而是整个页面时，情况就变的很复杂了。
首先观察如下HTML代码，(01.html)<html><head><tilte>演示</title></head><body><h2><font color="#0000ff"face="幼圆">这是标题文本</font></h2><p>这里是正文内容</p><h2><font color="#0000ff"face="幼圆">这是标题文本</font></h2><p>这里是正文内容</p><h2><font color="#0000ff"face="幼圆">这是标题文本</font></h2><p>这里是正文内容</p></body></html>这段代码在浏览器中的显示效果是，3个标题都是蓝色黑体字，这时如果要将这4个标题改成红色，在这种传统的HTML语言中就需要对每个标题的<font>标签都进行修改，如果是一个规模很大的网站，并且需要对整个网站进行修改的话，那工作量将会是巨大的，甚至无法实现。
DIV和CSS总结
DIV和CSS总结IE6下，DIV容器和padding之和，是DIV所占区域的总宽度（IE8时DIV容器所占区域总宽度不需要计算padding）真实宽度=width+padding+border+margin!important强调声明前面的语句有效性。
比如设置了:padding:0px!important;padding:10px;后面的重要性就不如前面带声明的！一、设置为float的div在IE6下margin会加倍解决方法一：是在这个div里面加上display:inline。
但是会导致内容区域的第一行文字出现缩进，和之后的行不对齐，应该再加一层div解决如：＜#div id="imfloat"> 相应的css为#imfloat{float:left; margin:5px; /*IE下理解为10px*/ display:inline; /*IE下再理解为5px*/}解决方法二：通过!important这样的手段hack。
（这里面有3种形式）第一种：.div { background:orange;/*ff*/*background:green !important;/*ie7*/*background:blue; /*ie6*/ }第二种：.div { margin:10px;/*ff*/*margin:15px;/*ie7*/_margin:15px;/*ie6*/ }第三种：#div { color: #333; } /* ff */* html #div { color: #666; } /* IE6 */*+html #div { color: #999; } /* IE7 */二、IE6和IE8下的导航菜单有时候鼠标放上，IE8会有背景色而IE6没有，这时候要给区域加上高度和宽度，试试height:auto;width:88px二、在google、IE8、Firefox中margin-top的兼容在这些浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
DIV CSS总结
10.列表
要使列表水平显示，应使用代码float:left;
11.其他
display:block；内联元素块化
display:inline；块元素内联
对象宽度=width+padding+margin+border（左右）
对象高度=height+padding+margin+border（上下）
标示符规则：以字符开头，不能以数字、下划线等特殊符号开头
色彩的定义：color:rgb(255,0,0);color:#666666;color:yellow;
边框属性：border-style(边框样式)/border-width(边框宽度)/border-color(边框颜色)
border-right-style/border-left-style/border-top-style/border-bottom-style
border-style值为：
类选择器，如.test{font-size:14px;}，该样式应用于属性class="test"所应用的对象，该样式可以多次应用于同一网页的不同位置
复合选择器：交集选择器、并集选择器、后代选择器
交集选择器（直接连接），如h2.test{font-size:14px;}，主体应用
粗体：font-weight(bold/bolder/light/lighter)
word-spacing 属性增加或减少单词间的空白（即字间隔）。该属性不可用于中文。
3.背景属性：
背景颜色：background-color
背景图像：background-image(url("图像地址"))
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
div+css 第一天：
1初识CSS
1.1介绍
1.2原理图
1.3快速案例test.html:
1.4三个时期
主要容
1.6必要性案例：
使用<span>元素
1.7思考（滤镜——图片变成黑白色）
2 CSS的选择器——通配符，html，类，id
HtmlPage1.html:
my.css:
my.css:
2.3html选择器
2.4综合练习：
HtmlPage1.html:
my.css:
第二天
2.5通配符选择器
2.6父子选择器
页面效果：
HTML:
CSS:
2.7id选择器和类选择器同时修饰
html：
CSS：
注：重叠的部分是以id的为准，如颜色样式，其他不重叠的部分还要正常显示class中的部分.
在一个元素中不能有两个及以上id选择器，但可以有多个class选择器
2.8将类选择器和id选择器相同部分的容整合
2.9课堂练习
练习1
html:
CSS:
练习2
html：
CSS：
3 块元素和行元素3.1概念
3.2各自存放的容及相互转换
4 CSS核心容
4.1流
小知识：配置eclipse模板：
4.2 CSS的盒子模型
案例：页面：
HTML：
CSS：
4.3 盒子模型综合案例
该案例可以当做一个模板来使用，很多大型都有用到。
CSS：
HTML：
4.4. 盒子模型练习
CSS：
html
4.5 浮动
第三天
容回顾
4.6浮动理解强化
代码：（一）
（二）
对应页面：（一）
（二）
4.7清除浮动
4.8 定位
relative
html
CSS
absolute
static
fixed
（只能相对body定位）5 仿sohu页面
图片在div中居中的方法。