12月10日
网站LOGO 六月是只猫 - 互联网技术分享指南
生活,一半家长里短,一半山川湖海...
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    给你的网站添加一个与M国政府官网同款的横幅标识,彰显权威与特色!
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    www.lyszm.com

    给你的网站添加一个与M国政府官网同款的横幅标识,彰显权威与特色!

    六月是只猫 · 原创 ·
    日常 · 暂无标签
    共 4005 字 · 约 1 分钟 · 3113
    本文最后更新于2024年06月08日,已经过了184天没有更新,若内容或图片失效,请留言反馈

    前言

    昨日闲暇之余,我无意间发现了一个颇具特色的标识,心中不禁暗喜。若能将其巧妙运用在我的网站上,定能增添不少亮点。于是,我毫不犹豫地动手仿制了一个。此横幅标识设计独特,融合了M国政府的官方元素,不仅具有高度的辨识度,更展现了其独特的权威与特色,如果你也喜欢这个标识,不妨直接下载试试吧!

    图例

    演示效果

    教程

    横幅标识分为css、js、html三部分

    1.在head内插入以下代码将css和js引入

    此处内容,需回复之后可见

    2.引入格式按照以下方式引入

    js 代码:
    <link rel="stylesheet" href="lyszm.css">
    <script src="lyszm.js"></script>

    3.将下列html代码放到你想要显示的地方【一般推荐body内第一行】

    html 代码:
        <section class="xy-banner">
        <div class="xy-accordion">
            <header class="xy-banner__header">
                <div class="xy-banner__inner">
                    <div class="grid-col-auto">
                        <img class="xy-banner__header-flag" src="https://cravatar.cn/avatar/f9c8534573959f75b8b00ffa37f39687?&d=mm&s=200"
                            alt="U.S. flag">
                    </div>
                    <div class="grid-col-fill tablet:grid-col-auto">
                        <p class="xy-banner__header-text">六月是只猫所属网站</p>
                        <p class="xy-banner__header-action" aria-hidden="true">如何辨别真伪?</p>
                    </div>
                    <button class="xy-accordion__button xy-banner__button" aria-expanded="true"
                        aria-controls="xytx-banner">
                        <span class="xy-banner__button-text">如何辨别真伪?</span>
                    </button>
                </div>
            </header>
            <div class="xy-banner__content xy-accordion__content" id="xytx-banner">
                <div class="grid-row grid-gap-lg">
                    <div class="xy-banner__guidance tablet:grid-col-6">
                        <img class="xy-banner__icon xy-media-block__img"
                            src="/CDN/JS/安全/icon-dot-gov.svg" alt="Dot gov">
                        <div class="xy-media-block__body">
                            <p>
                                <strong>所属网站使用 lyszm.com</strong>
                                <br> <strong> lyszm.com</strong> 属于 六月是只猫 及其附属网站使用
                            </p>
                        </div>
                    </div><br>
                    <div class="xy-banner__guidance tablet:grid-col-6">
                        <img class="xy-banner__icon xy-media-block__img"
                            src="/CDN/JS/安全/icon-https.svg" alt="HTTPS">
                        <div class="xy-media-block__body">
                            <p>
                                <strong> lyszm.com 域名全面使用 HTTPS</strong>
                                <br> <strong>小锁</strong> (<span class="icon-lock"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64"
                                        class="xy-banner__lock-image" role="img"
                                        aria-labelledby="banner-lock-title banner-lock-description">
                                        <title id="banner-lock-title">Lock</title>
                                        <desc id="banner-lock-description">A locked padlock</desc>
                                        <path fill="#000000" fill-rule="evenodd"
                                            d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z">
                                        </path>
                                    </svg></span>) 或 <strong>https://</strong> 表示您已安全连接到lyszm.com网站。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    大功告成 赶快去试试吧。

    声明:本文由 六月是只猫(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    8

    条评论
    发一条!
    1. 头像
      Mcenahle
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      看看

      · · · 上海-上海
    2. 头像
      Mcenahle
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      让我来看看是怎么个事

      · · · 上海-上海
    3. 头像
      御枫林下
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前

      用上了用上了,感觉逼格高了很多(bushi

      · · · 广东-江门
    4. 头像
      klcdm
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前

      还行

      · · · 香港特别行政区-香港特别行政区
    5. 头像
      夏日博客
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前

      哪里的标识,愣是没看明白。

      · · · 河北-邯郸
      1. 头像
        六月是只猫 夏日博客

        漂亮国政府网站同款。

        · · · 北京-北京
    6. 头像
      刘郎
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      有点意思,不过加上以后会不会让网站变得臃肿😂

      · · · 海外
      1. 头像
        六月是只猫 刘郎

        臃肿到时还好,折叠的

        · · · 北京-北京
    博客logo 六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海... 51统计 百度统计
    MOEICP 萌ICP备20248888号 反诈联盟 公益反诈联盟成员单位 ICP 京ICP备2022028403号-1 ICP 京公网安备 11010502051304号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已安全运行 2 年 30 天 10 小时 11 分
    六月是只猫 - 互联网技术分享指南. © 2022 ~ 2024.
    网站logo

    六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海...
     
     
     
     
    壁纸