DIV+CSS设计网页布局时,如何将菜单导航部分背景自适应屏幕宽度,而让导航内容居中?

html-css028

DIV+CSS设计网页布局时,如何将菜单导航部分背景自适应屏幕宽度,而让导航内容居中?,第1张

这是由两个div来实现的,首先建立一个外层div并设置宽高,要使宽度随屏幕宽度变化(即浏览器宽度变化),那么宽度就得设置100%,高度设置为你需要的高度即可,具体属性为 width:100%height:你自己的高度background:你需要的颜色这样就让该div随屏幕(浏览器)宽度变化而变化了。然后在这个div里面再嵌套一个div给定一个宽高属性,就是你导航的宽高,要使之居中,各人使用的方法也有所不同,但是常用的还是margin属性,具体属性如下 width:你导航的宽度height:你导航的高度margin:0 auto 这样就实现了,如果背景是图片的话就更改background属性即可,还有不明白的随时Hi我。

这样情况 可以考虑每页使用相同的菜单代码  菜单类不要加入current类

然后在对应的页面加入标记current类应该显示未知的隐藏值 ,然后用js控制添加对应的current类就行了

像下面

<html>

    <body>

    <input type="hidden" id="curindex" value="1" />

     <div class="menu">

         <a>菜单a</a>

         <a>菜单b</a>

         <a>菜单c</a>

     </div> //再引用jquery

<script type="text/javascript">

    window.onload=function(){

        var curindex=$("#curindex").val()

        $(".menu a:eq("+curindex+")").addClass("current")

    }

有两种思路。解决

第一种:通过判断当前的页面的分类ID和每个菜单的ID进行对比,哪个菜单的ID等于当前页面的分类ID。。那么给其添加一个CLASS让其样式发生变化。。这种方法需要PHP ASP .NET等WEB服务器脚本辅助实现。

第二种:就是通过纯CSS实现。。简单点说就是给每个菜单进点击进入的页面的body元素各添加一个class.然后通过CSS层叠样式表定义其页面击后的效果。示例如下

如果是产品介绍的页面那么body元素添加一个样式<body class=“product”>

介绍页面呢给body元素再添加另一个样式<body class='about'>

其他页面以此类推

然后在样式表中这样定义点击后的页面的样式

/*定义菜单的初始样式*/

.menu li a{display:blockwidth:80pxheight:30pxbackground:greenfloat:left}

/*定义当前页面对应的菜单样式*/

body.product .menu li a,body.about .menu li a{display:blockwidth:100%height:100%background:red}

这样你进入产品介绍 和 公司介绍页面之后对应的CSS生效对应的菜单背景颜色会变红。。点进去变红。其他菜单还是初始样式。。

其实第二种比较麻烦。因为分别定义body加class那部分。。或者你用服务器脚本动态生成lclass 。也行。。但相比第一种还是麻烦了许多。

如果对您有帮助。还望采纳。谢谢。