189 8069 5689
很简单啊，右边放一个iframe框架，name值＝自定义昵称，然后左边链接里加上target=框架name的名称，如iframe scr="url" name=abc，那么你左边导航的链接里a herf='' target="abc"，这样左边的链接就会显示在右边的框架里了
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了歙县免费建站欢迎大家使用！
侧边栏导航标签：
aside
nav
ul
li菜单一/li
li菜单二/li
li菜单三/li
li菜单四/li
li菜单五/li
/ul
/nav
/aside
样式自己加。
建议使用FF，Safari，举个例子：
!doctype html
html
head
titleHTML5+CSS3+JavaScript/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta http-equiv="Content-Type" content="text/html; charset=gbk" /
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta http-equiv="Content-Language" content="zh-cn" /
meta name="Generator" content="EditPlus"
meta name="Author" content=""
meta name="Keywords" content=""
style type="text/css"
body {
behavior: url(ie-css3.htc);
}
* {margin:0 auto;padding:0;}
body {font-size:13px;font-family:Arial;}
ul li {list-style:none;}
#menu {
width:982px;
height:35px;
margin-top:20px;display:block;
background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
-webkit-border-top-left-radius:4px;;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
text-shadow: 0 1px 0 white;
}
#menu ul {
margin-left:0;
}
#menu ul li {
display:inline;
}
#menu ul li a:link, a:visited {
text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545;
}
#menu ul li a:hover {
text-decoration:none;
background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
background: -moz-linear-gradient(top, #333, #ccc);
-webkit-background-size:0 35px;
color: #ddd;
text-shadow: 0 1px 0 black;
}
.text {
border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial;
-webkit-border-top-left-radius:90px;;
-webkit-border-top-right-radius:90px;
-moz-border-radius-topleft:90px;
-moz-border-radius-topright:90px;
-webkit-border-bottom-left-radius:90px;
-webkit-border-bottom-right-radius:90px;
-moz-border-radius-bottomleft:90px;
-moz-border-radius-bottomright:90px;
-o-border-radius:90px;
-khtml-border-radius:90px;
}
/style
script language="JavaScript" type="text/javascript"
(function()
{
if(!0)
return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;
while(ilength)
{
document.createElement_x(e[i++])
}
})();
/script
/head
body
menu id="menu"form action="index.php" method="get"
ul
lia href="#" title="HomePage"HomePage/a/li
lia href="#" title="Introuduce"Introuduce/a/li
lia href="#" title="Products"Products/a/li
lia href="#" title="My album"My album/a/li
lia href="#" title="Shopping"Shopping/a/li
lia href="#" title="Contact our"Contact our/a/li
/ul
input type="search" class="text" value="search..." //form
/menu
body
想要实现的效果很简单的，给你个简单的例子，看看就明白了！
!doctype html
html
head
meta charset="utf-8"
titledemo/title
style
*{margin:0; padding:0; list-style:none;} /*清除代码样式的，不用考虑和复制*/
body{background:url(body_bg.jpg) no-repeat;}
.nav_left_bar{float:left; width:200px; background:#ccc;}
.nav_left_bar li{line-height:30px;}
/style
/head
body
nav class="nav_left_bar"
ul
lia href="#"Home/a/li
lia href="#"Previous/a/li
lia href="#"Next/a/li
/ul
/nav
/body
/html
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
titleDocument/title
style
*{
margin:0;
padding:0;
}
ul{
list-style: none;
background-color: black;
color:blanchedalmond;
width: 100px;
line-height: 48px;
}
li:nth-of-type(2n+1){
background-color: blue;
}
li:hover{
color: red;
background-color: yellow;
}
/style
/head
body
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
/ul
/body
/html
请采纳