郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
在网页制作中，CSS技术中的ul、li样式的应用非常普遍，我们经常会使用ul、li来制作一些文字列表或者图片列表，比如新闻链接列表、横向网页导航链接、系列图片链接等等，不仅是纵向列表，还有横向列表，都可以利用ul和li样式设置来实现。在使用ul和li样式时，大多都是使用比较常用的几个样式设置，在这里，郑州网站建设公司的小编就来更加深入地解析一下ul和li样式的应用，并对这些样式设置附带有实例代码，还配以实例代码执行后的截图，以便更好地让各位理解网页制作中如何使用这些ul和li样式的用法。下面郑州网站建设来展示一下CSS技术中的ul和li实例代码和图示，本代码在各种浏览器上都测试过，可兼容各种主流浏览器：
常用的ul和li样式是list-style，大多数时候list-style都是设置成none，表示不是使用任何样式包括前面的“点号”，仅仅进行列表。下面是list-style使用none时的一个实例代码和图示：
<style>
#menu{width:400px; height:50px; line-height:50px; background-color: #EEDDDD;}
#menu ul{list-style:none; margin:0px;}
#menu ul li{float:left; margin-left:15px; font-size:12px;}
</style>
<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
上面的代码中对ul使用了list-style:none取消了列表前的点号，并使用margin:0px;取消了UL的缩进，对li使用过了float:left; 让内容都在同一行显示，使用了浮动属性(float)。
下面郑州网站建设重点介绍一下其他的样式设置。在CSS技术中，有专门控制列表表现的属性，常用的有list-style-type属性、list-style-image属性、list-style-position属性等几个，下面分别介绍一下。
一、list-style-type属性：
list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰。list-style-type属性常用的样式有如下几个：
none、disc、circle、square、demical、lower-alpha、upper-alpha、lower-roman、upper-roman等等，它们的含义如下：
none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字
upper-roman：大写罗马数字
下面是使用list-style-type属性的示例代码和图示如下：
<style>
li{list-style-type:circle; margin-left:15px; font-size:12px; line-height:20px;}
</style>
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
该样式应用到页面的效果如下图所示：
二、list-style-image属性：
list-style-image属性用来定义使用图片来代替项目符号。list-style-image属性常用的样式有两个，即：none/url，其中none表示没有替换的图片，而url表示要替换图片的路径，下面以例子来看一下其用法：
<style>
li{list-style-image:url(images/xmfh.jpg); margin-left:15px; font-size:12px; line-height:20px;}
</style>
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
网页执行的效果图如下：
三、list-style-position属性：
list-style-position属性，是用来定义项目符号在列表中显示位置的属性。list-style-position属性常用的样式有两个，即：inside/outside。inside表示项目符号放置在文本以内，outside表示项目符号放置在文本以外，下面用例子来看一下其用法：
<style>
div{width:300px;}
li{list-style-type:circle; list-style-position:outside; margin-left:15px; font-size:12px; line-height:20px;}
</style>
<div>
<ul>
<li><a href="#">这里是使用list-style-position属性值为outside的示例，为了突出样式，本行文字加长了，请注意换行以后项目符号的位置。</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">技术支持</a></li>
</ul>
</div>
使用outside和inside属性值的效果图如下（图一为outside属性值的图示，图二为inside属性值的图示）：
