<html>

	<head>

		<style>

			.test ul{list-style:none;}

			.test li{float:left; width:100px;background:#ccc;margin-left:3px;line-height:30px;}

			.test a{display:block;text-align:center;height:30px;}

			.test a:link{color:#666;background:url(aa.jpg) #ccc no-repeat 5px 12px;text-decoration:none;}

			.test a:visited{color:#666;text-decoration:underline;}

			.test a:hover{color:#fff;font-weight:bold;text-decoration:none;backgroound:url(aa.jpg) #f00 no-repeat 5px 12px;}

			</style>

	</head>

<body>

	<div class="test">

		<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>

			<li><a href="5">立刻购买</a></li>

			<li><a href="6">联系我们</a></li>

		</ul>

		</div>

	</body>

</html>

重点是:  li {float:left;}   //左边浮动, 按横向显示.
ul{list-style:none;}     //去掉默认的圆点符号样式

.st_tree ul, .st_tree li{ float:none;}   //去掉浮动,按列显示.

.st_left ul, .st_left li{ text-align:left;}

css ul li 制作导航条的更多相关文章

  1. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  2. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  3. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  4. CSS + ul li 横向排列的两种方法

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

  5. css 制作导航条布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  7. html5制作导航条

    (1)background-repeat:no-repeat;图片不平铺 (2)使用<ul>和<li>便签,代码简介有序.易于编排. (3)在引入外部css文件时,<li ...

  8. CSS ul li a 背景图片与文字对齐

    <div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...

  9. 用ul 来制作导航栏的几个要点

    1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...

随机推荐

  1. 《JavaScript高级程序设计》心得笔记-----第四篇章

    第十六章 1.  跨文档消息传送: postMessage("消息", "发送消息的文档所在域") 2.  拖放事件: 1)   拖动某元素会依次触发:drag ...

  2. [翻译.每月一译.每日一段]Exploring Fonts with DirectWrite and Modern C++

    Windows with C++ Exploring Fonts with DirectWrite and Modern C++ Kenny Kerr DirectWrite is an incred ...

  3. void指针

    指针有两个属性:指向变量/对象的地址 和长度 但是指针只存储地址,长度则取决于指针的类型 编译器根据指针的类型从指针指向的地址向后寻址 指针类型不同则寻址范围也不同,比如: int*从指定地址向后寻找 ...

  4. js实现模拟自动点击按钮，并且在10秒倒计时之后疯狂点击

    需求来自于csdn问答,可以利用这个原理做秒杀抢单外挂. 代码示例如下: <html> <head> <meta charset="utf-8"/&g ...

  5. eclipse 4 rcp: java.lang.RuntimeException: No application id has been found.

    错误详情: java.lang.RuntimeException: No application id has been found. at org.eclipse.equinox.internal. ...

  6. nginx自启动脚本

    #!/bin/bash # #Startup script for Nginx - this script starts and stops the nginx daemon # # chkconfi ...

  7. 如果在配置中将“system.serviceModel/serviceHostingEnvironment/multipleSiteBindingsEnabled”设置为 true，则需要终结点指定相对地址。如果在终结点上指定相对侦听 URI，则该地址可以是绝对地址。若要解决此问题，请为终结点“http://localhost/Service1.svc”指定相对 URI。

    问题: 如果在配置中将"system.serviceModel/serviceHostingEnvironment/multipleSiteBindingsEnabled"设置为 ...

  8. 修改linux命令行提示符

    安装了ubuntu1304版本,发现命令行@后面的名称太长,影响视觉美观,决定修改一下.修改当前用户目录下面的.bashrc文件即可达到目的. 打开.bashrc文件,找到下面的内容:if [ &qu ...

  9. ActiveMQ之TemporaryQueue和TemporaryTopic

    TemporaryQueue和TemporaryTopic,从字面上就可以看出它们是“临时”的目的地.可以通过Session来创建,例如: TemporaryQueue replyQueue = se ...

  10. AnyChartStock去除水印方法

    最近在使用AnyChartStock的图表,功能很强大,但下载过来是有水印的,虽然网上也有很多破解无水印的版本,但基本都是AnyChart的,AnyChartStoc的几乎没有.所以自己尝试着去除水印 ...