CSS怎么用li制作导航栏

html-css022

CSS怎么用li制作导航栏,第1张

您好!您应该提问了2次吧,再给您回答一次:

<style>

body,li,ul{margin:0padding:0}  /* 浏览器重置 */

li{list-style:none}    /* 浏览器重置 去掉li前面的点 */

.nav{background:#36Czoom:1width:500pxmargin:50px auto}   /* 设置整个导航条的样式,以及IE的清浮动 */

.nav:after{clear:bothdisplay:blockcontent:""}  /* 标准浏览器的清浮动,因为里面的li浮动了 */

.nav li {float:leftpadding:0 10pxcolor:#F00height:24pxline-height:24px} /* 每个导航项的样式,关键是设置浮动让每个li在同一行(float:left) */

</style>

<ul class="nav">

    <li>导航项1</li>

    <li>导航项2</li>

    <li>导航项3</li>

    <li>导航项4</li>

</ul>

希望我的回答能够帮到您!如果有什么不懂的可以追问我。如果有帮助请采纳,回答不易!

#navmenu2{

width:150px

text-align:center

float:left

}

#navmenu2 ul{

padding:0px

margin:0px

list-style:none

}

#navmenu2 li{

margin:0px

}

#navmenu2 a{

display:block

text-decoration:none

width:120px

border:1px

border-right:10px

border-left:20px

border-color:#60C

border-style:solid

background-color:#00F

color:#FFF

padding:7px 0px 7px 0px

}

#navmenu2 a:hover {

background-color:#000

color:#09F

border-left-color:#09f

border-right-color:#09f

border-top-color:#60c

border-bottom-color:#60c

}

直接上个实例吧:

第一步,打开软件Adobe Dreamweave CS6,创建一个新的HTML。

第二步,在工作区域(body)用标签 ul 和 li 输入导航的内容。

第三,编辑样式CSS。在标签<head></head>之间写入样式表。,

第四,紧接上一步。由于无线序列具有默认样式,前面的圆点(),所以先写去除默认样式的样式。样式为:ul,li { list-style:nonelist-style-type:nonepadding:0margin:0} /*清除ul,li的默认样式*/

第五,由于默认的无序列表是竖排的,所以需要为其添加浮动,同时编辑宽度和距离等样式。添加样式为:  ul li { float:leftwidth:80pxheight:30pxbackground:#900line-height:30pxtext-align:centermargin-right:2pxcolor:#fff} 效果,

第六,如果需要为导航添加链接(),同时获得鼠标滑过效果,即需要对 "a"为标签编写样式。样式为:   ul li a { display:blockheight:30pxtext-decoration:nonecolor:#fff} ul li a:hover { background:#999}

最终预览效果。

完整代码:

<html><head>

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

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

<style>  ul,li { list-style:none list-style-type:none padding:0 margin:0} /*清除ul,li的默认样式*/  

ul li { float:leftwidth:100px height:30px background:#900 line-height:30px text-align:center margin-right:2px }  

ul li a { display:block height:30px text-decoration:none color:#fff}  ul li a:hover { background:#999}

</style></head>

<body>  <ul>       

<li><a href="#">导航一</a></li>    <li><a href="#">导航二</a></li>    <li><a href="#">导航三</a></li>    <li><a href="#">导航四</a></li>    <li><a href="#">导航五</a></li>    </ul></body></html>