列表Item

效果图：

1、HTML布局：nav内容部分分为左右两侧。左侧上部为一个轮播详情查看，轮播的实现，下部为Item。右侧打算为排名展示等。

<nav>
    <div class="nav_left">
        <div class="nav_left_carousel"></div>
        <div class="nav_left_item">
            <div class="nav_left_item_pic"></div>
            <div class="nav_left_item_txt">
                <h3>标题</h3>
                <p>是夜，半倚红绿霓虹的城市，繁华、憧憬； 吟唱，伫立熙来攘往的角落，热烈、撕心，一个梦可以被埋葬的空城， 一个心可以被揉碎的过往。 不甘...
                </p>
                <ul>
                    <li>作者</li>
                    <li>评论2</li>
                    <li>点赞9</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav_right"></div>
</nav>

 2、CSS：

/*-----------------------------------------------------内容css*/
    nav{
        width: 85%;
        margin: 4em auto;
        padding-left: -15px;
        padding-right: -15px;
    }
    /*-----------------------------------------------------内容左侧css*/
    .nav_left{
        width: 70%;
        padding-right: 5em;
        background-color: #FFE4E1;
        float: left;
    }
    .nav_left_carousel{
        width: 100%;
        height: 20em;
    }
    .nav_left_item{
        width: 100%;
        height: 7em;
        border-radius: 1em;
        background-color: #c5c5c5;
        padding: 0.5em;
        margin-top: 0.2em;
    }
    .nav_left_item > .nav_left_item_pic{
        width: 6em;
        height: 100%;
        float: left;
        border-radius: 0.5em;
        background-color: #fff;
    }
    .nav_left_item > .nav_left_item_txt{
        float: left;
        width: 80%;
        margin-left: 2em;
    }
    .nav_left_item > .nav_left_item_txt > h3{
        font-size: 18px;
        padding-left: 0.5em;
    }
    .nav_left_item > .nav_left_item_txt > p{
        font-size: 14px;
        color: #787878;
        margin-top: 0.3em;
    }
    .nav_left_item > .nav_left_item_txt > ul{
        margin-top: 0.3em;
    }
    .nav_left_item > .nav_left_item_txt > ul > li{
        display: block;
        float: left;
        font-size: 14px;
        margin-right: 0.5em;
        color: #787878;
    }
    /*-----------------------------------------------------内容右侧css*/
    .nav_right{
        width: 30%;
        height: 20em;
        float: left;
        padding-left: 5em;
        background-color: #ea6f5a;
    }

3、复制复制复制效果如下，即循环