MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » HTML中的列表跟框架

HTML中的列表跟框架

www.MyException.Cn  网友分享于:2013-02-20  浏览:0次
HTML中的列表和框架

先来复习一下HTML中的表格标签,写一个简单的菜单表格

<html>
<head>
<title>菜谱</title>
</head>
<body>
<table border=1 bordercolor=#E674FA cellspacing=0 height=80 align=center width=400px>
<tr align=center><td colspan=3>菜谱</td></tr>

<tr align=center><td rowspan=2>素菜</td><td>青菜</td><td>土豆</td></tr>
<tr align=center><td>豆腐</td><td>辣椒</td></tr>

<tr align=center><td rowspan=2>荤菜</td><td>鲈鱼</td><td>大虾</td></tr>
<tr align=center><td>海参</td><td>鲍鱼</td></tr>
</table>
</body>
</html>

网页打开如图所示


HTML中的列表标签,HTML支持有序列表和无序列表

无序列表是一个项目的列表,此列项目默认使用粗体圆点(典型的小黑圆圈)进行标记,也可以用其他图形进行标记

无序列表始于<ul>标签,每个列表项始于<li>

有序列表也是一列项目,列表项目使用数字进行标记

有序列表始于<ol>标签,每个列表项始于<li>标签

<ol>可选的属性如下


下面举几个例子

<html>
<head>
<title>Welcome</title>
</head>
<body>
****无序****</br>
<ul>
<li>传奇</li>
<li>反恐精英</li>
<li>劲舞团</li>
</ul>
<ul type="square">
<li>传奇</li>
<li>反恐精英</li>
<li>劲舞团</li>
</ul>
****有序****</br>
<ol>
<li>传奇</li>
<li>反恐精英</li>
<li>劲舞团</li>
</ol>
<ol type="1" start="6">
<li>传奇</li>
<li>反恐精英</li>
<li>劲舞团</li>
</ol>
</body>
</html>
网页打开如图


HTML中的框架

通过使用框架,可以在同一个浏览器窗口中显示不止一个页面

框架结构标签<frameset>

框架结构标签<frameset>定义如何将窗口分割为框架

每个frameset定义了一系列行或列

rows/columns的值规定了每行或每列占据屏幕的面积

框架标签Frame

Frame标签定义了放置在每个框架中的HTML文档

假如一个框架有可见边框,用户可以拖动边框来改变它的大小,为了避免这种情况发生,可以在<frame>标签中加入:noresize scrolling="no"

注意:不能将<body></body>标签与<frameset></frameset>标签同时使用

下面写一个简单的框架,实现基本的切换功能

top.html
<body>
<img src="qq.jpg"/>
</body>
left.html
<body bgcolor="pink">
<a href="right1.html" target="right">青花瓷</a></br>
<a href="right2.html" target="right">东风破</a></br>
</body>
right1.html
<body>
青花瓷歌词
</body>
right2.html
<body>
东风破歌词
</body>
text1.html
<frameset rows="30%,*",frameborder=0>
<frame src="top.html" noresize scrolling="no"/>
<frameset cols="20%,*">
<frame src="left.html" noresize scrolling="no"/>
<!--frame元素有一个name属性,相当于给该frame取名-->
<frame src="right1.html" name="right"/>
</frameset>
</frameset>

网页打开如图

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有