效果圖請訪問：http://220.178.0.62:8092/xuexi/demo4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul ,li {
list-style: none;
}
body {
font-family: "Microsoft Yahei";
margin: 0;
padding: 0;
color: #666666;
}
.container {
width: 1200px;
margin: 40px auto;
}
.left{
width: 380px;
height: 580px;
float: left;
}
.right{
float: left;
margin-left: 30px;
}
.news-item2 {
position: relative;
overflow: hidden;
margin: 4px 0 10px;
border-bottom: dashed 1px #ddd;
padding-bottom: 5px;
}
.news-item2:after {
content: "";
background-color: #ee9422;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
z-index: 0;
display: block;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.news-item2 .news-tit {
z-index: 10;
position: relative;
overflow: hidden;
}
.news-span1 {
width: 16%;
}
.news-span2 {
width: 83%;
}
.float-left {
float: left!important;
}
.news-item2 .news-time {
padding: 6px 0;
border-right: 1px solid #eee;
text-align: center;
color: #666666;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.news-action {
padding: 0 12px 0 40px;
box-sizing: border-box;
}
.news-item2 .news-title {
font-size: 18px;
color: #666666;
line-height: 35px;
padding-bottom: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.news-item2 .news-desc {
font-size: 12px;
color: #999999;
line-height: 35px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.news-time-date{
font-size: 22px;
}
.news-time-year{
font-size: 14px;
}
.news-item2:hover:after {
width: 100%;
}
.news-item2:hover .news-title,
.news-item2:hover .news-desc,
.news-item2:hover .news-time {
color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="left"> <img src="images/news.jpg" style="width: 100%;"><img src="images/news1.jpg" style="width: 100%;"> </div>
<div class="right newsitem ">
<ul>
<li class="news-item2">
<a title="等我不纏着你的時候，恭喜你你已經失去我了。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>12</span>/<span>09</span> </div>
<div class="news-time-year">2017</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">雖然新郎不是我，但是新娘我愛過。</p>
<p class="news-desc ">真的不必把太多人請進生命裏，太過熱情總是不被珍惜。...</p>
</div>
</div>
</div>
</a> </li>
<li class="news-item2"> <a title="你一槍崩了我說是走火，你信不信我一刀捅死你說是手哆嗦。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>01</span>/<span>14</span> </div>
<div class="news-time-year">2018</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">“我喜歡你很久了。”“我喜歡過你很久。”</p>
<p class="news-desc ">委屈都受了，如果得不到成長，那就太虧了。.</p>
</div>
</div>
</div>
</a> </li>
<li class="news-item2"> <a title="別說我很好，我很好你爲什麼不要。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>02</span>/<span>27</span> </div>
<div class="news-time-year">2018</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">道理我都懂，可清醒的人才是最難過。</p>
<p class="news-desc ">你總躲在角落裏哭，又總站在陽光下笑，所以沒人知道你也會難過。.</p>
</div>
</div>
</div>
</a> </li>
<li class="news-item2"> <a title="再大的酸楚，到了別人那兒也永遠只能是個故事。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>03</span>/<span>10</span> </div>
<div class="news-time-year">2018</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">不是我不聯繫你，而是你給我的感覺，像是我在打擾你。</p>
<p class="news-desc ">我變成所有你想要的樣子，可丟了自己，也未曾擁有你。..</p>
</div>
</div>
</div>
</a> </li>
<li class="news-item2"> <a title="從不想認真記住任何一個人，因爲忘記一個人太難。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>04</span>/<span>15</span> </div>
<div class="news-time-year">2018</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">後來我過得很好，只是偶爾遺憾沒有你的陪伴。</p>
<p class="news-desc ">哪裏會有人喜歡孤獨，不過是不喜歡失望罷了。</p>
</div>
</div>
</div>
</a> </li>
<li class="news-item2"> <a title="他說他愛你，又沒說只愛你，他說他愛你，又沒說一直愛你。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>04</span>/<span>30</span> </div>
<div class="news-time-year">2018</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">世界上最遠的距離就是，他是你的萬里挑一，你是他的萬分之一。</p>
<p class="news-desc ">你的熱情給錯了人，做什麼都是自作多情。</p>
</div>
</div>
</div>
</a> </li>
<li class="news-item2"> <a title="做不到你最深愛的人，那就做個你最難忘的人。">
<div class="news-tit ">
<div class="float-left news-span1">
<div class="news-time">
<div class="news-time-date"> <span>05</span>/<span>05</span> </div>
<div class="news-time-year">2018</div>
</div>
</div>
<div class="float-left news-span2">
<div class="news-action ">
<p class=" news-title ">颳風的時候，你要學會顫抖，而不是奢望誰的手。</p>
<p class="news-desc ">我從不隨意鬧情緒，因爲深知沒人會哄我。</p>
</div>
</div>
</div>
</a> </li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
