TP03网页局部布局.pptVIP

* 图片添加了边框，文本添加了下划线 伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字 * * 解释：.nav li a的含义，限定范围 * 强调：顺时针赋值 * 强调：顺时针赋值 * 强调：顺时针赋值 93 class stop here * 网页局部布局 第三讲 局部布局—新闻导航 基于列表的布局 新闻列表 使用无序列表：div-ul-li …… div class=sidebar h1 img src=../Images/title_1.gif alt=国内新闻 / /h1 div class=side_list ul li a href=#b 重庆……/b/a /li li a href=#b 发改委……/b/a /li li a href=#b 河南……/b/a /li /ul /div …… /div 演示案例11：新闻列表 列表属性2-1 列表（li）常用属性 list-style （列表风格） 属性值 方式 语法实现 示例 none 无风格 list-style:none; 刷牙 洗脸 disc 实心圆（ul默认类型） list-style:disc; ● 刷牙 ● 洗脸 circle 空心圆 list-style:circle; ○ 刷牙 ○ 洗脸 square 实心正方形 list-style:square; ■ 刷牙 ■ 洗脸 decimal 数字（ol默认类型） list-style:decimal 1. 刷牙 2. 洗脸 list-style属性规定的列表风格 列表属性2-2 列表属性的典型应用：导航菜单 style …… li{ list-style:none; } …… /style …… ul li重庆……/li …… /ul 设置列表为none去掉圆点 演示案例12：导航菜单 示例12样式表 body{ font:12px/20px Tahoma;} img{ border:0;} li{ list-style:none;} .sidebar{ float:left; width:157px;} .sidebar h1{ clear:both;} .side_list{ height:250px; background:url(../Images/sidebarbg.gif) no-repeat; margin:2px 0 12px 0;} 设置背景图片 级联式选择器 示例12HTML …… div class=sidebar h1 img src=Images/title_1.gif alt=国内新闻 / /h1 div class=side_list ul li a href=#b 重庆涉黑富豪……/b/a /li li a href=#b 发改委：4万亿……/b/a /li li a href=#b 河南2个……/b/a /li /ul /div /div …… 级联式选择器表示样式之作用到选择器所定义类别下嵌套的标签、类别或ID选择器 背景属性2-1 背景属性： background （缩写形式） background-color（背景色 ） background-image（背景图 ） background-repeat（背景图重复方式 ） background-position（位置坐标、偏移量） 四类平铺效果 演示案例13：背景属性 背景属性2-2 div{ background:url(images/bg.jpg) no-repeat; background-position: -70px -60px } 背景出现的水平和垂直位置坐标，实现各种拍偏移效果 设置背景图片、不重复平铺 各种偏移效果 演示案例14：背景的偏移量 示例12HTML …… div class=sidebar h1 img src=Images/title_1.gif alt=国内新闻 / /h1 div class=side_list ul li a href=#b 重庆涉黑富豪……/b/a /li li a href=#b 发改委：4万亿……/b/a /li li a href=#b 河南2个……/b/a /li /ul /div /div …… 超链接 超链接 超链接---实现页