CSS自定义导航栏悬浮(三种实现方式)

html-css017

CSS自定义导航栏悬浮(三种实现方式),第1张

提供三种自定义导航栏悬浮的方法

在自定义组件中设定css 样式:

利用 position: fixed

利用 position: fixed

单独的css是无法完成导航条的,需要结合html,一般导航条的制作都是通过一个div包裹着ul,使用li来排列完成导航条的html部分,css中,我们需要给这个div宽高,还需要设置好li的宽,高,还有一个float属性,这样基本上导航条就制作完成,请看代码:

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

}

#div1 ul li{

list-style:none

width:50px //具体的高宽需要根据实际要求

height:30px

}

</head>

<body>

<div id='div1'>

<ul>

<li><a href=''>目录1</a></li>

<li><a href=''>目录2</a></li>

<li><a href=''>目录3</a></li>

<li><a href=''>目录4</a></li>

</ul>

</div>

</body>

</html>

在两个层之间加这个<span class="blank" style="height:20px"></span>,其中高度可以自己设置成自己需要的高度

css这样:.blank{ clear:bothoverflow:hiddendisplay:blockoverflow:hidden}