css用背景图片制作导航栏分割线

html-css012

css用背景图片制作导航栏分割线,第1张

首先，一般做导航条，都是通过ul、li来做，将ul包裹在一个div中，然后设置好width和height，分隔线，换个理解，给li一个右边的边框就可以了，通过代码来理解：

<html>

<head>

<style>

#div1{

width:960px

height:30px

}

#div1 ul li{

float:left

width:60px

height:30px

border-right:1px solid

}

</style>

</head>

<body>

<div id='div1'>

<ul>

<li>muli1</li>

<li>muli1</li>

<li>muli1</li>

<li>muli1</li>

</ul>

</div>

</body>

</html>

每个人的代码都不一样的，这里只能提供一个思路给你，世界等着你去改变。两块解决你的问题。

这个排版可以分为三个大块，一个是导航栏，一个是每日通知，一个是详细内容栏。但从空间上看，它可以分为上下两部分，所以，先用两个 div 分出上下空间分布，下面又分两块，再用两个 div 或者其它标签分成两块都行，个人习惯的话左边用一个 div 嵌套 一个 p 标签， 再加一个 ul 。这种类型的基本都可以这样。

你定义一下链接 a{background:url(你的图片的路径)} 这是链接的背景图片

a:hover{background:url(图片路径)} 这是鼠标放上去以后背影图片

我只知道这些很想帮助你，不知道你想要的效果是什么样的。至于下拉菜单是用代码来控制的，你可以在百度里找一些下拉菜单式的导航，看一下它是怎么来控制的。