html框架

我们经常会看到一些网站上看到，点击左边红色框里面的不同按钮，在右边红色框里会出现不同的内容，那是咋实现的呢？

简单实现下这个流程，先准备2个代码文件。

20180726（html框架文字).html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
 <!--设置背景颜色-->
<body style="background-color:yellow;">
 
<!--设置标题居中 （align排列意思）-->
<h1 style="text-align:center;">tjfsuxyy的博客</h1>
</body>
</html>

html框架代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页制作</title> 
</head> 
<body>
    <div id="content" style="width:1200;height:600;float:right;">   
   <!--iframe src="URL"></iframe> RUL指向不同的网页。-->
        <iframe src="D:\html学习资料\20180726（html框架文字).html" width="1200" height="600" name="iframe_a"></iframe>
    </div>	
   <div id="memu" style="width:1200;height:600;float:right;">
   <b>分类</b><br>
   <!--a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。-->
        <p><a href="https://blog.csdn.net/tjfsuxyy/article/details/80801888" target="iframe_a">python逻辑回归</a></p>
        <p><a href="https://blog.csdn.net/tjfsuxyy/article/details/80804219" target="iframe_a">python决策树</a></p>
        <p><a href="https://blog.csdn.net/tjfsuxyy/article/details/80845633" target="iframe_a">python 第三方包安装</a></p>
    </div>	
</body>
</html>

开始页面：

点击左边”分类“下不同按钮，右边框会跳到到不同内容页面上。

猜你喜欢