<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. ./configure:command not found 解决方法

    有些下载下来的源码没有MAKEFILE文件,但是会有MAKEFILE.IN 和 configure, MAKEFILE文件则由后两个文件生成. 如果执行: $./configure   提示错误:./ ...

  2. java虚拟机理解探索1

    以下内容源于个人对<深入java虚拟机>的理解总结 基本概念: java虚拟机可以指一种抽象规范,也可以指一种具体实现,亦可以指一个java虚拟机实例. 虚拟机生命周期: 一个java虚拟 ...

  3. OSX 上初步尝试 asp.net 5

    去年微软最令开源狗界振奋的消息就是 ASP.NET 的开放与开源这一消息了. 根据微软的介绍,与我之前的一些总结,可以看到 ASP.NET 以及 .NET 平台会有下面几个变化: 代码使用 Apach ...

  4. VMWare 不能识别SD卡

    打开service

  5. 转载：Linux内核探索之路——关于书

    转自http://blog.chinaunix.net/uid-20608849-id-3029223.html 在学习Linux内核代码的过程中,定会参考很多书籍以及网路资源,但是并不是所有的书籍和 ...

  6. silverlight 生成二维码

    MainPage.xaml <Grid x:Name="LayoutRoot" Background="White"> <Border Bor ...

  7. apache泛域名的配置

    假设我们把服务器架设在:/home/www文件夹下面 我们有应用A和B,对应的文件目录为A:/home/www/testAB:/home/www/testB 设置proxy_module让网站支持泛域 ...

  8. WPF中实现Button.Content变化的简易动画

    项目中曾要这样的需求——输入法的切换,要求从English切换到简体中文的时候,Button的Content先从English变成空白,再从空白变成简体中文, 而不是直接从English变成简体中文. ...

  9. Windows7 sp1 64位下安装配置eclipse+jdk+CDT+minGW

    需要的工具: jdk-7u11-windows-x64.exe  eclipse-SDK-4.2.2-win32-x86_64.zip cdt-master-8.1.2.zip mingw-get-i ...

  10. SQL效率的几点心得

    这几天一直在写SQL,有时候对比同样效果的SQL语句,可是查询所需要的时间有时候相差很多,下面总结遇到的几个点: 1.between   and 在有些时候自己比较喜欢使用这个语句,因为可以通过把数据 ...