CSS+DIV学习笔记(史上最实用的CSS笔记)
DIV归纳
DIV归纳1.文件中只调用过一次的用id（占位的可以用class）2.反复用的用class3.尽量使用继承父级属性4.文字部分两端用<p></p>5.标题用<h></h>6.使用<dl><dt><dd></dd></dt></dl>设置属性7.空连接不要连接#8.尽量减少多余代码9.尽量减少css中新建样式10.文档中不要出现border(边)11.图片标签alt="xx"（无意义的图片标签使用alt=""）12.换行用<br></br>13.翻转的图片name要用有意义的名称14.所有id名要有意义15.“<”要用“&glt”代替16.空格用“ ”代替17.div要有结尾，例如<div id="index"> <!-- /index --></div>18.在文件里不能出现物理属性值19.图片必须有长和宽。
例如：<img src="images/localnavi_07.gif" width="3" height="10" alt="" />20.如果需要居中显示，要在外面设一个居中的，里面的要设置居左或居右，否则在火狐浏览器中无法正常显示21.javascript要在外部调用22.<body>中不要出现其他属性，如需要则在外部调用。
第6章Div标签与CSS样式表(4)-CSS语法
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
CSS超全笔记（适合新手入门）
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
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中会⼤⼤的问题。
十天学会DIV+CSS-7
标准之路首页CSS 版式布局DIV+CSS 教程DIV+CSS 实例常用代码站长杂谈技术文档资源下载图片素材今天我们开始学习《十天学会web 标准(div+css)》的html 列表，包含以下内容和知识点：⏹横向列表菜单 ⏹用图片美化的横向导航 ⏹css Sprites一、横向列表菜单前边学习过纵向导航菜单，又学习了float 属性，那么要实现横向导航菜单是不是很简单了，只需要列就可实现了。
把第四节的代码拿过来直接用，修改后的代码如下：提示：可以先修改部分代码后再运行 第七天 横向导航菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/x html1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { border: 1px solid #CCC; height:26px; background: #eee;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }</style></head><body>运行代码复制代码最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。
CSS知识点总结
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
css总结笔记
css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。
以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。
CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。
二、CSS 的语法
CSS 的语法包括选择器、属性和值等。
选择器用于选择网页中的元素，属性和值用于设置元素的样式。
三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。
通过设置这些样式，可以让网页变得更加美观。
四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。
为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。
六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。
可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。
七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。
通过使用CSS，可以让网页变得更加生动、美观和易读。
八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。
div+css笔记
DIV+CSS学习笔记Div是用于存放内容（文字，图片，元素）的容器Css是用于指定在div中的内容如何显示，包括这些内容的位置和外观快速入门案例（体验案例）：Css.html:<!--引入我的css--><link rel="stylesheet" type="text/css" href="my.css"></head><body><div class="style1"><img src="F:\photo\QzonePic\0.jpg" width="200"></div></body>My.css:.style1{/*宽度*/width:400px;height:300px;background-color:silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:50px;padding-left:50px;}Css中常用的四种选择器1、类选择器（class选择器）基本使用.类选择器{属性名:属性值;…}2、.id选择器基本使用：#id选择器{属性名:属性值;…}案例：/*id选择器的使用*/#id1{background-color:silver;font-size:"40px";}3、Html元素选择器基本使用某个html元素{属性名:属性值;…}4、通配符选择器该选择器可以用到所有的html元素，但是其优先权最低基本使用*{属性名:属性值;…}☞css文件可以使用在各种文件（php、html、jsp、asp...）四个选择器优先级如下：id选择器 > class选择器 > html选择器 > 通配符选择器案例：我们希望所有的超链接（1）默认样式是黑色，24px。
css+div代码讲解
一列固定宽度居中<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">注释：告诉浏览器，这段标签内包含的内容是css或text；也就是说如果某种浏览器（特别是wap等手机浏览器械、）不能识别css的，会将代码认为text，从而不显示也不报错。
#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }</style></head><body><div id="layout">此处显示id "layout" 的内容</div></body></html>一列二至多块布局<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body { margin:0; padding:0;}#header { margin:5px auto; width:500px; height:80px; background:#9F9;}#main { margin:5px auto; width:500px; height:400px; background:#9FF;}#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}</style></head><body><div id="header">此处显示id "header" 的内容</div><div id="main">此处显示id "main" 的内容</div><div id="footer">此处显示id "footer" 的内容</div></body></html>纵向导航代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />注释：content-type:text/html。
CSS在DIV网页排版中的实用技巧
在页面 中多次使用 ，所 以限定某个 元
素毫无意义。
＜ｉ ｃａ ｓ ＝ ｓ ｂ ａ ｉ ｍ ＞ ＜ ｈｅ ｌ ｌｓ ｕ ｎ ｖｔ ｅ ａ ｒ ｆ＝”＃
使 用组选 择器来避免 多次的 重复 定义， 定义 所有标题 的字体 、颜 色和
ｍａｇ ｒ ｎ时 可 以这 样 写 ： ｉ
ｈ ，２ｈ ，４ｈ ，６ ｛ １ｈ ，３ｈ ，５ｈ
ｆｎ ｆｍｉ ： ｕ ｉａ Ｇｒｎ ｅ ，ｕ ｉａＡｒａ， ｏ ｔ－ ａ ｌ Ｌ ｃｄ ｙ ａ ｄ Ｌ ｅｄ ， ｉｌ
２最近优先原则 对 同一个元 素 的定义有 多种 ， 以
最接近 （ 小一级）的定 义为最优先 。 最 在 Ｃ Ｓ文件 中，已经定义 了元 素 Ｓ Ｐ 又定义 了一个 ｃ ｓ ｕｄ ｔ ， ｌ ｓ”ｐ ａｅ ａ
＜ ｌ ｕ＞
＜ｉ ｌｓ ｓｌ＞ ＜８ ｒｆ ” ＞ Ｉ ｍ ｌ ａ＞ ｌ ａｓ ｅ” ｃ ｈｅ ＝ ＃” ｔ ｅ ／
ｔ
以ｉ ＞
＜ｉ ＜ａ ｈ ｅ＝ ＃ ＞ Ｉｅ ｌ＞ ｒｆ ” ” ｔｍ ｌ ａ （ ／＞ 小＞
＜４ １ １＞
用 子选择器可 以使代 码和 Ｃ Ｓ更 Ｓ 加简洁 、 更加容易 阅读。
在 一 个 页 面 里 是 唯一 的 ， ｃａｓ 以 而 ｌｓ 可
可 用 下 面 的 方 法 替代 上面 代 码 ：
＜ ｌ ｄ ｓｂ ａ” ｕ ｉ＝”ｕ ｎ ｖ ＞
＜ ｉ ＜ ｈ ｅ ＝ ＃ ＞ Ｉｅ ｌ＞ ａ ｒ ｆ ” ｔｍ ｌ０ ＞ ， ａ ｉ ＞
的边框 。 在页面代码中 ， 可这样 调用：
Ｎｉ Ｈａ ｏ Ｌｉ ａ ｈ ａ ｕ Ｆ ｎｇ ｕ
韩顺平_轻松搞定网页设计html+(DIV+CSS)+javascript视频笔记(全)
韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><frame src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密 码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><fram e src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密 码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>DIV+CSS部分笔记当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
十天学会DIV CSS
第一天XHTML CSS基础知识欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。
不过这里的D IV+CSS是一种错误的叫法，建议大家还是称之为web标准。
学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。
因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。
html基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一天的学习一、xhtml css基础知识首先说一下我们这节课的知识点1.文档类型2.语言编码3.html标签4.css样式5.css优先级6.css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHT ML的语法。
CssDiv等比例缩放整理（一）
CssDiv等⽐例缩放整理（⼀）⼀、CSS Div等⽐例缩放 1百分⽐+fixed；占据屏幕的固定⽐例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body,html {padding: 0px;margin: 0px;}/*百分⽐设置div等⽐例缩放*/.propotion {width: 50%;height: 50%;background: red;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style></head><body><div class="propotion">当前div宽度50%，⾼度50%</div></body></html>⼆、Css Div等⽐例缩放2使⽤固定⽐例的透明图，控制div同⽐例缩放案例使⽤ 3:2的透明图⽚，来扩充⽐例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*图⽚⾃适应设置div等⽐例缩放*/.propotion {border: 1.5px solid green;width: 50%;padding: 10px;margin: auto;}.propotion img {width: 100%;}</style></head><body><div class="propotion"><img src="/upload/images/202010/08/b333b73c-63ed-4a48-a0f5-dabce1a47560.jpg" alt=""></div></body></html>多个布局案例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><style>.row {border: 1px solid red;padding: 20px;}.clear {clear: both;}.row .block {width: 33.33%;border: 0px solid green;float: left;box-sizing: border-box;padding: 20px;}.row .block .inner {box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}.row .block .img {background: red;}.row .block img {width: 100%;display: block;/**必须要加的**/}.row .block .title {font-size: 16px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 10px 10px;}.row .block .summary {padding: 0px 10px 10px 10px;font-size: 12px;color: #888;}</style></head><body><!-- 图⽚控制div等⽐例缩放案例 --><div class="row"><div class="block"><div class="inner"><div class="img"><img src="./img/3x2.png" alt=""></div><div class="title">图⽚控制div等⽐例缩放+图⽚展⽰</div><div class="summary">Css时间轴布局_Css时间轴布局案例整理Css 左右循环动画_左右循环运动效果案例Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div></div></div><div class="block"><div class="inner"><div class="img"><img src="./img/3x2.png" alt=""></div><div class="title">图⽚控制div等⽐例缩放+图⽚展⽰</div><div class="summary">Css时间轴布局_Css时间轴布局案例整理 Css 左右循环动画_左右循环运动效果案例 Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div></div></div><div class="block"><div class="inner"><div class="img"><img src="./img/3x2.png" alt=""></div><div class="title">图⽚控制div等⽐例缩放+图⽚展⽰</div><div class="summary">Css时间轴布局_Css时间轴布局案例整理 Css 左右循环动画_左右循环运动效果案例 Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div></div></div><div class="clear"></div></div></body></html>View Code展⽰效果：三、CssDiv等⽐例缩放案例div等⽐例缩放+背景图，设置相册展⽰cover模式：完全覆盖contain模式：包含显⽰<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.row {border: 1px solid red;padding: 20px;}.clear {clear: both;}.row .block {width: 33.33%;border: 0px solid green;float: left;box-sizing: border-box;padding: 20px;}.row .block .inner {box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}.row .block .img {background: red center center/contain no-repeat;/* background: red center center/cover no-repeat; */}.row .block img {width: 100%;display: block;}.row .block .title {font-size: 16px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 10px 10px;}.row .block .summary {padding: 0px 10px 10px 10px;font-size: 12px;color: #888;}</style></head><body><!-- 图⽚控制div等⽐例缩放案例 + --><div class="row"><div class="block"><div class="inner"><div class="img"style="background-image: url(/upload/logo/content/202110/23/2af1faa5-76f9-45af-a348-e523e01d8a38.jpg);"> <img src="./img/3x2.png" alt=""></div><div class="title">图⽚控制div等⽐例缩放+图⽚展⽰</div><div class="summary">Css时间轴布局_Css时间轴布局案例整理Css 左右循环动画_左右循环运动效果案例Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div></div></div><div class="block"><div class="inner"><div class="img"style="background-image: url(/upload/image/20211002/6376876913567486176364537.jpg);"> <img src="./img/3x2.png" alt=""></div><div class="title">图⽚控制div等⽐例缩放+图⽚展⽰</div><div class="summary">Css时间轴布局_Css时间轴布局案例整理Css 左右循环动画_左右循环运动效果案例Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div></div></div><div class="block"><div class="inner"><div class="img"style="background-image:url(/upload/logo/content/202109/24/e2b864e3-5cb7-4785-843a-5e551c59d270.jpg);"><img src="./img/3x2.png" alt=""></div><div class="title">图⽚控制div等⽐例缩放+图⽚展⽰</div><div class="summary">Css时间轴布局_Css时间轴布局案例整理 Css 左右循环动画_左右循环运动效果案例 Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div></div></div><div class="clear"></div></div></body></html>View Code更多：。
css中div标签的用法
在CSS中，`div`标签是一个通用的块级元素，可以用来组织和格式化大块的HTML内容。
默认情况下，`div`元素会占据其父元素的一整行空间，并且与其他元素垂直排列。
你可以使用CSS来修改`div`元素的样式，以适应你的布局需求。
以下是一些常见的CSS属性，你可以用于修改`div`元素的外观和行为：
* `width`和`height`：这些属性用于设置`div`元素的宽度和高度。
* `background-color`：这个属性用于设置`div`元素的背景颜色。
* `border`：这个属性用于设置`div`元素的边框样式，包括边框的宽度、颜色和样式。
* `margin`和`padding`：这些属性用于设置`div`元素的外边距和内边距，可以控制元素与其他元素之间的距离。
* `display`：这个属性用于控制`div`元素的显示方式，例如块级元素（`block`）、行内元素（`inline`）、列表项（`list-item`）等。
下面是一个简单的示例，展示了如何使用CSS来设置一个`div`元素的样式：
```html
<div style="width: 200px; height: 100px; background-color: #f00; border: 2px solid #000; margin: 10px; padding: 20px;">
这是一个div元素
</div>
```
在上面的示例中，我们使用内联样式来设置`div`元素的宽度、高度、背景颜色、边框样式、外边距和内边距。
你可以将这些属性值替换为你需要的样式，以适应你的布局需求。
CSS学习笔记四：下拉选择框以及其动画特效
CSS学习笔记四：下拉选择框以及其动画特效以前学的只是了解了css的⼀些基本属性，在做项⽬的时候都是直接使⽤bootstrap响应式来写项⽬，这样⼦很⽅便，很快捷，但是在⾃⼰看来还是有⼀点缺陷的，毕竟，我很多时候不怎么清楚它⾥⾯的具体运作。
所以在学习原⽣，⼀个⼀个⼩标符号学习起来，学习原⽣可能会让我学习到更多的东西。
学习了两种下拉框，⼀种是往在弹，⼀种是从中间往外弹。
第⼀种下拉框现在学习的做东西，都是先确定好⾃⼰需要那⼏样东西，先把body的内容写了，再来⼀样⼀样规划样式。
1<div class="content">2<div class="select ">3<p>所有选项</p>4<ul>5<li data-value="所有选项" class="selected">所有选项</li>6<li data-value="html">html</li>7<li data-value="css">css</li>8<li data-value="javascript">js</li>9<li data-value="jquery">jq</li>10</ul>1112</div>1314</div>1、body,p,ul本⾝就⾃带了边界和内边距的距离，第⼀步是将他们给清除掉2、设置body的基本属性值，背景颜⾊以及字体颜⾊3、content是将它们总体往下移4、content 中的 select 的样式设定设置其边距和边界等等，在after中设置的是⼀个三⾓形的样式，⼀开始是倒三⾓形，当点击按钮后就会旋转，将按钮往上翻转。
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。
DIVCSS学习(入门)教程
Div+CSS布局入门教程页面布局与计划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。
在下面的文章中咱们将会用到一些有关于HTML的大体知识，而在你学习这篇入门教程之前，请确信你已经具有了必然的HTML基础。
下面咱们就开始一步一步利用DIV+CSS进行网页布局设计吧。
所有的设计第一步确实是构思，构思好了，一样来讲还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，咱们需要依照构思图来计划一下页面的布局，认真分析一下该图，咱们不难发觉，图片大致分为以下几个部份：一、顶部部份，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:依照上图，我再画了一个实际的页面布局图，说明一基层的嵌套关系，如此明白得起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与计划已经完成，接下来咱们要做的确实是开始书写HTML代码和CSS。
写入整体层结构与CSS接下来咱们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-ivID。
若是id="divID"那个层中包括了一个<img></img>，那么那个img在CSS中对应的设置语法应该是#divID img {}，一样，若是是包括在class="divID"那个层中时，那么设置语法应该是.divIDimg {}，这一点希望大伙儿要分清楚了。
DIV CSS入门基础知识教程
DIV+CSS盒子模型CSS盒子模型-什么是CSS盒子模型。
认识日常生活中盒子：常常我们遇到盒子是用于可装东西长方形、正方形的盒子。
如装皮鞋盒子、装电视机盒子，这个是比较具体的盒子。
CSS盒子：根据字面我们可以理解，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。
这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）,即可实现像盒子一样的长方形、正方形平面盒子。
通常我们这样：一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。
因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。
所以我们CSS盒子模型因此而得来。
日常使用CSS盒子：我们说将什么内容放入一个盒子里，我们就要想到是放入<div></div>里，脑海里就要这个概念。
假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：Css样式代码：.yangshi{width:100px;}对应html代码：<div class="yangshi">内容</div>这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。
DIV+CSS是什么？DIV+CSS我们可以分为DIV和CSS两个概念。
CSS：我们也讲过是什么，大家可参考网址（CSS是什么）：DIV：这个是网页HTML的标签，通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。
1、DIV是html其中一个常用标签，如span、table、h1等之类标签2、在HTML中DIV标签我们用的最多，具有代表性3、div配合css类，布局出网页< div>内容</div>< div class="divcss5">内容</div>< div id="divcss5">内容</div>DIV CSS是什么截图您可能需要了解CSS是什么？什么是html？Html代码是什么？css是什么?什么是CSS？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。
DIV+Css总结
1.以下是下划线的效果<style>p.one {text-decoration:underline;} /* 下划线效果*/p.two {text-decoration:overline; }/* 顶划线*/p.three {text-decoration:line-through;} /* 中间划线*/p.four {text-decoration:blink;}/*闪烁，只在firefox中可以。
*/p.five{ text-decoration:underline overline line-through; }/* 三种同时,有几种就用空格隔开*/</style>2. 英文字母大小写的方式<style><!--p{ font-size:17px; }p.one{ text-transform:capitalize; } /* 单词首字大写*/p.two{ text-transform:uppercase; } /* 全部大写*/p.three{ text-transform:lowercase; } /* 全部小写*/-->font-family:Arial, Helvetica, sans-serif; /* 字体*/letter-spacing:-2px; /* 字母间距*/</style>3. vertical-align的用法！vertical-align只作用于在同一行内的元素vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
DIV常用属性大全自己整理
DIV常⽤属性⼤全⾃⼰整理⼀、属性列表复制代码代码如下:color : #999999 ⽂字颜⾊font-family : 宋体⽂字字型font-size : 10pt ⽂字⼤⼩font-style:itelic ⽂字斜体育font-variant:small-caps ⼩字体letter-spacing : 1pt ⽂字间距line-height : 200% 设定⾏⾼font-weight:bold ⽂字粗体vertical-align:sub 下标字vertical-align:super 上标字text-decoration:line-through 加?h除线text-decoration:overline 加顶线text-decoration:underline 加底线text-decoration:none ?h除连接底线text-transform : capitalize ⾸字⼤写text-transform : uppercase 英⽂⼤写text-transform : lowercase 英⽂写text-align:right ⽂字*右对齐text-align:left ⽂字*左对齐text-align:center ⽂字置中对齐这些是⼀些简单的⽂字效果，可以应⽤到css的页⾯中。
背景background-color:black 背景颜⾊background-image : url(image/bg.gif) 背景图⽚background-attachment : fixed 固定背景background-repeat : repeat 重复排列-⽹页预设background-repeat : no-repeat 不重复排列background-repeat : repeat-x 在x轴重复排列background-repeat : repeat-y 在y轴重复排列background-position : 90% 90% 背景图⽚x与y轴的位置 链接A 所有超连接A:link 超连接⽂字格式A:visited 浏览过的连接⽂字格式A:active 按下连接的格式A:hover ⿏标移⾄连接边框border-top : 1px solid black 上框border-bottom : 1px solid #6699cc 下框border-left : 1px solid #6699cc 左框border-right : 1px solid #6699cc 右框border: 1px solid #6699cc 四边框虚线<TEXTAREA STYLE="border:1px dashed pink">实线<TEXTAREA STYLE="border:1px solid pink">设置div的⾼度与⽂字的⾏⾼⼀样就可以了,即 line-height 和 height 的数值是⼀样的就可以了,最后给div⼀个 over-flow: hidden ,让超出的部分隐藏.⼆、常⽤属性复制代码代码如下:1、Height:设置DIV的⾼度；Width:设置DIV的宽度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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属性，重置为标准的。
（4）不同的浏览器有各自不同的CSS属性值----要命的，就是浏览器的兼容（5）想用一个比较特殊的字体，怎么办？--将其转化为图片分中英文字体，设置字体的顺序，英文字体设置在前，中文设置在后font-family："Arial"，"宋体"（6）CSS编辑工具---用什么都行12、技巧：想让文字在垂直方向上居中，将行高设置为元素的高度。
*****文字的内容不能超过元素的宽度！！也就是不能换行****13、CSS可以重新设置XHTML的默认值。
14、CSS应用给网页的方式就相当于给人怎么去穿衣服15、网页中加CSS的方式有四种：（1）内联样式表：举例<pstyle="font-size:16px;color:red;">kjsklfjkasj</p>应用于一个标签（2）嵌入式样式表：<style></style>标签嵌入到HTML文件的头部中<head>标记内，举例：<style type="text/css">body{background:white;color:black;}</style>应用于一类标签（3）外部链接式样式表（推荐）将CSS样式写到一个单独的文件中style.css ,要使用的网页，只需要调用即可。
这才是我们学习XHTML+CSS的核心。
将结构与样式分离。
举例：<link href="stlyle.css" rel="stlyesheet" type="text/css">应用于所有网页的方法（4）导入式样式表：也是将样式写到一个文件中，再导入到网页中。
语法：<style>@import url("style.css");</style>****导入式与嵌入式相类似，都是将样式加入到网页里。
缺点：会占用html空间，有些浏览器解析会有问题。
浏览器会最后读取@import 中的内容将不同的CSS样式导入到一个CSS样式文件中@import url("sytle.css")@import url("style2.css")16、CSS选择符的类型我们相对网页中的某一个元素或者某一些元素、设置样式---可以通过不同的CSS选择符来实现什么是选择符---就是你要控制的对象（1）标签选择符---针对html标签如果要修改的是html标签的样式，以html标签为选择符，标签选择符（类型选择符）例如：要控制网页中的所有P标签：p{属性：值}（2）ID选择符---针对某一个id只想针对某一个元素进行控制，使用ID选择符，id在网页中具有唯一性。
也就是在网页中只出现一次的内容。
#ID名称{属性：值}例如：<p id="two">正文</p>#two{font-weight：bold;font-size:24px;}（3）类选择符---针对某一类，或则会某一些元素，他们的样式是相同的。
针对某一类元素设置相同的样式：.类名称{属性：值}类定义后还要通过class=”类名“应用于元素例如：.warning{color:red;}<p class="warning">文字</p><div class="warning">文字</div>同时给某个元素应用多个类（给一个人穿一件”大号“的”红色“的”女士“衣服）****同一个元素，应用多个类，类名与类名之间用空格隔开class=”类1 类2“*****注意：类名或者ID名不要以数字开头，应以英文字母开头*****17、CSS样式的特点（1）继承：网页中的子元素会继承父元素的某些样式。
因为有些子元素本身就有默认值，所以它就不用父元素的值。
给父元素设置样式，子元素也会继承该样式效果<body>是父元素，<p>是它的子元素（2）层叠：网页中子元素定义了与父元素相同的样式，子元素会把父元素的样式覆盖。
后面的样式会覆盖前面的样式。
18、CSS样式的优先权：当样式有冲突时，听谁？（1）四种方式的优先权：内联式>嵌入式>外链式（<link href="style.css" rel="stylesheet" style="text/css"）>导入式（@import url("style.css")）（2）就近原则作用范围越小，优先权越高离要修饰目标越近的样式优先权越高。
（3）选择符之间的优先级：行内>id>class>标签选择符特殊情况：我们可以提升某个属性的权限。
我们可以采用!important 语法来提升(IE 6 不支持) 例如：p{color：red !important;}p{color:green;}总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的19、****IEtest工具也有兼容性问题，在win7下打不开IE6-----解决：下载绿色版IE6---不用安装直接用20、常用的文字、文本控制的CSS样式<em>文字默认倾斜</em>***不同浏览器默认值不一样，需要注意CSS的默认值。
***尽量使用通用属性，不用存在兼容性差别的属性，如blink（闪烁）属性具有兼容性问题wordspacing:对汉字无效，英文字母、数字、空格等有效。
无兼容性问题。
21、CSS控制元素的某种状态--CSS伪类****如果，鼠标放上效果不起作用，请修改链接状态的顺序 L-V-H-A 举例：<style type="text/css">a:link{text-decoration:none;color:black;}a:visited{text-decoration:line-through;color:green;}a:hover{text-decoration:underline;color:blue;}a:active{text-decoration:overline;color:green;}</style>未访问的链接 a:link{color:#FF0000}已访问的链接 a:visited{color:#00FF00}鼠标移动到链接上 a:hover{color:#FF00FF}鼠标按下链接 a:active{color:#0000FF}自定义链接的CSS类a.类名称:状态CSS伪类用于像某些选择器添加特殊效果语法：选择符：伪类名称{属性：值}例如：a:hover{color:#FF00FF;text-decoration:underline;}:focus 设置对象在成为输入焦点（该对象的onfucs事件发生）时的样式（IE6/7不支持）22、CSS选择符命名，规范---语义化命名驼峰命名法:除第一个单词的首字母小写外，其余所有单词首字母都大写 headerBlock（优选）帕斯卡命名法：与驼峰相似，区别就是所有单词的首字母都大写。
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀最常用的是驼峰命名法和帕斯卡命名法。
23、CSS选择符详解1)、标签选择符：针对html标签2)、id选择符：针对页面中只出现一次的内容，id3)、类选择符：针对某些元素，相同的样式，重复样式****默认情况下某些html元素本身有自己的默认值4)、控制所有元素----使用通配符---*通配选择符：*{属性：值}，用于定义所有html元素*的作用范围很广，但是它的效率最低。
（慎用）*{margin：0；padding：0}//重置所有元素的外边距和内边距为0，大网站不用！5)、选择符的嵌套使用----包含选择符前端开发的极限就是代码非常的精简！如果我们针对某个元素的子元素进行控制，可以使用嵌套的方式，不必再为子元素设置ID父元素 子元素{属性：值}6)、选择符分组（集体控制）多个选择符会有一些相同的样式，这个时候我们就可以把这些选择符组成一个组：选择符1，选择符2，选择符3，......例如：h1,h2,h3,strong:{font-weight:nomal;}***以下两种用的较少***7)、标签指定式选择符：如果既想使用id或class，也同时想使用标签选择符例如：p#six{backgroud:grey;}8)、组合选择符：将以上选择符进行组合使用例如：h1 .p1,#content h1{}CSS选择符就是表示你将把你定义的样式用给谁24、CSS盒子模型详解从内到外：content padding border margin1、盒子中的内容content2、盒子的边框border3、盒子的边框与内容的距离，成为填充--padding 内边距，内补丁4、多个盒子存在，盒子与盒子之间的举例，称为边界--margin 外边距，外补丁整个盒子模型在页面中所占的实际宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界24、CSS盒子相关属性（1）内容属性：内容本身的宽/高=width/height（2）内填充属性：内容与边框之间的属性=padding如果是四个参数都有，表示：上右下左（顺时针方向）举例：padding：20px 0 0 20px;****在定义盒子的宽度时，要考虑盒子的内填充，边框，边界的存在。