网页初级编程.ppt

实例14： 绝对定位 style type=text/css .box3{ border:0px solid #00CCCC;width:175px; height:230px; position:absolute;left:350px; top:100px;} h3.title{ background:url(n1.jpg); height:28px; line-height:28px; text-align:center; font-size:16px; margin:0px; color:#CC66FF; } ul.list{ background:url(n2.jpg); margin:0px; padding:5px 10px; list-style:none; } ul.list li{ padding:3px 10px;} /style div class=box3 h3 class=title网站栏目/h3 ul class=list lia href=#DIV CSS入门/a/li lia href=#HTML入门教程/a/li lia href=#CSS实例/a/li lia href=#DIVCSS5首页/a/li lia href=#DIV CSS模块模板/a/li lia href=#DIV CSS WEB标准/a/li /ul /div 实例15： CSS特效（css-menu/changeButton.html） form action=“” method=“” select name=“gx” size=1 option value=“ldh”刘德华 option value=“zxy” selected张学友 option value=“gfc”郭富城 option value=“lm”黎明 /select /form form textarea clos=20 rows=10 多行文本输入区域 /textarea /form 实例1-10：表单综合实例（作业） index.html: frameset rows=15%,* frame src=“top.html” name=“top” frameset cols=“25%,*” frame src=“memu.html” name=“left” frame src=“page1.html” name=“main” /frameset /frameset menu.html: a href=“page1.html” target=“main”page1/a a href=“page2.html” target=“main”page2/a page1.html: body h3the first page/h3 /body page2.html: body h3the second page/h3 /body Top.html: h1网站后台管理系统/h1 实例1-11：框架标签 2.1 CSS 简介 2.2 CSS 定义 2.3 CSS 控制样式 2.4 CSS 文字样式 2.6 CSS 图片样式 2.5 CSS 段落样式 2.7 CSS 滤镜效果 2.8 DIV 盒子模型 1. CSS概念 CSS称为层叠样式表，是用于控制网页样式，并将网页样式与网页内容分离的标记语言。 2.1 CSS简介 head style type=text/css h2, #f1, .f2{font-family:隶书;} h2{color:blue;} /*标记选择器*/ #f1{size:3; } /*id选择器*/ .f2{color:purple;} /*class选择器*/ /style /head 2.2 CSS定义 单独声明 集体声明 【长征】 作者:毛泽东　 红军不怕远征难，万水千山只等闲五岭逶迤腾细浪，乌蒙磅礴走泥丸金沙水拍云崖暖，大渡桥横铁索寒更喜岷山千里雪，三军过后尽开颜 实例1： CSS实现效果 head style type=text/css body{font-family:隶书;font-size: 14px; color:green;} /style /head 2.3 CSS控制样式 内嵌样式: te