Web students 2020-05-14 07:11 采纳率: 90.9%
浏览 193
已采纳

帮忙看看这种效果,怎么能实现呢?

素材图

效果图

想做出“图2”的效果,拼音位置上下左右居中,怎么实现呢?“图1”是素材图。

方便的话,可以帮忙写写源码,谢谢了

  • 写回答

1条回答 默认 最新

  • 小可-封印解除 2020-05-14 08:41
    关注
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                width: 1152px;
                overflow: hidden;
                border-right: 1px solid #70ad47;
                border-bottom: 1px solid #70ad47;
                margin: 20px auto;
            }
            .rows{
                border-top: 1px solid #70ad47;
                border-left: 1px solid #70ad47;
                float: left;
            }
            .row_dt{
                border-bottom: 1px solid #70ad47;
                width: 63px;
                height: 31px;
                line-height: 31px;
                text-align: center;
                font-size: 12px;
                color: #333;
            }
            .row_dd{
                width: 63px;
                height: 64px;
                line-height: 64px;
                font-size: 32px;
                color: #333;
                text-align: center;
                position: relative;
    
            }
            .row_dd span{
                position: relative;
                z-index: 1
            }
            .row_dd:before{
                    width: 0;
                    height: 100%;
                    content: "";
                    border-left: 1px dashed #70ad47;
                    display: block;
                    position: absolute;
                    top: 0;left: 50%;
                    margin-left: -1px;
                    z-index: 0
            }
            .row_dd:after{
                    width: 100%;
                    height: 0;
                    content: "";
                    border-top: 1px dashed #70ad47;
                    display: block;
                    position: absolute;
                    top: 50%;left: 0;
                    z-index: 0
            }
        </style>
    </head>
    <body>
        <div class="container">
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
            <dl class="rows">
                <dt class="row_dt">míng</dt>
                <dd class="row_dd"><span>明</span></dd>
            </dl>
        </div>
    </body>
    </html>
    
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部