frame简单的前端导航框架实现
框架页面
<!DOCTYPE html>
<html>
<frameset rows="19%,*" >
<frame src="tellbook.html" noresize="noresize"><!--垂直分层的上层-->
<frameset cols="19%,*"> <!--下面的水平分层-->
<frame src="daohang.html" /><!--导航框架-->
<frame src="tellbook.html" name="mainframe"> <!--内容显示框架页面-->
</frameset>
</frameset>
</html>
noresize="noresize" 设置大小不可调,注意是放在frame 标签中
主要看下,导航页面的内容
这里的target指向的就是上面的内容frame 的name属性
<!DOCTYPE html>
<html>
<body>
<a href="tellbook.html" target="mainframe">跳转到Test.html</a></br>
<a href="test01.html" target="mainframe">跳转到Test1.html</a></br>
<a href="Test2.html" target="mainframe">跳转到Test2.html</a></br>
</body>
</html>
frame 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| frameborder |
|
规定是否显示框架周围的边框。 |
| longdesc | URL | 规定一个包含有关框架内容的长描述的页面。 |
| marginheight | pixels | 定义框架的上方和下方的边距。 |
| marginwidth | pixels | 定义框架的左侧和右侧的边距。 |
| name | name | 规定框架的名称。 |
| noresize | noresize | 规定无法调整框架的大小。 |
| scrolling |
|
规定是否在框架中显示滚动条。 |
| src | URL | 规定在框架中显示的文档的 URL。 |
src就是路径
frameset 属性 cols/rows 水平,垂直框架,跟各个页面的宽度
内联框架,可在body中使用,引用一些不可见内容
<iframe src="/i/eg_landscape.jpg"></iframe>
锚链接
<body>
<a href="#mao1">点我跳转mao1</a>
<a id="mao1">我是mao1</a>
</body>
当内容过长,过多时,我们有时需要通过一些按钮定位到我们需要的地方,即链接到我们需要的元素位置,--->链接指向元素id