给Ol的序号设置样式,怎么做?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
<style>
    *{padding:0px;margin:0px;}
    img{width:80px;}
    body{font-size:14px;}
    .color-b{color:blue;}
    .top{border:1px solid gray;}
    .top-title{text-indent:1em;background-color:yellow;}
    .top-content{background-color:rgb(181, 177, 61); padding: 5px 0px;}
    .top-content .top-item{ border-bottom:1px gray dashed;line-height:1.5em; margin: 3px 30px;clear:both;}
    .top-content .active{background-color:white; padding:10px 0px;height:6em;}
    .top-content .top-item div{float:left;}
    .top-content .top-item dl{margin-left:5px;float:left;}
    .top-content .top-item dl dd{margin-top:10px;}
    .top-content .top-item dl dd p{overflow:hidden;width:150px;white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>
<body>
    <div class="top">
    <h3 class="top-title">新书热卖</h3>
    <ol class="top-content">
        <li class="top-item active" type="1">
            <div>
                <img src="http://f.hiphotos.baidu.com/image/h%3D200/sign=d9c2d17b1a950a7b6a3549c43ad0625c/14ce36d3d539b600af3985faee50352ac75cb78c.jpg"/>    
            </div>
            <dl>
                <dt class="color-b">不省心(冯小刚)</dt>
                <dd>
                    <p>作者:冯小刚</p>
                    <p>出版社:长江文艺出版社</p>
                    <p>出版时间:2013年09月</p>
                </dd>
            </dl>
        </li>
        <li class="top-item color-b">我承认我不曾历经沧桑</li>
        <li class="top-item color-b">不为遇见,只为远方</li>
        <li class="top-item color-b">站在两个世界的边缘</li>
    </ol>
    </div>
    <ol>
        <li>我的第一个列表信息。</li>
    </ol>
    <script>
        // 这个是张大大的关于ol的博客,搜藏一下
        // http://www.zhangxinxu.com/wordpress/2009/12/html-css列表元素uloldl的研究与应用/
    </script>
</body>
</html>

这是代码,实在整不动了,52d3884a00014b0702270264.jpg这是要达到的效果;通过ol的有序,然后给ol的序号设置样式,上面ol中li序号放到里面是:list-style-position: inside,不过这样第一行就乱套了;求解答

roastwind
浏览 2735回答 2
2回答

幕布斯6393831

或者加个 <i>标签。。

幕布斯6393831

用图标,
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3
Html5