预览加载中，请您耐心等待几秒...

HTML基础与层叠样式单CSS.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共50页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

第2章HTML基础与层叠样式单CSS学习要点：HTML基础与层叠样式单CSS第2章HTML基础与层叠样式单CSS案例名称：HTML网页框架标记类型HEAD头元素HTML的常用标记字体标记序号序号序号图片标记序号超级链接书签链接电子邮件链接列表有序列表标记<OL>无序列表标记<UL>基本表格表格的灵活应用Cellpadding和Cellspacing表格的样式表单（1）表单头及其属性（2）表单中常用控件序号序号序号块级元素预排版标记设计网页框架帧技术又叫框架技术。迄今为止，我们所提到的所有网页都能链接到其他网页，但是每次只能显示一个网页，为了能够在同一浏览器中显示多个页面，则必须使用帧技术。分帧式网页起始于开始标记<frameset>。帧集有两个重要属性，即cols属性(列属性)和rows属性(行属性)，其中cols属性给出了帧集页面的纵向布局，而rows属性则给出了帧集页面的横向布局。这两个属性会指定每个帧的宽度，或像素值，或所占屏幕的百分比。例如<framesetcols=“110,*”>告诉浏览器该网页有两个帧，第一个从屏幕左侧扩展了110个像素点，第二个帧填充了屏幕的剩余部分。帧集标记只说明在一个浏览器中可以有多少个页面，但是每个页面该如何表达，是标记<frameset>无法实现的，因此在<frameset>…</frameset>内必须将每个帧的内容表达出来。HTML是通过在<frameset>…</frameset>内嵌套<frame>来实现的。帧标记<frame>常用的格式为：<framename="main"src="main.html">name属性是标识帧，而src则表示在该帧中建立一个超链接。帧标记往往与下面的格式一起使用：<ahref=“link.html”,target=“main”>其作用是在name属性为“main”的帧中加载页面link.html。 而<noframes>…</noframes>标记对也是放在<frameset>…</frameset>标记对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。Iframe标记(浮动帧标记)案例2-2使用框架MARQUEE标记作业1制作网站相册作业2制作友情链接页面CSS概述例如：HTML标记选择符例如：用户定义的类选择符定义超级链接样式加载CSS样式的三种方式链入外部样式表导入外部样式表例子<head> <linkhref="css.css"rel="stylesheet"type="text/css"media="all"/> </head> <body> <divid="container"> <divid="header"> <divid="menu"> <ul> <li><ahref="#">首页</a></li> <liclass="menuDiv"></li> <li><ahref="#">博客</a></li> <liclass="menuDiv"></li> <li><ahref="#">设计</a></li> <liclass="menuDiv"></li> <li><ahref="#">相册</a></li> <liclass="menuDiv"></li> <li><ahref="#">论坛</a></li> <liclass="menuDiv"></li> <li><ahref="#">关于</a></li> </ul> </div> <divid="banner"> </div> </div> <divid=“pagebody”> <divid=“sidebar”> </div> <divid=“mainbody”> </div> <div> <divid=“footer”> </div> </div> </body> </html>/*基本信息*/ body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;} a:link,a:visited{font-size:12px;text-decoration:none;} a:hover{} /*页面层容器*/ #container{width:800px;height:600px;margin:10pxauto} /*页面头部*/ #header{background:url(logo.gif)no-repeat} #menu{padding:20px20px00} #menuul{float:right;list-style:none;margin:0px;} #menuulli{float:left;