《TP03网页局部布局》由会员分享，可在线阅读，更多相关《TP03网页局部布局（24页珍藏版）》请在金锄头文库上搜索。
1、网网网网页页局部布局局部布局局部布局局部布局第三第三第三第三讲讲局部布局新闻导航基于列表的布局基于列表的布局新闻列表新闻列表使用无序列表：使用无序列表：div-ul-li 重重庆庆 发发改委改委 河南河南 演示案例演示案例11：新闻列表：新闻列表列表属性2-1列表（列表（li）常用属性）常用属性list-style （列表风格）（列表风格）属性值属性值方式方式语法实现语法实现示例示例none无风格无风格list-style:none; 刷牙刷牙 洗脸洗脸disc实心圆（实心圆（默认默认类型）类型）list-style:disc; 刷牙刷牙 洗脸洗脸circle空心圆空心圆list-style:
2、circle; 刷牙刷牙 洗脸洗脸square实心正方形实心正方形list-style:square; 刷牙刷牙 洗脸洗脸decimal数字（数字（默认类默认类型）型）list-style:decimal1. 刷牙刷牙2. 洗脸洗脸list-style属性规定的属性规定的列表风格列表风格列表属性2-2列表属性的典型应用：导航菜单列表属性的典型应用：导航菜单 li list-style:none; 重重庆庆 设置列表为设置列表为none去掉去掉圆点圆点演示案例演示案例12：导航菜单：导航菜单示例12样式表body font:12px/20px Tahoma;img border:0;li lis
3、t-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 重庆涉黑富豪 发改委：4万亿 河南2个 级联式选择器表示样式之作用到选择器所定义类别级联式选择器表示样式之作用到选择器所定义类别下嵌套的标签、类别或下嵌套的标签、类别或ID选择器选择器背景属性2-1背景属性
4、：背景属性：background （缩写形式）（缩写形式）background-color（背景色背景色 ）background-image（背景图背景图 ）background-repeat（背景图重复方式背景图重复方式 ）background-position（位置坐标、偏移量）位置坐标、偏移量）四类平铺四类平铺效果效果演示案例演示案例13：背景属性：背景属性背景属性2-2div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px背景出现的水平和垂背景出现的水平和垂直位置坐标，实现各直位置坐标，
5、实现各种拍偏移效果种拍偏移效果 设置背景图片、不设置背景图片、不重复平铺重复平铺 各种偏移各种偏移效果效果 演示案例演示案例14：背景的偏移量：背景的偏移量示例12HTML 重庆涉黑富豪 发改委：4万亿 河南2个 超链接超链接超链接 超链接超链接-实现页面间的导航实现页面间的导航链接文本或图像链接文本或图像链接地址（目标）链接地址（目标） 灿灿坤蒸气坤蒸气电电熨斗熨斗基本语法链接在新链接在新窗口中打窗口中打开开 链链接接热热点文本或点文本或图图像像示例12HTML 重庆涉黑富豪 发改委：4万亿 河南2个 链接到当前页面链接到当前页面超链接样式示例12样式表body font:12px/20px
6、 Tahoma;img border:0;li list-style:none;a color:#335884; text-decoration:none;a:hover color:#f00; text-decoration:underline;.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;超链接样式超链接样式超链接样式的特殊性超链接样式的
7、特殊性文本或图像加上链接，将失文本或图像加上链接，将失去原样式而继承链接的样式去原样式而继承链接的样式超链接样式的特点加链接后，加链接后，图片图片/文本样文本样式的变化式的变化超链接样式的四种状态超链接样式的四种状态未访问状态（未访问状态（a:link ）已访问状态（已访问状态（a:visited ）鼠标移上状态（鼠标移上状态（a:hover ）激活选定状态（激活选定状态（a:active ）可以分别设置可以分别设置链接的四种状链接的四种状态的样式态的样式超链接伪类样式超链接伪类样式超链接伪类样式伪伪 类类示示 例例说说 明明a:linka:linkcolor:#999;未访问状态未访问状态a
8、:visiteda:visitedcolor:#333;已访问状态已访问状态a:hovera:hovercolor:#ff7300; 鼠标移上状态鼠标移上状态a:activea:activecolor:#999;激活选定状态（鼠激活选定状态（鼠标点击未释放时）标点击未释放时）采用选择器：状态的方式分别定采用选择器：状态的方式分别定义样式，一般称为伪类义样式，一般称为伪类如何设置超链接的样式 .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font-size:20px; /style 家用电器家用电器 手机数码手机数码演示示例演
9、示示例15：伪类：伪类1、先定义共有样式：表示、先定义共有样式：表示.nai类下类下标签中的链接样式标签中的链接样式设置超链接样式的步骤：设置超链接样式的步骤：1、确定页面所有链接样式是否相同，否则分开定义、确定页面所有链接样式是否相同，否则分开定义2、先定义四个状态共有样式，再分别定义其他状态、先定义四个状态共有样式，再分别定义其他状态2、再单独定义某个状、再单独定义某个状态特有的样式态特有的样式导航版块的链接样式导航版块的链接样式一般和页面样式不同，一般和页面样式不同，需单独定义需单独定义三类应用样式的方式三类应用样式的方式内部样式表内部样式表 外部样式表外部样式表 行内样式行内样式如何应
10、用样式3-1 . /样式定义样式定义 /HTML内容内容HTML和和CSS在同一文件，在同一文件，方便开发时修改，样式和方便开发时修改，样式和内容分离不够彻底，不利内容分离不够彻底，不利于页面复用于页面复用三类应用样式的方式三类应用样式的方式内部样式表内部样式表 外部样式表外部样式表 行内样式行内样式如何应用样式3-2.nav li apadding:8px 10px;. /CSS样式定义样式定义 /HTML内容内容分别定义分别定义*.css和和*.html文件，文件，样式和内样式和内容彻底分离容彻底分离，多个网页，多个网页可共享同一可共享同一CSS演示示例演示示例2：外部样式表：外部样式表三
11、类应用样式的方式三类应用样式的方式内部样式表内部样式表 外部样式表外部样式表 行内样式表行内样式表如何应用样式3-3 日用百货日用百货单独定义某个元素的样单独定义某个元素的样式，灵活方便。式，灵活方便。但但因为因为内容与样式混写在一起，内容与样式混写在一起，应尽量少用或不用应尽量少用或不用演示示例演示示例3：行内样式表：行内样式表各类样式有继承各类样式有继承各类样式的优先级各类样式的优先级浏览器默认设置浏览器默认设置外部样式表文件外部样式表文件 内部样式表内部样式表 行内样式表行内样式表 ID选择器选择器类选择器类选择器标签选择器标签选择器 样式的优先级3-1 由低到高，由低到高，“近近者优先
12、者优先”原则原则样式的优先级3-2“日用百货日用百货”链接链接 .nav ul li a:linkcolor:blue; 家用电器家用电器 手机数码手机数码 日用百货日用百货 内部样式表内部样式表外部样式表外部样式表行内样式表行内样式表红色红色蓝色蓝色演示示例演示示例16：样式优先级：样式优先级样式的优先级3-3购物车的样式购物车的样式 #nav_id width:300px;background: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 购物车购物车 ID选择器选择器类选择器类选择器标签选择器标签选择器不冲突的样式，边不冲突的样式，边框框5px、绿色、绿色同时应用同时应用ID、class、标签三、标签三类选择器类选择器灰色背景灰色背景 演示示例演示示例17：CSS优先级优先级
