css3+html5——新闻列表设计

仿腾讯新闻列表,主要是布局和标题栏的设计(不随页面滚动而滚动)、当鼠标移动到图片上的时候实现图片的放大功能:

大概效果如下:

图片[1]-css3+html5——新闻列表设计-米科极客 图片[1]-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" ></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" ></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" ></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" ></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" ></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" ></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" ></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> </ul> </div> </div> </body> </html>

原文链接:https://blog.csdn.net/weixin_42426348/article/details/80656502?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782390599918%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782390599918&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-13-80656502-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容