武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第17节 div与span标签 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/25 传媒学院

2 1、div 区域标签，一个矩形区域，本身不具有任何效果，但可以设置任何样式 语法
<div>…</div> div里可以放任何标签或元素，可以这样理解，它就是一个小浏览器窗口 div可以嵌套 Div中还可以放置div，也就是div中可放任意元素 2019/4/25 传媒学院

3 例子 <div> welcome to wuhan 用户看到的效果 查看器观察其结构 2019/4/25 传媒学院

4 2、css样式项“方框” 用来设置标签（比如div标签）的大小边界等样式 填充是指div中元素与div边界的距离
2019/4/25 传媒学院

5 3、css样式项“边框” 用来设置标签（比如div标签）的边框样式 可以给div添加边框（默认没有） 2019/4/25 传媒学院

6 4、div样式使用举例 div设置样式的步骤
先给div一个id值，一般来说div放置什么内容，就如何命名，比如div用来放置页面的logo图片，就可以给div命名为logo，我们这里命名为test 然后创建样式（鼠标放置在div标签处，dw会自动给出样式的选择器名称） 注：不要给div设置div标签样式，因为一个网页中往往有多个div 2019/4/25 传媒学院

7 设置div边框的例子 2019/4/25 传媒学院

8 设置大小的例子 2019/4/25 传媒学院

9 设置填充的例子 填充：div内元素到div边框的距离 填充会影响div的大小 填充＋宽（高）度是div的总宽（高）度 2019/4/25
传媒学院

10 设置边界的例子 边界：div和周围元素的间隔 边界距离对div的大小没有影响 2019/4/25 传媒学院

11 设置背景的例子 除规则定义面板中的方框和边框外，其他样式也可应用到div中，比如“背景”等 2019/4/25 传媒学院

12 设置div居中的例子 设置“方框”中“边界”左右取值为“自动”，且要指定宽度 2019/4/25 传媒学院

13 5、span 用来标记一行内的元素，本身也不具有任何效果，比如：希望给一段文字增加css样式，但该该段文字没被任何标记包含，只想应用css样式，这时就可以使用span标记，然后在该span中使用定义的样式 例子 2019/4/25 传媒学院

14 作业 设计一个页面达到如下效果 要求：中间文字上下左右居中，文字的颜色为白色，文字的背景为蓝色；方框在浏览器中居中 2019/4/25
传媒学院