一个示例页面

介绍

这是一个用来展示的企业介绍的页面，页面分为几个部分：

头部菜单
一个轮播图
公司简介内容
企业文化部分
组织架构
主营业务
行业客户
合作伙伴
发展史
荣誉资质
右侧固定位置的定位器

难点分析

头部标题栏
轮播图
发展史年历
右侧定位器

头部标题栏

这一部分我们抛开与用户相关的消息提醒部分，其实最主要是的最中间部分的菜单。鼠标放在主菜单上时弹出二级菜单。

这一部分的实现主要通过css来实现，我们先看一下菜单的结构，因为每一个主/次级菜单的结构都完全一样，随便拿一个主/次级菜单的结构看一下，比如说第二项菜单金税家园：

<span class="display-ib text-c cursor-p nav onemenu pos-r ht60" style="width:130px;display: inline-flex;align-items: center;">
    <a class=" ht60 display-ib bg-themeff" href="brief.html" style="cursor:default;width: 100%;color:#fff;display: inline-flex;align-items: center;justify-content: center;">
        <i class="iconfont  font20 vertical-a-t display-ib"></i>
        <span class="font16 vertical-a-t display-ib" style="margin-left:10px;">金税家园</span>
    </a>
    <ul class="pos-a font16" style="width:130px;z-index: 99;top:60px;">
        <a '="" href="brief.html"><li class="pos-r bg-themef">公司简介</li></a>
        <a '="" href="culture.html"><li class="pos-r ">文化金税</li></a>
        <a '="" href="news.html"><li class="pos-r ">成长路上</li></a>
        <a '="" href="law.html"><li class="pos-r ">法制法规</li></a>
        <a '="" href="anno-list.html"><li class="pos-r ">通知公告</li></a>
        <a '="" href="controller.html"><li class="pos-r ">管理者之窗</li></a>
        <a '="" href="brief-manage.html"><li class="pos-r ">公司简介管理</li></a>
        <a '="" href="culture-manage.html"><li class="pos-r ">企业文化管理</li></a>
        <a '="" href="news-manage.html"><li class="pos-r ">成长路上管理</li></a>
        <a '="" href="law-manage.html"><li class="pos-r ">法制法规管理</li></a>
        <a '="" href="home-manage.html"><li class="pos-r ">首页图片管理</li></a>
        <a '="" href="anno-manage.html"><li class="pos-r ">通知公告管理</li></a>
        <a '="" href="controller-manage.html"><li class="pos-r ">管理者之窗管理</li></a>
        <a '="" href="dynamic-manage.html"><li class="pos-r ">企业文化动态管理</li></a>
    </ul>
</span>

简化一下:

<span class="onemenu">
    <a></a>
    <ul></ul>
</span>

当鼠标放在<span>之上的时候，span有一个伪类:hover,在chrome的开发者工具上的Elements面板中选中节点<span>，在右侧styles面板中可以强制设置它的伪类:hover，操作过程为：

在styles面板中顶部的filter行右侧的:hov .cls鼠标单击，弹出显示Force element state面板，单击:hover字样左边的方框（复选框），即可强制设置span的:hover伪类，然后我们在界面上就可以看到二级菜单（即ul列表）在鼠标没有放置在一级菜单的情况下也会显示。

我们这个时候查看二级菜单ul，它里面的内容就是二级菜单，在开发者工具上可以看到它的样式为

.onemenu:hover ul {
    display: block;
}

这个样式就是控制二级菜单显示与否的关键了。

轮播图

诚然，这个效果实现较为困难，一般初级开发人员是无法制作这样的效果的，幸运的是，使用大厂开发出的一个react开源组件可以轻松完成这个工作。

发展史年历

基于上面的轮播图控件，这个其实也非常容易实现，修改两个地方：属性autoplay改为false,添加属性direction，值为vertical（不使用该属性时其默认值为horizontal）

右侧定位器

这个使用了html中的锚点这个特性，如果一个页面中有一个这样的节点：

<a id="pos1"></a>

另外一个

<a href="#pos1">跳转到pos1位置</a>

注：如果是不同的页面，地址加上页面名称也可以进行这样的跳转定位。

<a href="/pg001#pos1">跳转到pg001的pos1位置</a>

视频

新建页面
消除新建页面的错误（事实上也不算是错误）
小技巧：vscode的多编辑功能
页面中可能会用到文件服务，建一个文件服务吧
使用公共标题组件
逆向开发页面
使用第三方轮播图组件
使用vscode扩展下载文件到本地文件服务

方案文档

开发文档

运维文档

一个示例页面

介绍

难点分析

头部标题栏

轮播图

发展史年历

右侧定位器

视频