css3+html5——新闻列表设计
仿腾讯新闻列表，主要是布局和标题栏的设计（不随页⾯滚动⽽滚动）、当⿏标移动到图⽚上的时候实现图⽚的放⼤功能：⼤概效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.
wrap{
width: 600px;
margin: 0px auto;
}
.menu{
width: 600px;
height: 30px;
background: cornflowerblue;
position: sticky;
top:0px;
}
.
menu ul li{
float: left;
list-style-type: none;
padding: 0 40px;
}
.content ul li img:hover{
transform: scale(1.2);/*当⿏标移动到图⽚上时实现放⼤功能*/
}
.content ul li{
height: 100px;
overflow: hidden;
border-bottom: 1px solid lavender;
background: white;
list-style-type: none;
transition-duration: 0.5s;
margin: 10px 10px 5px 0;
}
.content ul li:hover{
background-color: lavender;
transition-duration: 0.5s;
}
.content .left{
overflow: hidden;/*隐藏溢出图⽚内容*/
transition-duration: 0.5s;
width: 140px;
height:80px;
/*background: green;*/
float: left;
margin-right:20px;
}
.content .right{
width:400px ;
float: left;
/
*background: pink;*/
}
.right_top{
height:60px;
}
.right_bottom{
margin_top:50px;
}
.right_bottom_left span{
color: darkgray;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="menu">
<ul>
<li>⾸页</li>
<li>⾸页</li>
<li>⾸页</li>
<li>⾸页</li>
<li>⾸页</li>
</ul>
</div>
<div class="content">
<ul>
<li>
<div class="left"><img src="../img/new1.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/new2.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</li>
<li>
<div class="left"><img src="../img/new1.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/new1.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/new1.png" alt=""></div>
新闻网站设计<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/new1.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/new1.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3>世界杯最强门卫+门锋！不耍两下你真以为我是门将？</h3>
<div class="right_bottom">
<div class="right_bottom_left">
<span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7⼩时前</span>                        </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。