网站开发课程地位.目标 及章 节1.pptVIP

第17-18节 边框与边距属性及列表属性 上节回顾 背景属性 边框属性 上节案例学生展示 学生展示完善后的上节案例 本节目标 掌握边距属性和填充属性 掌握列表属性 熟练使用列表制作导航条 本节案例 制作导航条 边距属性 上边距margin-top 边距属性 下边距margin-bottom 左边距margin-left 右边距margin-right 边距属性 边距的复合属性margin 填充属性 上填充padding-top 填充属性 下填充padding-bottom 左填充padding-left 右填充padding-right 填充属性 复合属性padding 列表属性 列表符号list-style-type disc：实心圆（默认值） circle：空心圆 square：实心方块 none：无符号 列表属性 图像符号list-style-image 使用列表制作导航条 总结 案例扩展 制作竖排导航 5个问题 如何设置上边距为5px？ 如何设置上下左右的外边距都为10px？ 如何设置内填充上下为10px，左右为20px？ 如何设置列表的符号为方形？ 如何设置列表符号为图像？ 下节预习 了解布局标签DIV和SPAN的含义几区别 掌握使用DIV布局的原理——盒子模型 充分理解margin与padding属性 掌握边距属性和填充属性 了解边距和填充的区别 掌握列表属性 熟练使用列表制作导航条 上边距也叫顶端边距，使用上边距可以设置元素的上边界，可以使用长度值和百分比。 语法： margin-top：边距值 说明： margin-top取值范围包括如下： 长度值相当于设置顶端的绝对边距值，包括数字和单位；百分比是设置相对于上级元素的宽度的百分比，允许使用负值；Auto是自动取边距值，即元素的默认值。 举例: html head title顶端边距/title style type=text/css !-- img { 　　 margin-top: 30pt; } -- /style /head body img src=images/biao.jpg width=119 height=188 align=left 　　Swatch 2006秋冬时尚全新上市，天色渐渐变暗，夜幕缓缓降临。城市里的灯光开始闪烁，轻柔的音乐在空气中弥漫……渐渐地，在黑暗中，灯光投射出的影子，慢慢开始清晰。当这一切开始在色彩与梦幻之间舞蹈时，所有的焦点都聚集在全新登场的Swatch秋冬系列上。 /body /html 底边边距用于设置原素下方的边距值；左侧边距和右侧边距则分别用于设置元素左右两侧的边距值。其语法和用法与顶端边距类似，下面用一个例子来看底边边距、左侧边距和右侧边距的效果。 举例： html head title其他边距/title style type=text/css !-- img { 　　 margin-top: 20pt; 　　 margin-right: 50px; 　　 margin-bottom: 10px; 　　 margin-left: 50px; } -- /style /head body img src=images/biao.jpg width=119 height=188 align=left 　　Swatch 2006秋冬时尚全新上市，天色渐渐变暗，夜幕缓缓降临。城市里的灯光开始闪烁，轻柔的音乐在空气中弥漫……渐渐地，在黑暗中，灯光投射出的影子，慢慢开始清晰。当这一切开始在色彩与梦幻之间舞蹈时，所有的焦点都聚集在全新登场的Swatch秋冬系列上。 /body /html 边距的复合属性为对4个边距设置的略写。 语法：margin：长度值 | 百分比 | auto Margin的值可以取1到4个，如果只设置一个值，则应用于所有的四个边界；如果设置两个或三个值，则省略的值与对边相等；如果设置4个值，则按照上、右、下、左的顺时针顺序分别对应其边距。 举例： html head title复合属性边距/title style type=text/css !-- img { 　　 margin:10pt 30px 10px 20px; } -- /style /head