这样的倾斜导航栏怎么做 html css

html-css025

这样的倾斜导航栏怎么做 html css,第1张

这里有几个参考例子，你可以下载下来看看，或许对你有帮助。

http://www.17sucai.com/pins/8597.html

http://www.17sucai.com/pins/6791.html

http://www.17sucai.com/pins/1996.html

http://www.17sucai.com/pins/8607.html

好像没有这种分割线啊骚年。

不过，如果你导航条用<ul><li>的话呢，可以改变list-style属性，有小圆圈，小方块儿，最主要能用自定义图片。你自己做个斜线的图，然后

list-style-type

list-style-position

list-style-image

一改。应该能达到你想要的效果吧，不过说实话，用斜线挺难看的。

如果你看到别人这样用了，而且还有图像，可以用ff的大杀器Firebug搞到完整样式和代码。

一、定义一个盒子（“menu”）,用来装这个导航的。

二、用无序列表（ul）中的列（li）放导航的内容。

三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。

四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#menu{

width:500px

margin:0 auto/*令盒子居中*/

font-size:20px /*定义字体的大小*/

}

ul{

margin:0padding:0/*把浏览器默认的间隔去掉*/

list-style:none /*把前面的序列号去掉*/

}

li{

float:left /*向左浮动，这个是实现水平的重要步骤！！*/

padding:0 15px /*li里面的字体和边框的距离*/

}

a{

text-decoration:none /*去掉超链接的下划线*/

color:#333 /*超链接的字体颜色*/

}

a:hover{

color:#696

}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

</ul>

</div>

</body>

</html>