列表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、复制复制复制效果如下,即循环