【实习练手demo】文章列表code

最新推荐文章于 2024-03-14 20:42:00 发布

UndeFIned丶

最新推荐文章于 2024-03-14 20:42:00 发布

阅读量210

点赞数

分类专栏：笔记文章标签： css html

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/106911062

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

还原此页面布局：
在这里插入图片描述

如下：
在这里插入图片描述

此图代码：

<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<base class="_dcdev_preset_" href="https://res.dcdev.net/" />

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.3/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>开发 · 预览代码片段</title>
    <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <!------ 以上内容不要动 --------------------------------------------------------->

    <style>
        * {
            padding: 0;
            margin: 0
        }
        
        body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
            color: #000;
            background: #f2f2f2;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }
        
        li {
            list-style: none;
        }
        /* 身体盒子 */
        
        .body_box {
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        
        .content_box {
            width: 94%;
            margin: 10px auto 0;
        }
        /* 焦点图 */
        
        .focus {
            width: 100%;
            height: 180px;
            background-color: pink;
            border-radius: 3px;
        }
        
        .focus_text {
            position: relative;
        }
        /* 焦点图文字 */
        
        .focus_text p {
            position: absolute;
            top: 115px;
            left: 10px;
            font-size: 18px;
            color: #fff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        /* 菱形模块 */
        
        .point {
            width: 100%;
            height: 30px;
        }
        
        .point ul {
            width: 116px;
            height: 30px;
            margin: 0 auto;
        }
        /* 每一个菱形 */
        
        .point_one {
            float: left;
            width: 9px;
            height: 9px;
            margin: 10px;
            background-color: #ededed;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* Internet Explorer */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
        }
        /* 这里为每个新闻盒子的大小 */
        
        .news_box {
            /* 采用flex布局 */
            display: flex;
            width: 100%;
            height: 120px;
            margin: 10px 0;
        }
        
        .img_box {
            width: 110px;
            height: 110px;
            margin-top: 5px;
            background-color: pink;
        }
        
        .img_box img {
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .text_box {
            flex: 1;
            padding-left: 10px;
        }
        
        .text p {
            font-weight: 700;
            font-size: 16px;
            color: #292929;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        
        .time {
            position: relative;
        }
        
        .time p {
            position: absolute;
            top: 0;
            left: 0;
            margin-top: 35px;
            font-size: 12px;
            color: #bcbcbc;
        }
    </style>
</head>

<body>
    <!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写  ------>
    <div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
        <!-- body start -->

        <div class="body_box">
            <div class="content_box">
                <div class="fouse_box">
                    <div class="focus">
                        <img src="../img/user.jpg" alt="">
                        <div class="focus_text">
                            <p>36氪专访 | 淘宝特价版负责人汪海: C...</p>
                        </div>
                    </div>

                    <div class="point">
                        <ul>
                            <li class="point_one"></li>
                            <li class="point_one" style="background-color: #4085fe;"></li>
                            <li class="point_one"></li>
                            <li class="point_one"></li>
                        </ul>
                    </div>
                </div>

                <div class="news_box">
                    <div class="text_box">
                        <div class="text">
                            <p>最前线 | 有赞股价创两年来新高后回落，折让36.84%发行1000万股</p>
                        </div>
                        <div class="time">
                            <p>李欣 ·59分钟前</p>
                        </div>
                    </div>

                    <div class="img_box">
                        <img src="../img/user.jpg" alt="">
                    </div>
                </div>

            </div>
        </div>
        <!-- body end -->
    </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/init.js" id="initClass" authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/ui.js" id="ui_class" xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
    // 代码片段描述
    code_part_desc = "文章列表";
    code_part_id = "bd1efab94b8ae88b";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->




</html>

效果图二：
在这里插入图片描述

代码：

<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<base class="_dcdev_preset_" href="https://res.dcdev.net/" />

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.3/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>开发 · 预览代码片段</title>
    <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <!------ 以上内容不要动 --------------------------------------------------------->

    <style>
        * {
            padding: 0;
            margin: 0
        }
        
        body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
            color: #000;
            background: #f2f2f2;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }
        
        li {
            list-style: none;
        }
        
        .body_box {
            width: 100%;
            background-color: #fff;
        }
        
        .content.box {
            width: 94%;
            margin: 0 auto;
        }
        /* 热搜文字 */
        
        .header {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #ccc;
        }
        
        .hot_seach,
        .recommend {
            position: relative;
            float: left;
            width: 50%;
            height: 100%;
        }
        
        .hot_seach .border,
        .recommend .border {
            position: absolute;
            right: 25%;
            float: right;
            width: 44px;
            height: 61%;
            line-height: 50px;
            /* border-bottom: 3px solid #2e93f4; */
            border-radius: 2px;
        }
        
        .recommend .border {
            position: absolute;
            left: 25%;
            float: left;
        }
        
        .hot_seach p,
        .recommend p {
            box-sizing: border-box;
            font-weight: 700;
            font-size: 17px;
            padding: 0 4px;
        }
        
        .recommend p {
            font-weight: 400;
            color: #6b6b6b;
        }
        
        .xian {
            width: 100%;
            height: 6%;
            background-color: #2e93f4;
            border-radius: 2px;
        }
        /* 导航栏模块 */
        
        .nav_box {
            display: flex;
            overflow-x: scroll;
            overflow-y: hidden;
            width: 100%;
            height: 100%;
            border-top: 1px solid #ccc;
            align-items: center;
            flex-wrap: nowrap;
            white-space: nowrap;
        }
        
        .nav_box::-webkit-scrollbar-thumb {
            /*滚动条滑块样式*/
            width: 0px;
            height: 0px;
        }
        
        .nav_box::-webkit-scrollbar-track {
            /*滚动条轨道样式*/
            width: 0px;
            height: 0px;
        }
        
        .nav_box::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
        
        .nav {
            float: left;
            height: 52px;
            flex: 0 0 92px;
            text-align: center;
        }
        
        .box {
            width: 70%;
            height: 32px;
            line-height: 32px;
            margin: 10px auto;
            text-align: center;
            color: #9f9f9f;
        }
        /* 被选中后就增加这个类 */
        
        .box_choose {
            background-color: #f6f6f6;
            border-radius: 32px;
            font-weight: 700;
            color: #4b4b4b;
        }
        /* 新闻热点模块 */
        
        .new_outbox {
            clear: both;
            border-top: 4px solid #fafafa;
        }
        
        .news_box {
            /* 采用flex布局 */
            display: flex;
            width: 100%;
            /* height: 120px; */
            margin: 10px 0;
        }
        
        .img_box {
            width: 140px;
            height: 90px;
            margin: 10px;
            background-color: pink;
            border-radius: 10px;
        }
        
        .img_box img {
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .time p {
            /* margin: 10px 0; */
            margin-top: 10px;
            margin-bottom: 4px;
            font-size: 12px;
            color: #bcbcbc;
        }
        /* 热搜排名方框 */
        
        .rank {
            position: relative;
            float: left;
            width: 25px;
            height: 17px;
            margin-right: 10px;
            border-radius: 4px;
            /* background-color: orange; */
            background-image: linear-gradient(to right, #fcad28, #fdca21);
        }
        
        .rank p {
            position: absolute;
            top: -10px;
            left: 6px;
            color: #fff;
        }
        
        .text_box {
            flex: 1;
            padding-left: 10px;
        }
        
        .text p {
            font-weight: 700;
            font-size: 16px;
            color: #292929;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        /* 固定盒子模块 */
        
        .fixed_box {
            position: sticky;
            overflow: hidden;
            bottom: 0;
            left: 50%;
            width: 100%;
            height: 58px;
            background-color: #fff;
        }
        
        .fixed_content {
            position: relative;
            float: left;
            width: 50%;
            height: 100%;
        }
        
        .fixed {
            position: absolute;
            top: 0;
            left: 40%;
            width: 28px;
            height: 100%;
            margin-top: 5px;
        }
        
        .img {
            width: 100%;
            height: 26px;
            background-color: pink;
        }
        
        .fixed p {
            margin-top: 5px;
            font-size: 13px;
            font-weight: 700;
        }
        
        .img img {
            width: 100%;
            height: 100%;
        }
        
        .mine {
            position: absolute;
            top: 0;
            right: 20px;
        }
        
        .fixed_r {
            /* right: 88px; */
            right: 50%;
        }
    </style>
</head>

<body>
    <!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写  ------>
    <div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
        <!-- body start -->

        <div class="body_box">
            <div class="content_box">
                <div class="header">
                    <div class="hot_seach">
                        <div class="border">
                            <p>热搜</p>
                            <div class="xian"></div>
                        </div>
                    </div>
                    <div class="recommend">
                        <div class="border">
                            <p>推荐</p>
                            <div class="xian" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="nav_box">
                    <div class="nav">
                        <div class="box box_choose">
                            <p>全部</p>
                        </div>
                    </div>
                    <div class="nav">
                        <div class="box">
                            <p>科学</p>
                        </div>
                    </div>
                    <div class="nav">
                        <div class="box">
                            <p>数码</p>
                        </div>
                    </div>
                    <div class="nav">
                        <div class="box">
                            <p>体育</p>
                        </div>
                    </div>
                    <div class="nav">
                        <div class="box">
                            <p>时尚</p>
                        </div>
                    </div>
                    <div class="nav">
                        <div class="box">
                            <p>影视</p>
                        </div>
                    </div>

                </div>
                <div class="new_outbox">
                    <div class="news_box">
                        <div class="text_box">
                            <div class="time">
                                <div class="rank">
                                    <p>01</p>
                                </div>
                                <p>2816 万热度</p>
                            </div>
                            <div class="text">
                                <p>如何看待西南交大陈玉玉同学，修改成绩保研中科大，东窗事发后被取消保研资格？</p>
                            </div>

                        </div>

                        <div class="img_box">
                            <img src="../img/user.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="new_outbox">
                    <div class="news_box">
                        <div class="text_box">
                            <div class="time">
                                <div class="rank">
                                    <p>01</p>
                                </div>
                                <p>2816 万热度</p>
                            </div>
                            <div class="text">
                                <p>如何看待西南交大陈玉玉同学，修改成绩保研中科大，东窗事发后被取消保研资格？</p>
                            </div>

                        </div>

                        <div class="img_box">
                            <img src="../img/user.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="new_outbox">
                    <div class="news_box">
                        <div class="text_box">
                            <div class="time">
                                <div class="rank">
                                    <p>01</p>
                                </div>
                                <p>2816 万热度</p>
                            </div>
                            <div class="text">
                                <p>如何看待西南交大陈玉玉同学，修改成绩保研中科大，东窗事发后被取消保研资格？</p>
                            </div>

                        </div>

                        <div class="img_box">
                            <img src="../img/user.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="new_outbox">
                    <div class="news_box">
                        <div class="text_box">
                            <div class="time">
                                <div class="rank">
                                    <p>01</p>
                                </div>
                                <p>2816 万热度</p>
                            </div>
                            <div class="text">
                                <p>如何看待西南交大陈玉玉同学，修改成绩保研中科大，东窗事发后被取消保研资格？</p>
                            </div>

                        </div>

                        <div class="img_box">
                            <img src="../img/user.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="new_outbox">
                    <div class="news_box">
                        <div class="text_box">
                            <div class="time">
                                <div class="rank">
                                    <p>01</p>
                                </div>
                                <p>2816 万热度</p>
                            </div>
                            <div class="text">
                                <p>如何看待西南交大陈玉玉同学，修改成绩保研中科大，东窗事发后被取消保研资格？</p>
                            </div>

                        </div>

                        <div class="img_box">
                            <img src="../img/user.jpg" alt="">
                        </div>
                    </div>
                </div>


                <!-- 固定模块 -->
                <div class="fixed_box">
                    <div class="fixed_content">
                        <div class="fixed">
                            <div class="img"> <img src="" alt=""></div>
                            <p>首页</p>
                        </div>

                    </div>
                    <div class="fixed_content">
                        <div class="fixed fixed_r">
                            <div class="img"> <img src="" alt=""></div>
                            <p>我的</p>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <!-- body end -->
    </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/init.js" id="initClass" authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/ui.js" id="ui_class" xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
    // 代码片段描述
    code_part_desc = "文章列表2";
    code_part_id = "1220007455daedf4";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->




</html>

整理下

UndeFIned丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【实习练手demo】文章列表code

还原此页面布局：如下：此图代码：<!DOCTYPE html><html><base class="_dcdev_pre
复制链接

扫一扫

专栏目录