码迷,mamicode.com
首页 > Web开发 > 详细

html-上左右布局方式---ShinePans

时间:2014-10-30 21:03:27      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:html

文件包含 main.html  top.html  left.html  childhood.html  moonsong.html  herethesea.html


主要布局效果:

bubuko.com,布布扣


代码:

main.html

<frameset rows="30%,*"> <!--上面部分-->
<frame src="top.html" scrolling="no">
<frameset cols="20%,*" > <!--下面80%分为左右部分-->
<frame src="left.html" noresize frameborder="1"/ scrolling="no">
<frame src="right.html" name="myframe" noresize frameborder="1"/>
</frameset>
</frameset>

top.html

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<body>
<table align="center" boder="0px" width="100%" height="200px" background="topJpg.jpg" cellspacing="0px" cellspading="0px">
	<tr></tr>
</table>
</body>

left.html

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<body bgcolor="lightblue">
		<center>
		</center>
	<!--target 点击后的目标-->
	<ul>
	<li><a href="herethesea.html" target="myframe">最重要的决定</a></li>
	<li><a href="childhood.html" target="myframe">下沙</a></li>
	<li><a href="moonsong.html" target="myframe">与半小夜曲</a></li>
    </ul>
</body>

right.html

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<body bgcolor="silver">
	歌词
</body>

歌词略..

html-上左右布局方式---ShinePans

标签:html

原文地址:http://blog.csdn.net/shinepan/article/details/40625571

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!