HTML 无序排列 有序排列 框架
来源:互联网 发布:jdk 8u91 windows x32 编辑:程序博客网 时间:2024/05/16 17:50
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,1a 表示以小写字母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><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>显示效果如下图:
0 0
- HTML 无序排列 有序排列 框架
- HTML中的有序排列和无序列表标签
- 递归无序全排列
- 十个数无序排列
- html 无序列表_有序列表_框架
- hdu 2019 排列有序
- 有序全排列
- 十个数有序排列
- html无序有序列表嵌套
- 无序列表排列导航-横排排列-颜色变化
- 有序全排列生成算法
- 有序选择L长度排列
- 有序全排列生成算法
- 有序数组的随机排列
- 排列
- 排列
- 排列
- 排列
- OC--Foundation 框架(2)
- Struts2配置文件讲解
- android开发之自定义log工具
- MYSQL加锁的测验
- QSqlDatabase文档简要翻译(用法)
- HTML 无序排列 有序排列 框架
- 由洗牌算法说开去
- 仿网易云音乐 专辑图片折叠轮播
- python源码剖析笔记1——Python对象初见
- java 守护线程总结
- java反射
- C++ static 总结
- Android 面试题(答案最全)
- Mysql常用命令行大全