CSS怎么用li制作导航栏

html-css015

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>

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

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,一个新建html文件,例如:index.html,填充问题基础代码。

2、其次,在index.html中的<style>标签中,输入css样式代码:li{padding-top:49px}。

3、浏览器运行index.html页面,此时通过css将li标签的行距调整为了49px。

你的这些设置中分别出现了 导航的背景图片背景图片沿着Y方向重复 宽度大小 不溢出等乱七八糟的一堆属性..简单的说就是 你创建的导航不是需要肯定需要背景图片吧 .? 背景图片有宽度大小吧 .? 是否居中. 上下边距 等各种属性设置好了后才能设计出一款漂亮的导航.如果是最简单的导航.那就创建个单元格 .里面写上导航名称.名称上加入超链接..修改下链接前后属性那就行了.(链接属性报苦熬鼠标经过前后等的状态颜色等).因为你的问题我没看的太明白.所以我就笼统的回答你一下.如果你不太明白CSS的样式参数的意义.推荐你百度一下51自学网.里面有个CSS样式表的参数学习.你可以看看..简单易学..稍微有点代码基础就应该能看得懂.