帮忙看看这种效果，怎么能实现呢？

素材图

效果图

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

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

小可-封印解除 2020-05-14 16: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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

报告相同问题？

关注问题

这种手机页面是如何实现的？ html5 前端
2018-02-27 01:53

回答 14 已采纳两种实现方式： 1、web完成手机适配。开发还是web前端技术，增加手机适配就ok，google浏览器有手机预览； 2、移动端直接采用混合开发模式，HBuilder+MUI，都能实现这种样式的
帮忙看一下这个独显配置能不能跑tensorflow？ tensorflow
2018-11-09 04:26

回答 1 已采纳可以，没问题 GM107的M说明这个卡是Maxwell（麦克斯韦），这一代的卡支持CUDA 5.0 640核128bit位宽、频率都是对的。可以放心购买。这块卡的运算能力是1.3Tflops也就
哪位前端大神帮忙看看：WebStorm开发AngularJS创建不了项目
2018-03-06 09:21

回答 3 已采纳应该是路径的问题你试试这样给相对路径应该可以的类似这样： ``` $ mkdir test $ ng new appName --directory "test" ```
前端实现视频重叠，抠图效果
2021-08-20 16:07

路不周以左转兮的博客视频不方便发布，可以看下mdn的效果图总结第一种方法方便快捷，就是webm格式的透明背景视频不好弄，可以让ui大哥帮忙。但是适配性可能也不太好第二种方法基本上只要支持canvas的浏览器都能用，但是会把背景里...
大神帮忙看看这是什么问题？
2017-09-11 02:15

回答 1 已采纳如果你的gridDate返回的是null的话，它是没有length的，另外你的length写成了lenght
帮忙解释一下，这个url什么意思？实在看不懂 java
2016-04-07 09:47

回答 1 已采纳这个js或者jsp访问某个后台文件的标准格式，如访问servlet。pid与mod都是后台文件需要的参数，前面的type也是一样的。 ${ctx}/rest/common/productType:
HTML前端开发对于手机版该注意哪些问题呢？ css html5
2016-06-20 19:33

回答 8 已采纳惨不忍睹是什么意思，错位吗？一般pc端chrome，firefox没有问题，手机端也不会有问题的，不会出现错位问题，只是显示不友好，需要放大。你可以用media query对不同分辨率另外写一套样
前端技术提升
2023-02-13 16:39

Michael18811380328的博客前端技术提升前端可以从哪些角度提升？ https://www.zhihu.com/question/425782106 作者：邵锁链接：https://www.zhihu.com/question/425782106/answer/1543007211 来源：知乎著作权归作者所有。商业转载请联系...
为啥网页看不到点击图片的效果呢？求大神解答 javascript
2015-07-01 08:13

回答 2 已采纳 onclick="click()"改为下面的，要么你的函数名就另外起一个。click是this对象的一个内置函数，你直接click()会调用img对象的内置click方法，而不是你定义的，除非明确指定
请各位大神帮忙看下，jdk1.8的方法能替换成jdk1.6的方法实现吗？
2016-07-19 06:00

回答 1 已采纳 LocalDateTime这个类是java8新出的类，1.6不能用
springboot中文乱码问题，大神帮忙看下呢！
2018-02-13 09:56

回答 2 已采纳修改application.properties文件增加如下配置： spring.http.encoding.force=true spring.http.encoding.chars
前端框架MVVM是什么(整理)
2020-08-06 06:25

程宇寒的博客一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。
计算sinx 求大佬帮忙看看 c++
2020-03-08 12:13

回答 1 已采纳 ``` #include #include double sin(double); double nResult(double,double); int main() {
Django web开发(一) - 前端
2022-11-30 17:16

ShangCode的博客 Bootstrap 5.1 初识Bootstrap 5.2 栅格系统 5.3 container 5.4 面板 5.5 媒体对象 5.6 分页案例: 登录案例: 后台管理 5.7 图标优化 5.8 Bootstrap实现动态效果 6. Javascript 6.1 代码位置 6.2 注释 6.3 变量 ...
2024年，前端er们都在看哪些网站？(含面试、接活、学习、摸鱼等)
2024-04-28 02:03

2401_84434442的博客如果实在拮据，还是有其他方法也能学慕课网的课程（该付费还是付费，有老师帮忙解答问题还是很不错的）image.png视频有这两也差不多够了，就分享这两，多的也不一定有时间看~分享一些文字性的学习内容。
没有解决我的问题, 去提问

悬赏问题

¥15 用ns3仿真出5G核心网网元
¥15 matlab答疑关于海上风电的爬坡事件检测
¥88 python部署量化回测异常问题
¥30 酬劳2w元求合作写文章
¥15 在现有系统基础上增加功能
¥15 远程桌面文档内容复制粘贴，格式会变化
¥15 关于#java#的问题：找一份能快速看完mooc视频的代码
¥15 这种微信登录授权谁可以做啊
¥15 请问我该如何添加自己的数据去运行蚁群算法代码
¥20 用HslCommunication 连接欧姆龙 plc有时会连接失败。报异常为“未知错误”

码龄粉丝数原力等级 --

帮忙看看这种效果，怎么能实现呢？

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

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

1条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

帮忙看看这种效果，怎么能实现呢？

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

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

1条回答 默认 最新

悬赏问题

1条回答默认最新