html网页切换和framset布局

最新推荐文章于 2024-08-09 17:24:43 发布

小圣_fighting

最新推荐文章于 2024-08-09 17:24:43 发布

阅读量6.4k

点赞数 7

分类专栏：学习笔记 html 文章标签： html 布局标签

本文链接：https://blog.csdn.net/xie_xiansheng/article/details/50753397

版权

学习笔记同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

第一个是主页视图，用html块标签<div>实现，刚学完安卓初级，学习html，可能有些乱，下面上代码和图片

</head>
<style>
body{
	margin:0px;
	background-color:#2B3A01
	}
.divchange{
	position:relative;
	left:600px;
	bottom:230px;
	font-size:12px;
	color:#FFF;
	}
.ul{
	list-style:none;
	margin-left:-39px;
	color:#333;
	}

</style>
<body>
 <div  style="background-image:url(hw2/images/middle_bg.jpg); background-repeat:  repeat-x;height:550px;margin-top:6%;position:relative" >
 <a href="day03_skip.html"> <img src="hw2/images/index.jpg"  /></a>
	
    <div class="divchange">思想和文化的交流始于文字，我<br />们以新颖二星之有效的方式为您      <br />提供实际的服务。<br />
     <ul class="ul">
      <li> <img src="hw2/images/icon1.gif" style="margin-bottom:2px;padding-right:7px;"/>翻译流程</li>
      <li><img src="hw2/images/icon1.gif" style="margin-bottom:2px;padding-right:7px;"/>服务流程</li>
      <li><img src="hw2/images/icon1.gif" style="margin-bottom:2px;padding-right:7px;"/>网站建设</li>
      <li><img src="hw2/images/icon1.gif" style="margin-bottom:2px;padding-right:7px;"/>付费</li>
     </ul>
    </div>
 </div>
</body>
</html>

点击页面左侧花的图片，可以跳转至：

中间的空白区域是一个新的html页面，时间关系不做了，大部分是文字。

可以看出，点击左边的栏目可以切换新的html页面：

下面上代码本页的frameset框架代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<frameset cols="26%,*,27%" frameborder="no" border="0px">
	<frame src="day03_left.html" />
    <frameset rows="20%,*,17%">
        /** 中间图片*/
      <frame src="day03_skip_top.html" scrolling="no"/>
      <frameset cols="27%,*">
        /** 翻译服务区*/
        <frame src="day03_skip_left.html" scrolling="no"/>
        /** 切换区域*/
        <frame src="day03_change.html" name="changearea" />
      </frameset>
      /** 底部邮箱*/
      <frame src="day03_skip_bottom.html" scrolling="no" />
    </frameset>
    <frame src="day03_right.html" />
</frameset>
<noframes></noframes>
 
</html>

代码结构大致如此，其他的一些html大部分是为了匹配本页面设置的一些参数，有需要的朋友可以留言，发送源代码。

其中最重要的一部分代码是在“切换区域”的 name="changearea"属性，这个属性决定了我们点击四个栏目切换的时候，页面的切换是在空白区域，而不是本页面整个切换，

代码如下：

day03_skip_left：

<body >
<ul>
 <li><a href="day03_fyfw.html" target="changearea">翻译服务</a></li>	
 <li><a href="day03_wzjs.html" target="changearea">网站建设</a></li>	
 <li><a href="day03_fwlc.html" target="changearea">服务流程</a></li>	
 <li><a href="day03_ff.html" target="changearea">付费</a></li>
 <li> <br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br />
 <br /><br /><br /><br />
 <br /><br /><br /><br />
 <br /><br /><br /><br />
 </li>			
</ul>
</body>

在<a>标签里设置 target="changearea" 属性，就可以保证点击跳转的时候，目标页面至前面设置name属性的页面，也就是空白页面。

有需要的朋友可以留言交流，本人初学者，希望可以共同进步。