css ul li 制作导航条
<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 制作导航条的更多相关文章
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css 制作导航条布局
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- html5制作导航条
(1)background-repeat:no-repeat;图片不平铺 (2)使用<ul>和<li>便签,代码简介有序.易于编排. (3)在引入外部css文件时,<li ...
- CSS ul li a 背景图片与文字对齐
<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...
- 用ul 来制作导航栏的几个要点
1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...
随机推荐
- 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
本书是分享微信jssdk开发的第二篇. 4.2.1 项目需求 需求说明:实现微信端的手机用户,点击按钮选取1张图片,分享到朋友圈. 4.2.2 需求分解 通过对需求的了解,可以将其分解为: ( ...
- EasyUI form ajax submit到MVC后,在IE下提示下载内容的解决办法
问题描述: 项目环境为,.Net Mvc5+EF6……前端框架使用的是EasyUI v1.4.4. 在视图页面中,使用form的submit方法提交表单数据时,如果是使用IE的话,请求成功后IE会提示 ...
- Myeclipse安装svn插件(link方式)
Myeclipse安装svn插件(link方式) 优点:1.离线安装2.非侵入式 演示版本 myeclipse--myeclipse8.6 svn--subeclipse-site-1.6.5.zip ...
- noip2006T1 能量项链
最近一直在做noip的题,由于太水一直没有写题解,可是这道题,这道题.啊啊啊啊…… 明明水的要命,调了一节课啊!!我干脆不要搞OI了啊! 特别逗比的错误啊!!!! 代码: #include <c ...
- Code Review的一些典型内容
如下是Code Review中一些典型的内容: 一.常规项: 1.代码能够工作么?它有没有实现预期的功能,逻辑是否正确等. 2.所有的代码是否简单易懂? 3.代码符合你所遵循的编程规范么?这通常包括大 ...
- php读取图片内容并输出到浏览器的实现代码
如果php以图片,zip,exe等文件输出到浏览器,而前面还输出了其他字符,就会有乱码. 代码很简单,网上都能找到,但在我机子上就是显示不出来,显示出的一直是这个php文件路径,费了点时间才搞定,原来 ...
- Translation002—Package Index(Android包索引)
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 看本翻译前请您注意: 本人初学android,可能有的翻译不是非常准确,但本人尽最大努力,不清楚处会做标记,并附 ...
- C程序调用shell脚本共有三种方法
C程序调用shell脚本共有三种法子 :system().popen().exec系列函数call_exec1.c ,内容为:system() 不用你自己去产生进程,它已经封装了,直接加入自己的命令e ...
- MySQL批量杀进程
OS: CentOS 6.3 DB:5.5.14 mysql> show processlist;+----+------+-----------+--------------------+-- ...
- SVN四部曲之SVN简单使用教程入门
1. 签出源代码到本机 在本机创建文件夹StartKit,右键点击Checkout,弹出如下图的窗体: 2. 2 在上图中URL of Repository:下的文本框中输 ...