<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. 6款基于SVG的HTML5应用和动画

    1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...

  2. The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.问题解决

    didFailLoadWithError(): Error Domain=NSURLErrorDomain Code=-1022 "The resource could not be loa ...

  3. MVC校验

    首先Model里面需要写好校验标签, 我的数据库中有个tblUserInfo表,其中有Id,UserName,,Age三个列,Id自动增长 Model添加UserInfo Class,在UserNam ...

  4. 锋利的jquery-选择器

    1 jquery $(document).ready(function(){}) 可以简写成 $(function(){})   2 jquery 对象和DOM对像 ① jquery对象和DOM对象不 ...

  5. 2013-07-24 IT 要闻速记快想

    ### ========================= ###凡客有闹钟?从凡客的角度来讲,闹钟等工具类应用是为推广品牌和产品服务,通过工具类产品给大众一个对凡客品牌的认知.而选择推出工具类的产品 ...

  6. centos问题集锦

    一. 为什么新装的centos系统无法使用xshell,putty等工具连接? 原因:sshd服务没有启动. 解决: 1)使用命令rpm -qa | grep ssh查看是否已经安装了ssh 2)使用 ...

  7. Windows下关于Composer使用时出现的问题及解决办法

    问题一: Fatal error: Call to undefined method Composer\Package\CompletePackage::getTrans portOptions() ...

  8. 简单的下拉刷新以及优化--SwipeRefreshLayout

    代码工程简要说明:以一个SwipeRefreshLayout包裹ListView,SwipeRefreshLayout接管ListView的下拉事件,若ListView被用户触发下拉动作后,Swipe ...

  9. TextView文字排版问题：

    本文转载自:http://blog.sina.com.cn/s/blog_821e2bb101011803.html textview自动换行导致混乱的原因----半角字符与全角字符混乱所致!一般情况 ...

  10. c语言之fopen参数（r+，w+，a+）

    经查找一些资料,并且亲自实验之后得出: r+:打开已存在的文件时,光标位于开头,文件可读,可写, 写数据时,由于光标位于开头,所以会覆盖原有数据 w+:打开的文件已存在时,将覆盖原文件 a+:打开已存 ...