<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. ThinkPHP快速入门

    ThinkPHP快速入门 1.ThinkPHP自动生成 当我们部署完ThinkPHP框架后,其会自动生成Application文件夹,如下图所示: 2.自动生成细节分析 问题1:Application ...

  2. Android四大组件之一：Service（服务）

    Service跟Activity也是出于统一级别的组件,且与Activity的最大区别之一主要是没有人机界面,主要是运行在程序的后台(我是这么理解的),帮助文档上说的是运行于进程的主线程中,但是服务并 ...

  3. 用Windows API函数（CreateFile/ReadFile/WriteFile/CloseHandle）完成文件拷贝程序(初级版)

    文件拷贝程序 程序类型:Console 参数:源文件名   目的文件名 要求:1.只能使用Windows API函数(CreateFile/ReadFile/WriteFile/CloseHandle ...

  4. iOS Foundation框架 -4.NSDate类的简单用法

    NSDate为日期时间类对象,简单操作: 注意:直接NSLog输出NSDate对象,默认是以0时区为标准,因此会比北京时间少8小时 1.将Date格式转换为自定义格式的字符串格式 // 自定义Date ...

  5. PHP 正则表达式替换一部分内容

    preg_replace('/&topic=(.*?)&type=/',"&topic={$data['topic']}&type=",$postF ...

  6. VC 2010下安装OpenCV2.4.4

    说明: 安装平台:32位XP,VS2010: OpenCV 2.4.4不支持VC 6.0: 网上有很多用CMake编译OpenCV的安装教程,这里建议先不要自己编译,如果使用预编译好的库有问题,再尝试 ...

  7. 例题6-5 Boxes in a line uVa12657

    这道题目的解决方案是双向链表,数据结构本身并不复杂,但对于四种情况的处理不够细致,主要体现在以下几点: 分类讨论不全面,没有考虑特殊情况(本身不需要操作,需要互换的两元素相邻) 没有考虑状态4改变后对 ...

  8. CAD格式DWF嵌入到自己的网页中展示--Autodesk Design Review

    网页上嵌入CAD图纸,用的 Autodesk Design Review控件嵌入IE, 网上的 dwf viewer方式没成功. Head之间 <script type="text/j ...

  9. Memcached 配置 和项目应用

    Memcached 配置 http://blog.csdn.net/sup_heaven/article/details/32337711 memcached真实项目中的应用 http://blog. ...

  10. 局域网实现 yum

    1 安装squid代理 ##### . 安装squid yum -y remove squid yum -y install squid ##### . 修改配置文件 vi /etc/squid/sq ...