1. 标签通用属性
   1. id：标签唯一的编号
   2. class：标签属于的类别
   3. width：宽度 height：高度
   4. name：元素的名字
2. 表单域：<form>
3. 表单元素
   1. 文本框：<input type=’text’ name=’’ size=’’ maxlengh=’’/>
   2. 密码框：<input type=’password’ name=’’/>
   3. 单选按钮：<input type=radio>
      1. 同一组的单选按钮的名字要一致
      2. 要给无法输入的表单元素赋值
   4. 复选按钮：<input type=’checkbox’>
   5. 下拉菜单：<select><option></option></select>
   6. 下拉列表：<select size=’’ multiple><option></option></select>
   7. 文本域：<textarea cols=’’ rows=’’></textarea>
   8. 提交按钮：<input type=’submit’ name=’’/>
   9. 重置按钮：<input type=’reset’ name=’’/>
   10. 普通按钮：<input type=’button’/>
4. 使用表单
   1. action属性：表单提交的位置，如果action=’’表示表单提交给自己
   2. method属性：值有get和post
5. 框架
   1. <frameset>框架集
   2. <frame>框架

练习一：写入如下的框架结构

<html>

<frameset cols=”100,*”>

<frame src=””>

<frameset rows=”100,*”>

<frame src=””>

<frame src=””>

</frameset>

</frameset>

</html>

练习二：写出如下框架

<html>

<frameset rows=”*,*”>

<frameset cols=”*,*”>

<frame src=””/>

<frame src=”/>”

</frameset>

<frameset cols=”*,*”>

<frame src=””/>

<frame src=””/>

</frameset>

</frameset>

</html>

1. 内嵌框架：<iframe>，嵌套在页面内部
2. HTML5新特点
   1. 语法更加简单
   2. 语法更加宽松
   3. 标签语义化
3. HTML5新增常用属性
   1. required：必填
   2. placeholder：默认显示内容
   3. autofocus：自动获取焦点
4. input标签新增type属性
   1. type=”email”
   2. type=”date”
   3. type=”time”
   4. type=”month”
   5. type=”week”
   6. type=”number”
   7. type=”range”
   8. type=”color”
5. 多媒体标签
   1. <embed>：可以播放音频和视频
   2. <audio>
      1. 方法一

<audio src=”music/music.mp3″ controls autoplay=”autoplay”></audio>

• • 1. 方法二：

<audio controls autoplay>

<source src=”music/music.mp3″>

<source src=”music/music.ogg”>

</audio>

• 1. <video>

多学两招

optgroup

HTML5中表单元素可以不放在表单中

HTML5中表单元素可以不放在表单中，通过id属性将他们关联起来

计算机的单位，进制与进制间的转换

计算机的单位

1. 计算机中的电子器件，电子器件只有两个状态，通电与不通电，通就是1，不通就是0。所以计算机内部只能传输0和1。
2. 既然只能传输0和1，计算机用的是二进制。
3. 一个字节的大小可以一个字符，一个字节=8位

1. 计算机最小的单位是“位”，一个位就是一根线传输的数据

1K=1024（2¹⁰）个字节

1M=1024K，2²⁰个字节

1G=1024M，2³⁰个字节

1T=1024G，2⁴⁰个字节

进制

我们原来学习的是十进制，逢十进一，十进制中有十个数字。我们以此类推，二进制就是逢二进一，二进制就两个数字，0和1。

在计算机中，我们需要用到的进制有，二进制，八进制，十进制，十六进制。

（1+1）₂=（10）₂

（7+6）₈=（15）₈

（A+6+B）₁₆=（1B）₁₆

进制转换（将其他进制转成10进制）

分析：以十进制为例，以10为底，指数从右往左以此为0次方，1次方，2次方…

(123)₁₀=1*10²+2*10¹+3*10⁰

（3456）₁₀=3*10³+4*10²+5*10¹+6*10⁰

以此类推

(1100)₂=1*2³+1*2²+0*2¹+0*2⁰⁼12

(1011)₂=1*2³+0*2²+1*2¹+1*2⁰=11

(763)₈=7*8²+6*8¹+3*8⁰

(FF)₁₆=15*16¹+15*16⁰=255

(2B)₁₆=2*16¹+11*16⁰=43

进制转换（十进制转成二进制）

整数方法：除2反向取余数，小数部分是乘2正向取整数

(11)₁₀=(1011)₂

(19)₁₀=(10011)₂

多学一招：八进制和十六进制转成二进制和十进制转换不一样，八进制是将每一八进制位数字转成3位的2进制，16进制是将每一位数字转成4位的二进制数字，然后合并起来

(13)₈=(1011)₂

分析：

1的3位二进制是001

3的3位二进制是011

(13)₁₆=(10011)₂

分析：1的4位二进制0001

3的4位二进制是0011

(0.25)₁₀=(0.01)₂

重点：十进制和二进制的整数部分的转换。

网页中颜色表示的含义

1. 光的三原色（RGB），red green blue，他们的取值范围是0-255，转成十六进制00-FF。
2. 颜色的色值以#开头
3. 例题
   1. #FF0000：红色
   2. #00FF00：绿色
   3. #006600：绿色
   4. #0000FF：蓝色
   5. #000000：黑色
   6. #FFFFFF：白色
   7. #555555：灰色
   8. #5c5c5c：灰色
   9. #112233：由11的红，22的绿，33的蓝组成的颜色

DW设计器的使用

插入图片

方法一：

方法二：

插入换行

回车：换段

shift+回车：换行

添加超链接

第一步：选中文本或图片

第二步：在属性面板上

插入表格

脚下留心：表格是可以嵌套的。

合并单元格

选中需要合并的单元格，点击“合并”按钮即可

选中需要拆分的单元格，点击“拆分”按钮即可。

标签选择器的使用

此工具用来选择标签内容非常方便。

CSS介绍

1. 我们在做网站的时候有一个原则：表现（样式）和内容要分离。表现是由CSS控制的，内容是由HTML控制器的。
2. CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

语法

CSS以<style>开头，</style>结束，建议样式代码写在<head></head>之间。

语法结构：

<style type=”text/css”>

选择器{

属性:属性的值;

属性:属性的值;

}

</style>

CSS样式由选择器、属性、属性的值组成。

注释

语法：/* 注释的内容 */

两个排版标签

<div></div>

<span></span>

这两个标签叫块标记，这两个标记中用来放内容。他们的区别：

1. 一般来说，<div>中可以放图片，文字，视频等网页内容，<span>一般只能存放文字。
2. 显示方式不一样

CSS选择器（符）

ID选择器

1. id选择器以#开头
2. id选择器只能供一个元素使用

类样式（class样式）

1. 以点（.）开头
2. 可以供多个元素使用

标签选择器

通过标签来选择元素

通配选择器

通过星号（*）来表示所有标签，对所有标签添加样式

组合选择器

如果有多个选择器的样式是一样的，我们可以将这些选择器组合起来一起写。

<style type=”text/css”>

/*组合选择器*/

div,span{

color:#F00;

}

#first,h1{

color:#060;

}

</style>

<div>锄禾日当午，</div>

<p id=”first”>汗滴禾下土。</p>

<span>谁知盘中餐，</span>

<h1>粒粒皆辛苦。</h1>

后代选择器

子元素选择器（父元素>子元素）

相邻元素选择器

#first+div：紧挨着#first之后的div

#first~div：#first之后的所有的div

伪类

元素:link 正常连接时候的状态

元素:visited 点击以后的状态

元素:hover 当鼠标移动上去的状态

元素:active 当鼠标按下去时候的状态

脚下留心：不是所有的元素都支持这4个状态，有的元素可能只支持其中的某个状态。但是超链接支持这4种状态。

脚下留心：这四种状态要按照lvha的顺序写。（love 爱 hate 恨）

<style type=”text/css”>

a:link{ /*正常连接时候的状态*/

color:#F00;

text-decoration:none; /*文本修饰*/

font-size:12px;

}

a:visited{ /*点击后的状态*/

color:#F0F;

text-decoration:none;

font-size:12px;

}

a:hover{ /*当鼠标移动到a标记的时候状态*/

color:#060;

text-decoration:underline;

font-size:24px;

}

a:active{ /*当鼠标点击下去的状态*/

color:#00F;

text-decoration:underline;

font-size:24px;

}

</style>

<a href=”#”>超链接1</a> <br>

<a href=”#”>超链接2</a>

例题一

例题二：

回顾

1. 计算机单位
   1. 最小单位是位（B）
   2. 字节（b） 一个字符的大小
   3. 1K=1024b
   4. 1M=1024K
   5. 1G=1024M
   6. 1T=1024G
2. 进制转换
   1. 十进制转二进制：整数除2反向取余，小数乘2正向取整
   2. 二进制转成十进制：以2为底，从右往左依次是2的0次方，1次方…
   3. 八进制转二进制，一个八进制转成3位的二进制，然后再合并起来
   4. 十六进制转二进制：一个十六进制转成4位的二进制，然后在合并起来。
3. 网页中的颜色表示：光的三原色，红色（red），绿色(green)，蓝色（blue）。所有光的颜色都是由这三种颜色组成。他们的范围都是0-255，颜色的表示通过RGB的十六机制数表示，
4. CSS介绍：层叠样式表，用来控制网页的外在表现（网页的装修），
5. 语法

选择器{

属性:属性的值;

属性:属性的值;

}

1. 注释 /* */
2. CSS选择器
   1. ID选择器
      1. 以#开头
      2. 只能供一个元素使用。
   2. 类选择器
      1. 以点（.）开头
      2. 可以供多个元素使用
   3. 标签选择器：选择标签
   4. 通配选择器：*
   5. 组合选择器：h1,#aa,.bb
   6. 后代选择器：p b #aa .bb
   7. 子元素选择器p>b
   8. 相邻元素选择器div+p div~p
   9. 伪类：4种状态。 lvha
      1. :link 正常连接的状态
      2. :visited 点击完后代状态
      3. :hover 当鼠标移上去的时候状态
      4. :active 当鼠标点击下去的状态

网页中图像的基础知识

1. 位图：由像素点组成的图
   1. 体积大
   2. 放大失真
   3. 颜色丰富，达到256*256*256种颜色

1. 矢量：是由线条和面组成的图形
   1. 体积小
   2. 可以无限制的放大
   3. 支持的颜色数比较少

脚下留心：网页上的图片都是位图

1. 分辨率

思考：是不是像素点越多，图片的质量越高？

答：不是，衡量一个照片的质量通过的是分辨率。

分辨率：单位长度里的像素点的多少，一般都以一英寸为单位。

在尺寸一定情况下，分辨率越大质量也好，图片的体积也越大，网页打开的速度也越慢。网页上的分辨率一般是72。（印刷的分辨率一般在300）

1. 网站默认尺寸单位为象素（px）。
2. 网页常见的图象格式：网页中常用的图片格式有png，jpg，gif

伪类选择器与类选择器一起使用

思考一个场景：如何实现一个页面中有两种超链接的样式。

<style type=”text/css”>

a.first:link{

color:#F00;

text-decoration:none;

font-size:12px;

}

a.first:hover{

color:#060;

text-decoration:underline;

font-size:12px;

}

a.second:link{

color:#00F;

text-decoration:overline;

font-size:36px;

}

a.second:hover{

color:#90F;

text-decoration:underline;

font-size:36px;

}

</style>

<a href=”#” class=”first”>链接1</a> <br>

<a href=”#” class=”first”>链接1</a> <hr>

<a href=”#” class=”second”>链接2</a> <br>

<a href=”#” class=”second”>链接2</a> <hr>

运行结果

思考题：a.first和a .first的区别

伪对象选择器

伪类描述的是状态，伪对象描述的是对象。

元素:first-letter，选择元素中内容的第一个字

元素:first-line，选择元素中是内容的第一行

<style type=”text/css”>

p:first-letter{ /*选择元素的第一个字*/

font-size:24px;

color:#F00;

}

div:first-line{ /*选择元素的第一行*/

font-size:12px;

color:#060;

text-decoration:underline;

}

</style>

<p>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

</p>

<div>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道，晴翠接荒城。<br>

又送王孙去，萋萋满别情。

</div>

属性选择器

1. 元素[属性]：具备指定属性的元素

1. 元素[属性=值]：选择指定属性指定值的元素

1. 元素[属性~=值]: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素

1. 元素[属性|=值]：选择具有attr属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素

E1[attr] element（元素） attribute（属性）

常用CSS属性的讲解

字体属性

<style type=”text/css”>

body{

color:#F00; /*字体颜色*/

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”; /*字体*/

font-size:16px; /*字号*/

font-weight:bold; /*字体粗细*/

text-decoration:underline; /*文本修饰*/

text-transform:uppercase; /*文本转换（大小写）*/

line-height:30px; /*行高*/

}

</style>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

I a am boy!

运行结果

详细说明text-transform属性值

思考：为什么font-family跟多个字体？

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”;

答：客户端首先用第一个字体来解析，如果没有就选择第二个字体，依次类推，一直到最后。如果一个字体都没有，就选择客户端的默认字体。中文的浏览器默认字体是宋体。

文本属性

text-align的值

尺寸属性

width：宽度

height：高度

边框属性

多学一招：

背景属性

边距属性 （margin）

margin-top：上边距

margin-right：右边距

margin-bottom：下边距

margin-left：左边距

margin：符合边距

列表属性

内容溢出属性

overflow:hidden; /*溢出部分隐藏*/

overflow:auto; /*如果有溢出，就会出现垂直滚动条*/

CSS样式的的分类

样式按照写的地方不同分成3类：

1. 内部样式：写在页面的内部，只能给当前页面使用

<style type=”text/css”></style>

1. 外部样式：写在页面的外部，可以给所有页面使用

新建一个css文件，将样式写到文件中

1. 行内样式：写在元素的后面，只能给当前元素使用

<div style=””></div>

内部样式

写在页面的内部，通过<style>开头</style>结束，可以给整个页面使用

行内样式

每个元素都有style属性，通过style属性也元素添加样式

外部样式

将样式写到外部文件中，给所有页面使用

第一步：创建CSS文件

脚下留心：在CSS文件中，不需要<style>开头，</style>结束。

第二步：新建html，并引入css文件

引入CSS文件的方式：链接和导入

1. 链接

语法：<link rel=’stylesheet’ href=’地址’>

1. 导入

语法：@import url(地址);

思考：为什么<link>不需要写在<style></style>之间，而@import需要呢？

答：因为<link>是HTML标签，而@import是CSS指令

思考：<link>和@import引入样式的区别？

分析：

答：1、<link>在HTML页面中引入CSS文件

2、@import在HTML页面和CSS页面都能引入。

样式的继承

内层标签继承和覆盖外层标签的样式。

1. 子级标签继承父级标签没有的样式
2. 子级标签覆盖父级标签相同的样式

样式的优先级

1. ID选择器>CLASS选择器>HTML标签选择器
2. 直接（行内）样式表>内部样式表>外部样式表

例题2

1. class=“类1，类2”，以类的加载的顺序为优先级，后加载的将先加载的覆盖。

1. 强制优先级（important）

1. 权重叠加
   • 标签 < 类 < id选择器<直接<important
   • 1 < 10 < 100 <1000<10000

例题：

标签的显示模式

标签的显示模式有两种：块显示，行显示

1. 块显示特点
   1. 上下排列
   2. 默认宽度是100%，高度0px
   3. 可以设置宽度和高度
2. 行显示特点
   1. 左右排列
   2. 默认框架是宽度0px，高度是0px
   3. 不能设置宽度和高度

思考：如何设置行显示标记的宽度和高度？

答：将行显示转成块显示即可

思考：既要设置宽高，又要显示在一行，如何实现？

display:block; 将标签显示方式改为块显示

display:inline：将标签显示方式改为行显示

div+css拼版好处

1. 提高页面执行效率
2. 代码维护变得简单
3. 提高代码的可重用性。

盒子模型

页面的所有元素都放在盒子（容器标记）中，无拼版不盒子

盒子模型

盒子由3部分组成

1. 边界（外边距）,盒子外面的部分
2. 填充（内边距），盒子的内部
3. 边框：盒子本上的4个边

标准流的注意事项

1. 块显示标记默认宽带100%，高度是0px，上下排列，可以设定宽高
2. 行显示标记，默认宽度0px，高度0px，左右排列，不能设置宽高
3. 盒子是可以被撑开的
4. 文字和图片不能放在图片之上，如果字在图上，或者图在图上，那么这个图必定是背景图
5. 如果看到图片重复出现，这个图必定是背景图

例题（银杏的优点）

结果预览

难点分析

代码实现

<style type=”text/css”>

body{

background-image:url(images1/bg7.jpg); /*设置背景*/

background-repeat:no-repeat; /*背景不平铺*/

}

div{

background:url(images1/bg8.gif) repeat-y; /*银杏的叶子垂直平铺*/

padding-left:110px; /*文字距离div的宽度110px*/

font-size:18px; /*字号18px*/

}

</style>

</head>

<body>

<div>

<h1>银杏的优点</h1>

1. 叶色秀雅，花色清淡。<br />

2. 树体高大，寿命绵长，树粗可达4米，寿命可达3000年之多。固长与古老寺庙相配伍，以名山大川、风景名胜为伴。<br />

3. 树干光洁，愈伤力强，轻微的损伤很快便可愈合。<br />

4. 发芽晚落叶早，有利于早春和晚秋树下能及时得到和暧的阳光。<br />

5. 银杏冠大荫浓，具有降温作用；直射阳光下，气温高达40.20c，银杏树下的气温仅为35.30c。降温4.90c，优于其它树种。<br />

6. 萌蘖力强、耐修剪。根际萌蘖旺盛，可以形成五代同堂&rdquo;，怀中抱孙&rdquo;等自然风景。<br />

7. 银杏绝少病虫害，不污染环境，是著名的无公害树种。<br />

8. 抗旱力较强。<br />

9. 抗烟尘、抗火灾、抗有毒气体（如二氧化硫、氨气、臭氧等），抗辐射能力也强。

</div>

浮动（float）

浮动可以左浮动，也可以右浮动，只要浮动的元素都会脱离标准流

<style type=”text/css”>

#aa,#bb{

width:200px;

height:100px;

background-color:#F00;

float:left; /*左浮动*/

}

#bb{

background-color:#060;

}

#cc{

width:200px;

height:130px;

background-color:#00F;

}

</style>

<div id=”aa”></div>

<div id=”bb”></div>

<div id=”cc”></div>

运行结果

例题一（全部左浮动）：

例题二（全部右浮动）

例题三（有左浮动，有右浮动）

脚下留心：盒子里面的子盒子浮动起来，子盒子就脱离标准流了，这时父盒子就不能精确的检测到它内部的内容到底有多高，父盒子会变成一根线；我们可以给父盒子加一个overflow:hidden属性让它精确检测一下内部的高度。盒子就会自动撑开了。

解决：给父盒子添加overflow:hidden

例题（春季）

难点分析

代码实现

<style type=”text/css”>

body{

background-color:#5B8A00;

color:#c4f762;

font-size:18px;

}

img{

float:right;

}

#first{

font-size:80px;

font-family:’黑体’;

float:left;

/*margin-right:20px;*/ 这两种方法都行

padding-right:20px;

}

</style>

<img src=”images4/mainroad.jpg” />

<span id=”first”>春</span>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。

对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。

清除浮动

浮动属性会影响到其他的盒子

解决：清除c盒子的左浮动的影响

clear：left 清除左浮动

clear：right 清除右浮动

clear：both 清除所有浮动

多学一招：Clear属性不但能清除float属性，还能清除margin属性，如果用了clear属性的盒子就不能再使用margin属性。

解决方法：在上下的盒子之间插入一个空div,专门用来清除浮动的影响。

定位

定位有四种

1. absolute：局对定位
2. relative：相对定位
3. fixed：固定定位
4. static：静态定位（默认）

除了默认定位以外，其他三种定位必须结合如下的属性使用

top：距上 left：距左 right：距右 bottom：距下

absolute（绝对定位）

1. 要脱离标准流
2. 以浏览器客户端的左上角为原点
3. 不保留原先位置的占位

<style type=”text/css”>

div{

width:200px;

height:200px;

}

#aa{

background-color:#F00;

position:absolute; /*绝对定位*/

top:100px;

left:100px;

z-index:10 /*图层顺序*/

}

#bb{

background-color:#060;

position:absolute;

top:0px;

left:0px;

z-index:2; /*图层顺序*/

}

</style>

<div id=”aa”></div>

<div id=”bb”></div>

relative（相对定位）

1. 保留原先位置的占位
2. 默认原点是自身左上角

fixed（固定定位）

<style type=”text/css”>

#win{

width:100px;

height:100px;

background-color:#F00;

position:fixed; /*固定定位*/

right:0px; /*距右0px*/

bottom:0px; /*距下0px*/

}

</style>

<body style=”height:2000px;”>

<div id=”win”></div>

定位例题（通过绝对定位盒子居中）

分析：

例题

<style type=”text/css”>

div{

width:200px;

height:200px;

background-color:#F00;

position:absolute; /*绝对定位*/

left:50%; /*距左边界50%*/

top:50%; /*距上边界50%*/

margin-left:-100px; /*将盒子左移动100px;*/

margin-top:-100px; /*将盒子上移100px;*/

}

</style>

<div></div>

定位例题（以父级元素为原点）

口诀：父级相对，子级绝对，这个子级就以父级的左上角为原点。

内减模式

默认情况下，盒子的尺寸是外加模式，盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下，指定了填充以后，盒子尺寸会变大，解决方法：我们可以使用內减模式，就是指定盒子的宽度就是总宽度，如果指定填充，盒子中内容的宽度-填充=实际内容的宽度。这是css3增加的属性

<style type=”text/css”>

div{

width:200px;

height:200px;

border:#000 solid 1px;

padding-left:50px;

box-sizing:border-box; /*内减模式*/

}

</style>

<div>锄禾日当午</div>

例题（导航栏）

难点：

1. 很多标签本身带有边界和填充，我们拼版的第一步是清除这些距离。

*{ /*所有标签都清空自带的距离*/

margin:0px;

padding:0px;

}

1. 元素居中（左边界自动，右边界自动）

margin-left:auto;

margin-right:auto;

1. 去除无序列表的前面的点

list-style-type:none; /*去除小圆点*/

1. 导航内容垂直居中（设置行高）

line-height:30px; /*内容可以垂直居中*/

实现方法

<style type=”text/css”>

*{ /*所有标签都清空自带的距离*/

margin:0px;

padding:0px;

}

ul{

width:780px;

margin-left:auto;

margin-right:auto;

margin-top:100px;

list-style-type:none; /*去除小圆点*/

overflow:hidden; /*重新测定子元素的高度*/

background-color:#060;

}

li{

float:left;

font-size:14px;

font-family:’微软雅黑’;

width:130px;

line-height:30px; /*内容可以垂直居中*/

text-align:center; /*文本居中*/

border-right:#930 solid 1px;

box-sizing:border-box; /*内减模式*/

}

a{

text-decoration:none;

color:#FFF;

}

a:hover{

background-color:#090;

display:block;

}

</style>

</head>

<body>

<ul>

<li><a href=”#”>公司首页</a></li>

<li><a href=”#”>产品介绍</a></li>

<li><a href=”#”>用户反馈</a></li>

<li><a href=”#”>给我留言</a></li>

<li><a href=”#”>联系我们</a></li>

<li><a href=”#”>公司简介</a></li>

</ul>

运行结果

例题（图片排版）

<style type=”text/css”>

*{

margin:0px;

padding:0px;

}

#con{

width:440px;

margin:auto;

list-style-type:none;

overflow:hidden;

}

#con li{

float:left;

width:110px;

}

</style>

<ul id=”con”>

<li><img src=”images14/ba1.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba2.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba3.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba4.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba5.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba6.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba7.jpg” width=”100″ height=”167″ /></li>

<li><img src=”images14/ba8.jpg” width=”100″ height=”167″ /></li>

</ul>

css3和css2的区别

CSS3比CSS2 多了一些属性，在做特效上功能变得很强大。

广义上的h5=html5+css3+js+js框架

css3的新增属性

1. 內减模式：默认情况下，盒子的尺寸是外加模式，盒子实际宽度=盒子的宽度+填充+边框粗细。所以很多情况下，指定了填充以后，盒子尺寸会变大，解决方法：我们可以使用內减模式，就是指定盒子的宽度就是总宽度，如果指定填充，盒子中内容的宽度-填充=实际内容的宽度。

<style type=”text/css”>

div{

width:200px;

height:200px;

border:#000 solid 1px;

padding-left:50px;

box-sizing:border-box; /*内减模式*/

}

</style>

<div>锄禾日当午</div>

css3的新增属性选择器

CSS2有4个属性选择器，CSS3添加了3个。

CSS3新增的伪类选择器

CSS3新增的伪对象选择器

E:before 在E元素里面前面插入一个盒子（行显示）

E:after 在E元素的里面的后面插入一个盒子（行显示）

注意：这个两个伪对象必须和content属性一起使用

例题：

<style type=”text/css”>

*{

margin:0px;

padding:0px;

}

div{

width:290px;

height:25px;

border:#000 solid 1px;

margin:100px auto;

}

div:before,div:after{

content:”;

width:25px;

height:25px;

display:inline-block;

margin:0px 10px;

background:url(images17/tu1.png) no-repeat;

vertical-align:middle; /*盒子的居中对齐*/

}

input[type=’text’]{

height:25px;

width:200px;

border:none;

}

div:after{

background:url(images17/tu2.png) no-repeat;

}

</style>

<div><input type=”text” name=”con” /></div>

作业：

1. 实现如下效果

1. 实现如下效果

1. 实现如下导航

拼版