css3+html5——新闻列表设计

最新推荐文章于 2025-05-19 16:23:04 发布

十二Tel

最新推荐文章于 2025-05-19 16:23:04 发布

阅读量2w

点赞数 10

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42426348/article/details/80656502

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

大概效果如下：

代码如下：

<!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;
        }

最低0.47元/天解锁文章