你的位置:首页 > 软件开发 > 网页设计 > ul li设置横排,并除去li前的圆点

ul li设置横排,并除去li前的圆点

发布时间:2015-12-01 11:00:12
效果预览:http://hovertree.com/texiao/css/如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构。代码是:<ul><li><a href="http://hov ...

ul li设置横排,并除去li前的圆点

效果预览:http://hovertree.com/texiao/css/如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构。代码是:

<ul><li><a href="http://hovertree.com/">首页</a></li><li><a href="http://hovertree.com/map/">网站地图</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS在线预览</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul>
当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:

<style>.hvtulli22 ul{list-style:none;}</style><div class="hvtulli22"> <ul><li><a href="http://hovertree.com/">首页</a></li><li><a href="http://hovertree.com/map/">网站地图</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS在线预览</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul></div> 
.hvtulli22 ul{list-style:none;} 现在的效果是没有圆点了:

首页

网站地图

HoverTreeCMS

特效

CMS在线预览

jQuery图片列表鼠标经过遮罩显示文字

原文

CSS定义为:.hvtulli li{float:left;margin-left:10px} HTML文件代码:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ul中li横排,除去li前的圆点,li之间间隔-何问起</title><base target="_blank" /><meta charset="utf-8" /><style>.hvtulli ul{list-style:none;} .hvtulli li{float:left;margin-left:10px}</style></head><body><div><h2>何问起</h2><h3>ul中li横排,除去li前的圆点,li之间间隔</h3> </div><div class="hvtulli"><ul><li><a href="http://hovertree.com/">首页</a></li><li><a href="http://hovertree.com/map/">网站地图</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS在线预览</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul></div> </body></html>

原标题:ul li设置横排,并除去li前的圆点

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录