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

html-css013

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

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

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下：

<html>

<head>

<title>横向导航栏</title>

<style>

<!---->

</style>

</head>

<body>

<div class="nav">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">导航1</a></li>

<li><a href="#">导航2</a></li>

<li><a href="#">导航3</a></li>

<li><a href="#">导航4</a></li>

<li><a href="#">导航5</a></li>

<li><a href="#">导航6</a></li>

</ul>

</div>

</body>

</html>