list-style 列表项目标记样式解决方案

list-style 简写属性在一个声明中设置所有的列表属性。

可以按顺序设置如下属性：
       •list-style-type
       •list-style-position
       •list-style-image

默认值： disc outside none

 

/*reset*/

list-style:none outside none;  

 

效果图1：

关键代码：

background:url(images/web01a_05.png) no-repeat;
text-indent:40px;  /*首行文字缩进*/
line-height:2em;
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style</title>
<style type="text/css">
    *{margin: 0;padding:0;}
    .clearfix:after,.clearfix:before{display:table;content:""}
    .clearfix:after{clear:both;overflow:hidden}
    ul{ width:300px; margin:20px auto 0;}
    li{ 
        list-style:none outside none;  /*reset*/
        background:url(images/web01a_05.png) no-repeat;
        text-indent:40px;
        line-height:2em;
        border:1px solid #CCC;
        margin-bottom:10px;
    }
</style>
</head>

<body>
    <ul>
        <li>inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。</li>
        <li>outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。</li>
        <li>inherit 规定应该从父元素继承 list-style-position 属性的值。</li>
    </ul>
</body>
</html>

 

效果图2：

 

关键代码：

background:url(images/web01a_05.png) no-repeat;
padding-left:40px;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style</title>
<style type="text/css">
    *{margin: 0;padding:0;}
    .clearfix:after,.clearfix:before{display:table;content:""}
    .clearfix:after{clear:both;overflow:hidden}
    ul{ width:300px; margin:20px auto 0;}
    li{ 
        list-style:none outside none;  /*reset*/
        background:url(images/web01a_05.png) no-repeat;
        line-height:2em;
        padding-left:40px;
        border:1px solid #CCC;
        margin-bottom:10px;
    }
</style>
</head>

<body>
    <ul>
        <li>inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。</li>
        <li>outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。</li>
        <li>inherit 规定应该从父元素继承 list-style-position 属性的值。</li>
    </ul>
</body>
</html>

 

效果图3：

关键代码：

background:url(images/web01a_05.png) no-repeat left center;  /*定位背景图标位置*/
padding-left:40px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style</title>
<style type="text/css">
    *{margin: 0;padding:0;}
    .clearfix:after,.clearfix:before{display:table;content:""}
    .clearfix:after{clear:both;overflow:hidden}
    ul{ width:300px; margin:20px auto 0;}
    li{ 
        list-style:none outside none;  /*reset*/
        background:url(images/web01a_05.png) no-repeat left center;
        line-height:2em;
        padding-left:40px;
        border:1px solid #CCC;
        margin-bottom:10px;
    }
</style>
</head>

<body>
    <ul>
        <li>inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。</li>
        <li>outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。</li>
        <li>inherit 规定应该从父元素继承 list-style-position 属性的值。</li>
    </ul>
</body>
</html>

 

posted @ 2014-09-25 23:29  linyongqin  阅读(284)  评论(0)  编辑  收藏  举报