html侧面导航(html侧边导航栏模板)

1、首先你的文本框和导航栏有没有外层容器，如果有的话都加上floatleft样式，并且这两个容器宽度之和别大于红色区域的宽度ltdivstyle=quotbackground#f00width960pxheight80pxoverflowhiddenquotltinputstyle=quotfloat。

2、这个是点击之后触发事件，是要用到js代码的，我这大概给一个框架，css代码你自己设置一下html代码如下ltdiv class=quotmainquot ltdiv class=quotleftquot ltul ltli onclick=quotchoose1quot class=quotselectquot玄界ltli lt。

3、要把蓝色的框绝对定位，用position absolute就不会四分五裂的图片了。

4、很简单啊，右边放一个iframe框架，name值＝自定义昵称，然后左边链接里加上target=框架name的名称，如ltiframe scr=quoturlquot name=abc，那么你左边导航的链接里lta herf=#39#39 target=quotabcquot，这样左边的链接就会显示在右边的。

5、因为少个target属性，如果不写的话，默认是_blank，就是新开一个页面 试试在框架左侧点击的标签内加上target=quot右边框架的namequot。

6、两个大的div，用floatleft来排列，之后往左边的div里面写入导航栏，后边的写入内容。

7、这个用DIV+CSS就能写都不用JS，去百度一下css下拉菜单吧很简单。

8、加一行css代码，position fixed就会跟随屏幕滚动了。

9、15px floatleftli h2 displayblock fontsize16pxli em fontstylenormal fontsize12px上面是html代码，下面是css代码，都是主要部分，具体的样式自己在根据设计稿修改大体上就是这样了。

10、HTML5是无法做这个事情的准确点说应该是用CSS的响应式布局这个东西你可以去看一下bootstrap，这个前端框架就是大量利用了这个技术。

11、导航框设为一个DIV，右边空白设为一个DIV，然后用CSS将两个DIV都设定为向左浮动floatleft。

12、工具材料 Sublime Text 首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示 接下来我们在html的body结构里添加导航条的内容，如下图所示 然后就需要在style标签中用CSS对导航条的样式。