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

html-css09

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

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

什么是CSS自适应宽度滑动门菜单？

CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿下边的实例来说，是按4个字的宽度来设计的，如果其中一项为5个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是css自适应宽度菜单。

按钮自适应原理是利用a标签和i标签各自一个背景组合成为按钮，达到自适应，具体实现css样式及html结构如下，感兴趣的朋友可以参考下

原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。

复制代码

代码如下:

<!DOCTYPE

html>

<html>

<head>

<meta

charset="UTF-8">

<style

type="text/css">

.btn

a{text-decoration:none}

.btn{display:

inline-block

background:

url(s_btn.png)

no-repeat

0

0

height:

22px

line-height:

22px

color:

#666

vertical-align:top}

.btn

i{display:blockfont-style:

normal

font-size:

12px

padding:

0

10px

background:url(s_btn.png)

no-repeat

right

-22px

}

.btn:hover{text-decoration:

nonecolor:#4c8136background-position:

0

-44px}

.btn:hover

i{background-position:

right

-66px}

.btn:active{background-position:

0

-88px}

.btn:active

i{background-position:

right

-110px}

.btn_disabled,

.btn_disabled:hover{background:

url(../img/s_btn.png)

no-repeat

0

-132pxcursor:

default}

.btn_disabled

i,

.btn_disabled:hover

i,

.s_btn_disabled:active

i{background-position:

right

-154pxcolor:#999}

</style>

</head>

<body>

<a

href="#"

class="btn">

<i>这是按钮</i>

</a>

<a

href="#"

class="btn">

<i>按钮</i>

</a>

</body>

</html>

效果：