使用“铭软(企业版)“开发官网体验(三)-*---头部的编写

初梦依旧

已于 2024-06-28 15:48:40 修改

阅读量186

点赞数 1

文章标签：个人开发

于 2024-06-28 15:41:41 首次发布

本文链接：https://blog.csdn.net/qq_44149644/article/details/140044458

版权

配置是付费版本的
初始版本和配置版本的有点不一样.
我开发的页面样式完全跟官网是不一样的,并且需要按照ui图进行自适应开发,所以基本上每个功能都重新写.
1.头部,写一个pc和手机端都是配的banner可配置的,导航.
初始模板的头部引入了jQuery,一方面是卡,另一方面是jQuery+js+freeMark都放到一起,看不懂,所以直接从头开始写
1.搭骨架子
从铭软中找到顶级菜单

{ms:channel type='nav'}
<a href="{ms:global.html/}${field.typelink}">${field.typetitle}</a>
{/ms:channel}

2.使用ul和li写一个二级菜单,如果使用了el-mentui,不会写,获取不到数据,没有获取到菜单的接口.,写html的时候需要把样式,写完整,尽量完整.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向二级菜单</title>
<style>
/* 基础样式 */
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* 主菜单样式 */
.menu {
    background-color: #333; /* 背景色 */
    overflow: hidden; /* 防止溢出 */
}
.menu li {
    float: left; /* 水平排列 */
}
.menu a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* 下拉菜单隐藏 */
.sub-menu {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* 下拉菜单显示时的样式 */
.show {display: block;}

/* 鼠标悬停高亮 */
.menu li:hover > a, .sub-menu a:hover {
    background-color: #111;
    color: white;
}
</style>
</head>
<body>

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
        <a href="#" class="dropbtn">服务</a>
        <div class="sub-menu">
            <a href="#">服务1</a>
            <a href="#">服务2</a>
            <a href="#">服务3</a>
        </div>
    </li>
    <li><a href="#">关于我们</a></li>
    <!-- 可以继续添加更多菜单项 -->
</ul>

<script>
// 使用JavaScript来实现下拉菜单的显示与隐藏
var dropdown = document.getElementsByClassName("dropdown");
for (var i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("mouseover", function() {
        this.querySelector('.sub-menu').classList.add("show");
    });
    dropdown[i].addEventListener("mouseout", function() {
        this.querySelector('.sub-menu').classList.remove("show");
    });
}
</script>

</body>
</html>

3.将html的内容和标签的内容结合,标签可以单独访问顶级,分别访问顶级的子集,层级不要超过两层,超过了之后第三层写在什么位置,比较麻烦.

 <ul class="menu-container">
                        <li    onclick="window.location.href='{ms:global.host/}index.html'">
                            <a href="{ms:global.host/}index.html"   class="<#if typetitle==field.typetitle>activeShouye<#else>sub-title</#if>"> 首页 </a>
                        </li>
                        {ms:channel type="nav"} <!--第一级-->
                        <li >
                            <#if field.typeleaf == 1>
                            <a href="{ms:global.html/}${field.typelink}"
                               class="<#if typetitle==field.typetitle>active<#else>sub-title</#if>"><!-- 选中效果 -->
                                ${field.typetitle}
                            </a>
                            <#else>
                            ${field.typetitle}<i class="el-icon-caret-bottom"></i>
                        </#if>
                        <ul> <!--第二级-->
                            {ms:channel}
                            <li    onclick="window.location.href='{ms:global.html/}${field.typelink}'">
                                <a href="{ms:global.html/}${field.typelink}"
                                   class="<#if typetitle==field.typetitle>active<#else>sub-title</#if>"><!-- 选中效果 -->
                                    ${field.typetitle}
                                </a>
                            </li>
                            {/ms:channel}
                        </ul>
                        </li>
                        {/ms:channel}
                    </ul>

样式都是不一样的,所以就不写了,只写html
在这里插入图片描述
我的这个样式是这样的,li中文字的样式需要根据背景图来进行变化,如果背景图片是黑色的那么文字就需要设置成白色的.

我充分的利用"栏目管理"里面的字段,有些字段没有用上,所以就用来控制展示的文字的颜色了,
因为提供的字段是固定且有限个,需要充分运用,决定不了系统中的配置,但是可以决定模板代码中使用哪一个变量.
这里面的代码有些就是些固定的写法,

初梦依旧

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用“铭软(企业版)“开发官网体验(三)-*---头部的编写

2.使用ul和li写一个二级菜单,如果使用了el-mentui,不会写,获取不到数据,没有获取到菜单的接口.,写html的时候需要把样式,写完整,尽量完整.3.将html的内容和标签的内容结合,标签可以单独访问顶级,分别访问顶级的子集,层级不要超过两层,超过了之后第三层写在什么位置,比较麻烦.我的这个样式是这样的,li中文字的样式需要根据背景图来进行变化,如果背景图片是黑色的那么文字就需要设置成白色的.我充分的利用"栏目管理"里面的字段,有些字段没有用上,所以就用来控制展示的文字的颜色了,
复制链接

扫一扫