css3+html5——新闻列表设计

最新推荐文章于 2024-05-19 11:58:46 发布

十二Tel

最新推荐文章于 2024-05-19 11:58:46 发布

阅读量2w

点赞数 10

本文链接：https://blog.csdn.net/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元/天解锁文章

十二Tel

关注

10
点赞
踩
126

收藏

觉得还不错? 一键收藏
1
评论
css3+html5——新闻列表设计

随便写了个仿腾讯新闻列表，主要是布局和标题栏的设计（不随页面滚动而滚动）、当鼠标移动到图片上的时候实现图片的放大功能：大概效果如下：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;新闻列表&lt;/
复制链接

扫一扫