当前位置: 首页 > 在线学习 > 网站优化 {eyou:notempty name='$eyou.field.mbxz'}<div class="article-mxxz"> <h3 class="article-mxxz-title">本模板包含以下模板文件:</h3> <ul class="mbxz-ul"> {eyou:diyfield type='checkboxs' id='mbxz' name='$eyou.field.mbxz'} <li class="mbxz-li">{$mbxz.value}</li> {/eyou:diyfield} </ul> <span class="mbxz-span">【重要提示】:若模板的并未包含该类模型需求,仅代表如需匹配该类模型需求,需自行另行设计模板;此情况与功能权限无关,所有功能的使用权限均由授权资质决定,与模板本身无任何关联。</span></div>{/eyou:notempty}{eyou:empty name='$eyou.field.mbxz'}<div class="article-mxxz article-mxxz-empty"> <h2 class="mbxz-empty-tishi">温馨提示:</h2> <p class="mbxz-empty-content"> 您所下载的模板均以演示站展示效果为参考依据,该模板无论基于何种模型设计开发,最终呈现的全部效果均以后台实际配置设置为准;本演示效果不作为因个人需求差异产生相关诉求的依据。因模板持续升级优化迭代,演示页面呈现效果与下载后的实际模板存在细微偏差,均属正常现象。 </p></div>{/eyou:empty}<style type="text/CSS">/* 核心容器 - 统一样式 简约基调 */.article-mxxz { margin: 24px 0; padding: 20px; background-color: #ffffff; border: 1px solid #f0f0f0; border-radius: 8px; box-sizing: border-box; width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.03);}/* 标题样式 层级分明 简约加粗 */.article-mxxz-title { font-size: 16px; font-weight: 600; margin: 0 0 18px 0; color: #2d2d2d; line-height: 1.4;}/* 列表样式 流式布局 适配所有屏幕 */.mbxz-ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 16px 0; gap: 12px;}/* 列表项 简约胶囊样式 柔和hover动效 */.mbxz-li { padding: 9px 18px; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 24px; font-size: 14px; color: #555555; transition: all 0.25s ease-in-out; cursor: default;}/* hover动效 柔和不刺眼 高级感 */.mbxz-li:hover { border-color: #9c7a54; color: #9c7a54; background-color: #fffbf8; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(156,122,84,0.08);}/* 提示文本 小字浅灰 不抢占视觉焦点 */.mbxz-span { display: block; font-size: 12px; color: #999999; line-height: 1.6; margin: 0; padding-top: 4px; border-top: 1px solid #f5f5f5;}/* 空数据提示区 单独样式 统一排版 */.article-mxxz-empty { background-color: #fdfdfd;}.mbxz-empty-tishi { font-size: 15px; font-weight: 500; color: #333333; margin: 0 0 12px 0; line-height: 1.3;}.mbxz-empty-content { font-size: 14px; color: #666666; line-height: 1.7; margin: 0; text-align: justify;}/* ===== 完美响应式适配 移动端+平板+PC ===== */@media (max-width: 768px) { .article-mxxz { margin: 16px 0; padding: 16px; } .mbxz-ul { gap: 10px; } .mbxz-li { padding: 8px 16px; font-size: 13px; flex: 1 1 auto; text-align: center; } .article-mxxz-title { font-size: 15px; } .mbxz-empty-tishi { font-size: 14px; } .mbxz-empty-content { font-size: 13px; }}@media (max-width: 480px) { .article-mxxz { padding: 14px; } .mbxz-ul { gap: 8px; }}</style> 标签: CSS CSS特效 学习CSS样式 css基础学习 css风格 CSS相关 模板css div如何隐藏css 未经允许不得转载! 作者:小秋同学,转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站。 原文地址:《一个判断自定义字段的样式分享》发布于:2026-01-19 11:12:07