武汉纺织大学传媒学院 cm.wtu.edu.cn 第17节 div与span标签 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/25 传媒学院
1、div 区域标签，一个矩形区域，本身不具有任何效果，但可以设置任何样式 语法 <div>…</div> div里可以放任何标签或元素，可以这样理解，它就是一个小浏览器窗口 div可以嵌套 Div中还可以放置div，也就是div中可放任意元素 2019/4/25 传媒学院
例子 <div> welcome to wuhan 用户看到的效果 查看器观察其结构 2019/4/25 传媒学院
2、css样式项“方框” 用来设置标签（比如div标签）的大小边界等样式 填充是指div中元素与div边界的距离 2019/4/25 传媒学院
3、css样式项“边框” 用来设置标签（比如div标签）的边框样式 可以给div添加边框（默认没有） 2019/4/25 传媒学院
4、div样式使用举例 div设置样式的步骤 先给div一个id值，一般来说div放置什么内容，就如何命名，比如div用来放置页面的logo图片，就可以给div命名为logo，我们这里命名为test 然后创建样式（鼠标放置在div标签处，dw会自动给出样式的选择器名称） 注：不要给div设置div标签样式，因为一个网页中往往有多个div 2019/4/25 传媒学院
设置div边框的例子 2019/4/25 传媒学院
设置大小的例子 2019/4/25 传媒学院
设置填充的例子 填充：div内元素到div边框的距离 填充会影响div的大小 填充＋宽（高）度是div的总宽（高）度 2019/4/25 传媒学院
设置边界的例子 边界：div和周围元素的间隔 边界距离对div的大小没有影响 2019/4/25 传媒学院
设置背景的例子 除规则定义面板中的方框和边框外，其他样式也可应用到div中，比如“背景”等 2019/4/25 传媒学院
设置div居中的例子 设置“方框”中“边界”左右取值为“自动”，且要指定宽度 2019/4/25 传媒学院
5、span 用来标记一行内的元素，本身也不具有任何效果，比如：希望给一段文字增加css样式，但该该段文字没被任何标记包含，只想应用css样式，这时就可以使用span标记，然后在该span中使用定义的样式 例子 2019/4/25 传媒学院
作业 设计一个页面达到如下效果 要求：中间文字上下左右居中，文字的颜色为白色，文字的背景为蓝色；方框在浏览器中居中 2019/4/25 传媒学院