左侧导航html（左侧导航栏样式）
本文目录一览：
- 1、html如何实现pc端导航栏在顶部手机端导航栏在左侧
- 2、如何在html中实现 左边导航条？
- 3、html如何点击左边的导航，右边弹出对应的内容？
- 4、html框架如何实现左边为导航栏,右边为连接页面,代码写出来
html如何实现pc端导航栏在顶部手机端导航栏在左侧
需要借助z-inde来指定叠放次序，z-index值高，block居于顶部，因此将导航栏的z-index设置为2，侧边栏的z-index设置为1。
先简单说一下原理，我们需要用到css中position:fixed这一属性，在默认状态下，当不指定block的相对居中位置时，它会自动居于浏览器左侧，并且固定在此。因此，我们需要将导航栏的长度拉伸到100%，并且给予一个高度，在我的界面中，其高度为50px(我的网页并不是直接指定，而是通过padding以及字的高度填充，这里进行简化)。同理，对于侧边栏同样可以使用position:fixed这一属性来固定。同时设置一个固定长度350px，其高度设为100%。由于设置这一属性会破坏页面的流式结构，两个block会出现重叠的现象。因此，需要借助z-inde来指定叠放次序，z-index值高，block居于顶部，因此将导航栏的z-index设置为2，侧边栏的z-index设置为1。 所以此时，内容模块必须相对于浏览器的左侧与顶部做一定的空位，否则会被挡住。
综上，CSS可以写成下面这样。
如何在html中实现 左边导航条？
html
head
titleTOC and Content Frames/title
/head
frameset cols="200,*" frameborder=yes framespacing=3 border=1
frame src="toc.html" name="myToc" marginwidth=0 marginheight=0
frame src="content.html" name="myContent"
/frameset
noframes
/noframes
/html
html如何点击左边的导航，右边弹出对应的内容？
这个是点击之后触发事件，是要用到js代码的，我这大概给一个框架，css代码你自己设置一下：
html代码如下：
div class="1cb8-95a0-3522-408e main"
div class="95a0-3522-408e-72dd left"
ul
li onclick="choose(1);" class="3522-408e-72dd-0287 select"玄界/li
li onclick="choose(2);"阶位/li
li onclick="choose(3);"坐骑/li
li onclick="choose(4);"佣兵/li
li onclick="choose(5);"骑士/li
/ul
/div
div class="408e-72dd-0287-e717 right"
div id="1"img src="01.png"//div
div id="2" class="72dd-0287-e717-6af3 ycdiv"img src="02.png"//div
div id="3" class="0287-e717-6af3-8d95 ycdiv"img src="03.png"//div
div id="4" class="e717-6af3-8d95-a967 ycdiv"img src="04.png"//div
div id="5" class="6af3-8d95-a967-fde7 ycdiv"img src="05.png"//div
/div
/div
JS代码如下：
script type="text/javascript"
for(var i=2;i=5;i++){
document.getElementById(i).style.display="none"; //让多余的div隐藏
}
function choose(obj){
//隐藏所有的div
for(var i=1;i=5;i++){
document.getElementById(i).style.display="none"; //让div隐藏
}
document.getElementById(obj).style.display="block"; //给li加样式
var lis = document.getElementsByTagName("li"); //下标从0开始
for(var i=0;ilis.length;i++){
lis[i].className = "";
}
lis[obj-1].className = "select";
}
/script
其他的你自己去琢磨下，原理和代码已给到。
html框架如何实现左边为导航栏,右边为连接页面,代码写出来
1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到head/head之间。
5、网页此时的效果如图，就完成了。
