html5中侧边栏导航·怎样写

html-css024

html5中侧边栏导航·怎样写,第1张

侧边栏导航标签:

<aside>

<nav>

<ul>

<li>菜单一</li>

<li>菜单二</li>

<li>菜单三</li>

<li>菜单四</li>

<li>菜单五</li>

</ul>

</nav>

</aside>

样式自己加。

运用display的block设置左拉导航栏,设置下拉导航栏。在HTML中设置导航栏左侧是运用display的block设置左拉导航栏,设置下拉导航栏。HTML是由Web的发明者TimBerners-Lee和同事DanielWConnolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。

用框架可以做:

1.建立主页面,就是你打开就能看到的页面

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>网页标题</title>

</head>

<frameset rows="16%,84%"border="0">

<frame noresize src="top.htm" scrolling="no">

<frameset cols="25%,*" >

<frame scrolling="no" noresize src="left.htm">

<frame name="rgt" src="right.htm">

</frameset>

</frameset>

<noframes></noframes>

</html>这里面top.htm就是上方导航,left.htm就是左侧信息,right.htm就是右侧信息

2.建立顶部页面top.htm

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

</head>

<body>

<table width=50% align=center>

<tr align=center>

<td width=50%><a target="rgt" href="right.htm">导航1</a></td>

<td width=50%><a target="rgt" href="right2.htm">导航2</a></td>

</tr>

</table>

</body>

</html>

这里要注意target="rgt",rgt是我们在第一步里right.htm的name,也就是说点击这里,右边的内容会跳转到指定的页面,也就实现了右边信息的变换

这里我只写两个,你自己在导航里改,凡是有链接的你都加上target="rgt"

3.建立左部页面left.htm

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

</head>

<body>

<a href="right.htm" target="rgt">右部信息1</a>

<br><br>

<a href="right2.htm" target="rgt">右部信息2</a>

</body>

</html>

这里同样,凡是有链接的你都加上target="rgt",点击后右边内容会随之变换

4.建立右部信息页面right.htm

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

</head>

<body>

<table>

<tr>

<td valign="top" width="500" height="1000">

<h3 align="center">右边信息</h3>

</td>

</tr>

</table>

</body>

</html>

这里是打开主页面后看到的右边部分的内容

5.建立右边部分等待切换的页面right2.htm

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

</head>

<body>

<table>

<tr>

<td valign="top" width="500" height="1000">

<h3 align="center">右边信息二</h3>

</td>

</tr>

</table>

</body>

</html>

注意这个right2.htm在top.htm和left.htm里都出现过

也就是说点击它们就会将右边内容切换到相应页面

我这里只做了两个,如果多的话就继续做right3.htm之类

OK完成