首页 > 其他分享 >易优CMS模板标签uibackground背景图片在模板文件index.htm中调用uibackground标签,实现指定背景图片区域可视化上传的效果

易优CMS模板标签uibackground背景图片在模板文件index.htm中调用uibackground标签,实现指定背景图片区域可视化上传的效果

时间:2024-07-29 18:42:44浏览次数:20  
标签:index 标签 htm 背景图片 uibackground 模板

【基础用法】标签:uibackground描述:背景图片上传标签,使用时结合html一起才能完成可视化布局,只针对具有可视化功能的模板。用法:
<div class="eyou-edit" e-id="文件模板里唯一的数字ID" e-page='文件模板名' e-type="background" style="background-image: url({eyou:uibackground e-id='必须与前面的数字ID一致' e-page='必须与前面的文件模板名一致' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
        这里是背景图片的代码内容
</div>属性: e-id='' 每个模板文件里唯一的数字ID,必须与uibackground标签外层的html元素标签e-id保持一致 e-page='' 页面分组,假设模板文件是index.htm,那么e-page的值是index
e-img='' 背景图片在模板中的相对路径涉及表字段: 无   【更多示例】 -------------------------------示例1-------------------------------- 描述:在模板文件index.htm中调用uibackground标签,实现指定背景图片区域可视化上传的效果。 <!DOCTYPE html> <html> <head>     <title>EyouCms企业建站系统</title> </head> <body>
    <div>
        <!-- uibackground可视化标签调用 start -->
        <div class="eyou-edit" e-id="300" e-page='index' e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='index' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            这里是背景图片的代码内容
        </div>
        <!-- uibackground可视化标签调用 end -->
    <div>       <!-- 可视化模板必须引入的ui标签 start -->     {eyou:ui open='off' /}     <!-- 可视化模板必须引入的ui标签 end --> </body> </html>   -------------------------------示例2-------------------------------- 描述:在模板文件lists_article.htm中调用uibackground标签,实现指定背景图片区域可视化上传的效果。 <!DOCTYPE html> <html> <head>     <title>EyouCms企业建站系统</title> </head> <body>
    <div>
        <!-- uibackground可视化标签调用 start -->
        <div class="eyou-edit" e-id="300" e-page='lists_article' e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='lists_article' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            这里是背景图片的代码内容
        </div>
        <!-- uibackground可视化标签调用 end -->
    <div>       <!-- 可视化模板必须引入的ui标签 start -->     {eyou:ui open='off' /}     <!-- 可视化模板必须引入的ui标签 end --> </body> </html>   -------------------------------示例3-------------------------------- 描述:在模板文件index.htm中,多处调用uibackground标签的写法。 <!DOCTYPE html> <html> <head>     <title>EyouCms企业建站系统</title> </head> <body>
      <div>
        <!-- uibackground可视化标签调用 start -->
        <div class="eyou-edit" e-id="300" e-page='index' e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='index' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            这里是背景图片的代码内容
        </div>
        <!-- uibackground可视化标签调用 end -->
    <div>

    <div>
        <!-- uibackground可视化标签调用 start -->
        <div class="eyou-edit" e-id="301" e-page='index' e-type="background" style="background-image: url({eyou:uibackground e-id='301' e-page='index' e-img='skin/images/abo/about_img2.png' /}) no-repeat center top;">
            这里是背景图片的代码内容
        </div>
        <!-- uibackground可视化标签调用 end -->
    <div>


      <!-- 可视化模板必须引入的ui标签 start -->     {eyou:ui open='off' /}     <!-- 可视化模板必须引入的ui标签 end --> </body> </html>   -------------------------------示例4-------------------------------- 描述:在模板文件index.htm中,多处调用uibackground标签的写法,只在html最外层元素指定一次e-page属性值。 <!DOCTYPE html> <html> <head>     <title>EyouCms企业建站系统</title> </head> <body e-page='index'> <!-- 最外层指定e-page属性值,里面html元素<a>可以不再指定e-page属性值 -->  

    <div>
        <!-- uibackground可视化标签调用 start -->
        <div class="eyou-edit" e-id="300" e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='index' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            这里是背景图片的代码内容
        </div>
        <!-- uibackground可视化标签调用 end -->
    <div>

    <div>
        <!-- uibackground可视化标签调用 start -->
        <div class="eyou-edit" e-id="301" e-type="background" style="background-image: url({eyou:uibackground e-id='301' e-page='index' e-img='skin/images/abo/about_img2.png' /}) no-repeat center top;">
            这里是背景图片的代码内容
        </div>
        <!-- uibackground可视化标签调用 end -->
    <div>


      </div>     <!-- 可视化模板必须引入的ui标签 start -->     {eyou:ui open='off' /}     <!-- 可视化模板必须引入的ui标签 end --> </body> </html>  

 

标签:index,标签,htm,背景图片,uibackground,模板
From: https://www.cnblogs.com/hwrex/p/18330783

相关文章

  • Qt+OpenCascade开发笔记(二):windows开发环境搭建(二):Qt引入occ库,搭建基础工程模板Demo和发
    前言  OpenCASCADE是由OpenCascadeSAS公司开发和支持的开源软件开发平台,旨在为特定领域快速开发程序而设计。它是一个面向对象的C++类库,提供了丰富的几何造型、数据交换和可视化等功能,成为许多CAD软件的核心组件。  本篇描述搭建Qt开发occ环境过程。 Demo  ......
  • 从文档中删除文本,只留下模板
    我使用doctr库来识别文本并获取pdf文档中文本的坐标。但是,我根本不需要此文档中的文本,只需要文档模板。我正在寻找如何删除文本的解决方案,并决定最好遍历获得的坐标并删除这些坐标内的文本。我开始研究如何在Python中实现这一点。不幸的是,信息不多,但我设法找到了这......
  • dsu on tree 模板
    dsuontree模板运用例题以及代码:U41492树上数颜色-洛谷|计算机科学教育新生态(luogu.com.cn)记录详情-洛谷|计算机科学教育新生态(luogu.com.cn)Lomsatgelral-洛谷|计算机科学教育新生态(luogu.com.cn)记录详情-洛谷|计算机科学教育新生态(luogu.com.......
  • PPT模板替换秘籍:一键撤销原模板,轻松更换新风格!
    将PPT中的模板换成另一个模板,可以通过几种不同的方法实现。以下是几种常用的方法:方法一:使用PowerPoint内置的设计选项卡打开PowerPoint:首先,打开你想要更改模板的PPT文件。选择“设计”选项卡:在PowerPoint的顶部菜单栏中,找到并选择“设计”选项卡。选择新模板:在“设计”选项......
  • CSP-S提高组数据结构算法模板大合集
    CSP-S算法总结2.2.1基础知识与编程环境无2.2.2C++程序设计2set/nultisetmap/multimapdeque/priority_queueSTL2.2.3数据结构P1886 滑动窗口/【模板】单调队列#include<iostream>usingnamespacestd;intn,k,a[1000005];intq[1000005],h,t;......
  • python刷题常用模板
    #=====================================素数筛Begin=====================================#MAXN=1000prime=[]isprime=[True]*(MAXN+1)defeuler():isprime[1]=Falseforiinrange(2,MAXN+1):ifisprime[i]:prime.append(i)......
  • 个人工作述职报告模板PPT转正述职报告通用工作总结汇报范文免费
    不知道怎么写述职报告的同学,可以下载PPT模板,改一改就能用。模板文件一共有几个G,下载可能比较慢,建议选择转存,几秒就能保存全部文件,而且几乎不消耗数据流量。不需要开会员,文件可以免费保存,建议一次选择一个文件夹转存。手机APP保存的文件,可以同步在电脑端查看。 以下是部分述职......
  • 20、flask-进阶-自定义静态文件static和模板文件templates的路径配置
    自定义static目录和templates目录的路径原本flask默认的static和templates目录是在App目录下的:如下图如果想把这两个目录更改位置,如放在根目录下:代码如下:__init__.pyfromflaskimportFlaskfrom.viewsimportbluefrom.extsimportinit_extsimportos#获......
  • 如何在flask和jinjia2模板中仅显示一个登录或注销按钮?
    我想在用户登录时显示注销按钮,在用户注销时显示登录按钮。但是这些按钮显示的次数与我有用户的次数一样多。我该如何修复它?--htmlcode{%foruserinusers%}{%ifuser.user_id==session['user_id']%}<liclass="nav-item">......
  • 最长上升子序列【模板】
    链接:登录—专业IT笔试面试备考平台_牛客网来源:牛客网 题目描述给你一个长度为n的数组,求最长的严格上升子序列的长度。输入描述:第一行一个整数n,表示数组长度。第二行n个整数,表示数组中的元素。1<=n<=100000输出描述:输出一行,表示答案。输入:512223输出......