网站主页布局(厂型)源码

  • Post author:
  • Post category:其他


网上的站点有很多,布局方式也多种多样。但有一种是十分常用的,那就是厂型。

常用厂型各部分作用简析:头部是网站Logo,左侧是导航,右侧是信息显示区域。

网站Logo区域







主区域(信息显示)

一般可以使用HTML中的框架来完成上述布局,即<frameset>和<frame>结合。html源码如下:

<html>
  <head>
    <title>欢迎来到斌斌的小站!</title>
  </head>
  <!-- 先分为上下两部分 -->
  <frameset rows="75, *" frameborder="no">
  	<noframes>
	  	<body>
	  		<span>欢迎来到斌斌的小站(http://blog.csdn.net/binbinxyz)</span><br/>
	  		<span>您的浏览器不支持框架,页面无法显示!</span>
	  	</body>
  	</noframes>
  	
  	<frame id="topFrame" name="topFrame" src="top.jsp" style="overflow: hidden"/>
    <!-- 然后分为左右两部分 -->
  	<frameset cols="130, *">
  		<frame id="leftFrame" name="leftFrame" src="left.jsp"/>
	  	<frame id="mainFrame" name="mainFrame" src="main.jsp" />
  	</frameset>
  </frameset>
</html>

需要注意的是在left.jsp中,链接一般要添加target=”mainFrame”属性值对。即:

<a href="main.jsp" target="mainFrame">▶ 首页</a>

这样的话,当用户点击首页链接时才能在正确的位置显示该首页的内容。



版权声明:本文为binbinxyz原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。