网页里怎么做点击导航栏按钮即可在导航下方显示内容? 应该用什么标签,CSS?

如题所述

第1个回答  2014-03-10

不知道你要的是不是这种的,详情见附件


追问

附件在电脑怎么找到,我用手机看不到

追答

在回答的右侧可以点击下载

追问

恩就是差不多这种效果,有没有全用html+css语言写的呢

追答

呃,这个例子本身就是纯CSS和HTML
我不明白你的全用html+css是什么意思。。。

追问

你这里不是用了JavaScript吗

有没有不用JavaScript的呢

是不是多数情况都是用你这种方法实现的呢?

追答

实现这种效果的方法很多,我这里只是写了一种,但是不借助js的话,很难实现(牛奔的人大有人在,些许可以不用js)

追问

那你这个是做简单的了是不?

还有你这个不用那个框架可以不,就是换做div或者其它?

第2个回答  2014-03-10
如果你指的是一种下拉或者是下横拉的菜单导航的话,一般都是使用li来实现的,具体的你可以百度一下,上面有很多的案例的。懒人图库的有很多,http://www.lanrentuku.com/js/daohang.html追问

恩感谢哦,网站上有许多好东西

第3个回答  2014-03-10
一般是用a 标签,但是现在也可以用任何标签只要加事件就可以了。你讲的是二级导航还是锚记,要实现的效果,可以截图说明一下。追问

就是导航按钮下有一个块,然后我点击导航按钮的每一个按钮在那个块中显示相应的内容。
只做一个网页

怎么用css做网页左边的导航怎么用css做网页左边的导航框
首先打开SublimeText软件,新建一个html页面,在html页面中准备好html结构,如下图所示。接下来,我们在html的body结构中添加导航栏的内容,如下图所示。然后需要在style标签中用CSS定义导航条的样式,如下图所示。写样式的时候一定要注意写在样式标签里。最后,运行html页面,您将看到如下图所示的导航栏。

如何在一个页面内点击一个按钮,然后在下方显示内容
1、你说下,是你点击上面一行导航栏之后,出现不同的页面吗?2、你点击了那上面导航栏之后,是跳转到另一个页面,那导航栏还需要在另一个页面存在吗?3、如果说清楚了,我可以做个例子!

如何实现网页导航栏随着网页滚动下滑
1、首先输入下方的代码:(window).scroll(function () { var $nav = $(".floatingMenu ul li"),length = $nav.length-1,\/\/获取导航菜单 ul li 的个数 item = new Array(),\/\/新建一个数组 sTop = $(window).scrollTop();\/\/获取偏移的高度 for (var i = 0; i < length; i++) ...

html导航栏跳转页面?
html5如何做到使用导航栏切换页面时不重新加载页面1、如果导航链接是其他单独的页面:方法一:使用iframe;方法二:使用ajax;如果内容不多,所有内容写到一个页面,然后利用js和css来控制其显示隐藏也可以实现。2、导航栏下面放一个Div,专门用来显示对应导航栏目的内容。点击导航栏触发点击事件,在事件函数...

css导航栏下拉菜单特效怎样才不会撑开下面内容
1、在下拉菜单的CSS样式中,使用z-index属性来控制下拉菜单的层级,确保其位于其他页面内容之上,但不会重叠和撑开下面的内容。2、在网页布局时,将下拉菜单的位置放在其它内容的空白区域,避免下拉菜单和下面的内容发生重叠或撑开。例如,在菜单下方设定一个空白的容器,只有下拉菜单在里面显示。3、可以在...

CSS如何实现网页导航栏置顶
1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none;是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。2、在html页面body里面编写导航栏内容,可以看到是通过的格式来实现导航。3、在浏览器中打开页...

网页导航条怎么做?
1、打开Deamweaver8,新建一网页文件。接着输入以下导航菜单的内容: 导航栏示例 首 页 我的博客 互动交流 开心一刻 悬 赏 令

css中如何设置导航条的方法总结
2.CSS实现导航条Tab切换的三种方法 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局3.使用CSS3制作导航条和毛玻璃效果 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。...

网页怎么把导航栏根下方图片对齐
具体步骤如下:1、在HTML中,将导航栏和下方图片用div包裹起来,设置一个共同的容器。2、在CSS中,设置这个div容器的display属性为flex,让其成为一个弹性容器。3、设置flex-direction属性为column,让其成为一个垂直方向的弹性容器。4、将导航栏和下方图片的高度设为固定值或者按照比例调整。5、使用align...

如何解决浏览器缩小网站导航变两行甚至三行,怎么修改代码,在哪个位置或 ...
你可能需要检查和修改你的CSS样式以适应这种情况。具体来说,你可能需要使用媒体查询(Media Queries)。媒体查询是CSS3的一个特性,允许你根据设备的特定条件应用不同的CSS样式。例如,你可以根据浏览器窗口的大小来更改网站的布局。以下是一个简单的示例,假设你的导航栏是在一个class为"nav"的div中:...

相似回答