<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. struts2中访问servlet API

    Struts2中的Action没有与任何Servlet API耦合,,但对于WEB应用的控制器而言,不访问Servlet API几乎是不可能的,例如需要跟踪HTTP Session状态等.Struts ...

  2. C++ Sets

    集合(Set)是一种包含已排序对象的关联容器 begin() 返回指向第一个元素的迭代器 clear() 清除所有元素 count() 返回某个值元素的个数 empty() 如果集合为空,返回true ...

  3. 《Apache之访问本地用户家目录》——RHEL6.3

    首先保证这个本地用户是系统上有的. 1.安装httpd软件包: Yum install httpd 2.启动apache服务: 3.配置用户的家目录: 4.打开apache访问家目录的权限: 5.配置 ...

  4. Oracle中Left join的on和where的效率差别

    假设有两个表a.b 使用on Select * from a left join b on b.col = a.col and b.col2 = ‘aa’ 使用 where Select * from ...

  5. Ubuntu 12.04 修改默认启动为字符界面

    sudo vim /etc/default/grub 修改GRUB_CMDLINE_LINUX_DEFAULT="quiet splash" 为:GRUB_CMDLINE_LINU ...

  6. Docker 启动失败Starting docker (via systemctl): Job for docker.service failed

    Starting docker (via systemctl):  Job for docker.service failed. See 'systemctl status docker.servic ...

  7. 交换a和b

    有点儿类似脑筋急转弯.做个标记先. 网上还看到比较奇特的,一句代码就OK的: 注:要都是int类型才行. 还有比较奇特的: 还有一个:

  8. GDB调试详解

    GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具. GDB中的命令固然很多,但我们只需掌握其中十个左右的命令,就大致可以完成日常的基本的程序调 ...

  9. 转字符驱动实例gpio

    概述: 字符设备驱动程序: 是按照字符设备要求完成的由操作系统调用的代码. 重点理解以下内容:  1. 驱动是写给操作系统的代码,它不是直接给用户层程序调用的,而是给系统调用的  2. 所以驱动要向系 ...

  10. 从零开始学ios开发（十三）：Table Views（下）Grouped and Indexed Sections

    在前面2篇关于Table View的介绍中,我们使用的Style都是Plain,没有分组,没有index,这次学习的Table View和iphone中的通讯录很像,有一个个以字符为分割的组,最右边有 ...