当前位置: 代码迷 >> Web前端 >> 网站首页布局(厂型)源码
  详细解决方案

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

热度:90   发布时间:2013-03-01 18:33:02.0
网站主页布局(厂型)源码

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

常用厂型各部分作用简析:头部是网站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>
这样的话,当用户点击首页链接时才能在正确的位置显示该首页的内容。


  相关解决方案