<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. 分享9款很有创意的HTML5动画

    1.HTML5 SVG Loading 动画加载特效 这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果.每一组Loading动画都非常可爱,他们都非常欢快 ...

  2. oracle 数据库导入导出

    要把公司的数据库导入到自己的电脑上(都需要再命令窗口下输入指令) 导出数据库的基本代码: exp zj_user_kf/oracle@tzsw_4 file=d:\test3.dmp full=y 导 ...

  3. poj 2010 Moo University - Financial Aid

                                                                                                Moo Univ ...

  4. 《搭建更新DNS集群服务》RHEL6

    DNS服务器的更新: 一听就知道不止一台的DNS服务器,要是一台也用不着更新对吧?一般都是DNS集群. 一台DNS更新了,添加一条数据,下面的都要跟着它变. 主DNS服务器的配置 首先先配置DNS服务 ...

  5. 网络A、B、C类IP地址的区别

    学网络之前得先要明白几个概念:(起初我也不怎么知道后来就慢慢会了) 1字节＝8位,1位就是1个数字,所以1字节等于8个数字. 2的8次方,和二进制11111111转换为十进制并不一回事. 0-127是 ...

  6. linux 安装sysstat使用iostat、mpstat、sar、sa(转载)

    使用yum安装 #yum install sysstat sysstat的安装包是:sysstat-5.0.5-1.i386.rpm,装完了sysstat-5.0.5-1.i386.rpm后 就会有i ...

  7. 如何在Mac下使用TF/SD 卡制作Exynos 4412 u-boot启动盘

    /** ****************************************************************************** * @author    Maox ...

  8. android的入门学习

    android 入门学习. 活动:就是一个包含应用程序的用户界面的窗口.目的就是与用户交互. 意图:就是能够将来自不同应用程序的不同活动无缝连接在一起工作的"胶水",确保这些任务执 ...

  9. Super Object Toolkit (支持排序)

    (* * Super Object Toolkit * * Usage allowed under the restrictions of the Lesser GNU General Public ...

  10. Winform Krypton控件使用（一）

    在学生健康系统中前期考虑需求中,考虑过在C/S下使用Winform或WPF完成项目, 在winform下,考虑过两套插件,一个是DotNetBar, 控件很多,但这个是收费的,考虑到以后的版权和费用问 ...