TP03 网页局部布局.ppt

1、网页局部布局,第三讲,局部布局新闻导航,基于列表的布局,新闻列表,使用无序列表：div-ul-li, 重庆 发改委 河南 ,列表属性2-1,列表（li）常用属性 list-style （列表风格）,list-style属性规定的列表风格,列表属性2-2,列表属性的典型应用：导航菜单, li list-style:none; 重庆 ,设置列表为none去掉圆点,示例12样式表,body font:12px/20px Tahoma; img border:0; li list-style:none; .sidebar float:left; width:157px; .sidebar h1 cle

2、ar:both; .side_list height:250px; background:url(./Images/sidebarbg.gif) no-repeat; margin:2px 0 12px 0;,设置背景图片,级联式选择器,示例12HTML, 重庆涉黑富豪 发改委：4万亿 河南2个 ,级联式选择器表示样式之作用到选择器所定义类别下嵌套的标签、类别或ID选择器,背景属性2-1,背景属性： background （缩写形式） background-color（背景色 ） background-image（背景图 ） background-repeat（背景图重复方式 ） backgr

3、ound-position（位置坐标、偏移量）,四类平铺效果,背景属性2-2,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出现的水平和垂直位置坐标，实现各种拍偏移效果,设置背景图片、不重复平铺,各种偏移效果,示例12HTML, 重庆涉黑富豪 发改委：4万亿 河南2个 ,超链接,超链接,超链接-实现页面间的导航,链接文本或图像,链接地址（目标）, 灿坤蒸气电熨斗 ,基本语法,链接在新窗口中打开, 链接热点文本或图像,示例12HTML, 重庆涉黑富豪 发改委：4万亿 河南2个 ,链

4、接到当前页面,超链接样式,示例12样式表,body font:12px/20px 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

5、; margin:2px 0 12px 0;,超链接样式,超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式,超链接样式的特点,加链接后，图片/文本样式的变化,超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活选定状态（a:active ）,可以分别设置链接的四种状态的样式,超链接伪类样式,超链接伪类样式,采用选择器：状态的方式分别定义样式，一般称为伪类,如何设置超链接的样式, .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font

6、-size:20px; 家用电器 手机数码 ,1、先定义共有样式：表示.nai类下标签中的链接样式,设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态,2、再单独定义某个状态特有的样式,导航版块的链接样式一般和页面样式不同，需单独定义,三类应用样式的方式 内部样式表 外部样式表 行内样式,如何应用样式3-1, . /样式定义 /HTML内容 ,HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用,三类应用样式的方式 内部样式表 外部样式表 行内样式,如何应用样式3-2,.nav li apaddi

7、ng:8px 10px; . /CSS样式定义, /HTML内容 ,分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS,三类应用样式的方式 内部样式表 外部样式表 行内样式表,如何应用样式3-3, 日用百货 ,单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用,各类样式有继承 各类样式的优先级 浏览器默认设置 外部样式表文件 内部样式表 行内样式表 ID选择器 类选择器 标签选择器,样式的优先级3-1,由低到高，“近者优先”原则,样式的优先级3-2,“日用百货”链接, .nav ul li a:linkcolor:blue; 家用电器 手机数码 日用百货 ,内部样式表,外部样式表,行内样式表,红色,蓝色,样式的优先级3-3,购物车的样式, #nav_id width:300px;background: #ccc; .nav height:100px; background: