HTML 无序排列 有序排列 框架

HTML 无序排列  有序排列 :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 第四讲代码汇总</title>
</head>

<!--
margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px)
margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px)
margin-top 对象上边外延边距 (margin-top:5px; 上边外延距离5px)
margin-bottom 对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)
表示与周围边框的距离,如下0px所示,表示列表位于可视界面的最顶端,紧贴可视界面边框。
-->
<body style="margin-top :0px; margin-left :0px">

*****************************************************************************************************************************************
<h3>1.无序列表如下:</h3>
<!--<ul> 标签表示无序列表-->
<ul type = "disc">
<!--<li> 标签定义列表项,有序列表和无序列表中都使用 <li> 标签-->
<li> 传奇</li>
</ul>
<!--type元素定制列表元素,无序列表中disc表示圆点,circle表示圆圈,squars表示方块-->
<ul type = "circle">
<li> 传奇</li>
</ul>
<ul type = "square">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ul>

*****************************************************************************************************************************************
<h3>2.有序列表如下:</h3>

<!--<ol> 标签表示有序列表-->
<ol type = "i">
<!--<li> 标签定义列表项,有序列表和无序列表中都使用 <li> 标签-->
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<!--type元素定制列表元素,有序列表中type属性值有a,A,i,I,1
a 表示以小写字母a,b,c,...排序
A表示以大写字母A,B,C,...排序
i表示以小写罗马数字i,ii,iii,iv,...排序
I表示以大写罗马数字I,II,III,...排序
1表示以阿拉伯数字1,2,3,...排序
-->
<!--start属性设定开始数目,以1,2,3,...表示,否则默认从1开始排序-->

<ol type = "I" start = "3">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<ol type = "a">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<ol type = "A">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<ol type = "1">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>

</body>


</html>

HTML框架示例1:

<html>

<head>
<title>HTML框架示例</title>

</head>

<!--各窗口的尺寸设置,
cols表示纵向排列多个窗口:
rows表示横向排列多个窗口-->
<frameset  cols = "80%,20%">

<!--默认情况下排列好的窗口可以用鼠标移动,若在其后加 noresize 属性,则排列好后不能移动-->
<!--frameborder属性确定有无边框,0表示无,1表示有边框-->
<!--name 对窗口进行标识,之后可对此标识进行各窗口间相互操作(起名,以便进行替换)-->
<frame src = "歌曲列表.html" name = "a1" noresize >

<frame src = "b.html"  name = "a2" frameborder = "0">

</frameset>

</html>

注意:如果a.html包括了其他的页面(frameset)则要求a.html本身不能有body模块(不能出现body标记,代码中也不能出现body模块中才有的内容,如文字等)。


如何去掉Html中frameset产生的横向滚动条

在body标签里写上style="OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN"

同理去竖条的话就是把OVERFLOW-X:HIDDEN改成OVERFLOW-y:HIDDEN

如在一下的  歌曲列表.html  的body标签中加上该style

歌曲列表.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>歌曲列表</title>
</head>
<p><body <span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(254, 254, 242);">style="OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN"</span>></p><!--target表示我们点击后,目标指向谁(也就是在哪显示)-->
<a href = "周杰伦.html" target="a2">周杰伦</a><br>
<a href = "汪峰.html" target="a2">汪峰</a><br>
</body>
</html>

Ø  Target属性有四个属性值:

Ø  <a href=url  target=_blank> 在新窗口打开
<a href=url  target=_self> 在本窗口打开
<a href=url  target=_parent> 父窗口
<a href=url  target=_top> 整个浏览器窗口

Ø  还有一种就是在target后直接写上要替换的frame的名字


周杰伦.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>周杰伦歌词</title>
</head>
<body bgcolor = "red" >
这是周杰伦的歌词
</body>
</html>

汪峰.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>汪峰的歌词</title>
</head>
<body bgcolor = "yellow">
这是汪峰的歌词
</body>
</html>

b.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>歌词</title>
</head>
<body bgcolor = "red" >
这边是歌词
</body>
</html>
显示效果如下图所示:



HTML框架示例2:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>all</title>
</head>
<frameset rows = "20%,80%">
<frame src = "top.html" nmae = "a1">
	<!--嵌套分割界面-->
	<frameset cols = "20%,80%">
	<frame src = "left.html" name = "a2">
	<frame src = "right.html" name = "a3">
	</frameset>
</frameset>



</html>

left.html

<html>
<head>
<title>left歌曲列表</title>
</head>
<body bgcolor = "#FFB5B5">
<a href="青花瓷.html" target="a3">青花瓷</a><br>
<a href="当兵的人.html" target="a3">当兵的人</a><br>
<a href="青花瓷.html" target="a3">青花瓷</a><br>
<a href="当兵的人.html" target="a3">当兵的人</a><br>
<a href="青花瓷.html" target="a3">青花瓷</a><br>
<a href="当兵的人.html" target="a3">当兵的人</a><br>

<br>
<br>
<br>
<br>
<br>
<br>
<a href="right.html" target="a3">返回</a><br>
</body>



</html>

top.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>top</title>
</head>
<body bgcolor="#DFFFDF">
<img src = "top.png" width="200px" height = "80px"/>
<table border = "0px" width = "60%" height = "80px" align = "right" >
<tr align = "left">
<td >音乐</td >
<td>排行榜</td>
<td>空间</td>
<td >原创</td >
<td>舞曲</td>
<td>美图</td>
<td >娱乐</td >
<td>电台</td>
</tr>
</table>

<table border = "0px" width = "70%" height = "10px" align = "right" bgcolor = "yellow">
<tr align = "left">
<td >音乐</td >
<td>排行榜</td>
<td>空间</td>
<td >原创</td >
<td>舞曲</td>
<td>美图</td>
<td >娱乐</td >
<td>电台</td>
<td>舞曲</td>
<td>美图</td>
<td >娱乐</td >
<td>电台</td>
</table>


</body>



</html>


right.html

<html>
<head>
<title>right显示屏</title>
</head>
<body 	bgcolor="#CEFFCE">
<table width="50%" height="50%" align = "center">
<tr>
<td>
这边是歌词
</td>
</tr>
</table>
</body>
</html>
显示效果如下图:





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值