css导航栏全填充（html添加导航栏）

本文目录一览：

• 1、css导航栏怎么制作
• 2、css如何使导航下面的那个图片自动填充屏幕宽度
• 3、请教：导航条全屏铺满整个屏幕，CSS代码应该如何写，谢谢。
• 4、如何让div+ul+li的导航条自动填充100%的宽度?
• 5、css一个导航栏该怎么做

css导航栏怎么制作

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 ul 和 li元素非常有意义：

ul

lia href="#home"主页/a/li

lia href="#news"新闻/a/li

lia href="#contact"联系/a/li

lia href="#about"关于/a/li/ul

从列表中删除边距和填充：

ul {

list-style-type: none; margin: 0; padding: 0;}

css如何使导航下面的那个图片自动填充屏幕宽度

要达到这种效果必须先知道这张图片是已那种形式导进去的，无外乎2种：

1.img标签导入，那么img外层如果没有浮动或者去限定宽度，默认就是填充整个屏幕的宽度，那么就可以设置img{width:100%;}这句样式来让其填充满屏幕，记得高度不要设置，不然会让图片变形失真；

2.通过css里面的background-images的方式以背景的形式导进去，那么在html框架里面的图片展示标签必须是撑满屏幕宽度的，然后在样式里面通过background-size:contain让其填充满屏

请教：导航条全屏铺满整个屏幕，CSS代码应该如何写，谢谢。

写2个div 外边的div用于设置背景不要写width,里边的div设置一下width 在居中。

如何让div+ul+li的导航条自动填充100%的宽度?

script type="text/javascript" src="js/jq.js"/script

script type="text/javascript"

$(function(){

var UlWidth=$("ul.nav").width();//得到ul宽度

var LiLen=$("ul.nav li").length;//得到li的个数

$("ul.nav li").css({width:UlWidth/LiLen})

});

/script

ul class="d1b6-8697-b4a3-363c nav"

    lia href="#"第1个LI/a/li

    lia href="#"第2个LI/a/li

    lia href="#"第3个LI/a/li

    lia href="#"第4个LI/a/li

    lia href="#"第5个LI/a/li

/ul

用js来控制

css一个导航栏该怎么做

网站上一般都是利用css来做的。具体的做法：

1、将导航栏里面的几个条目都做成无序列表里面的项

2、利用css将列表项的list-style,float等等属性设置，使列表项横排排列。

3、设置链接的属性就可以了。

一般都是这样做的，利用图片或者flash的话，网页会变大一点，对于网速慢的人来说，不方便访问。所以在能利用css的地方就尽量避免用图片或者falsh