再来写一个菜单侧边栏的制作，先看截图

源代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            body {

                font-family: "微软雅黑";

                font-size: 14px;

            }

            a {

                text-decoration: none;

            }

            .sliderBar {

                position: fixed;

                left: 20px;

                top: 35%;

            }

            .sliderBar .ftName {

                position: relative;

            }

            .sliderBar dl dd {

                position: relative;

                width: 80px;

                height: 80px;

                background-color: #646577;

                border-bottom: 1px solid #999;

                text-align: center;

                background-repeat: no-repeat;

                background-position: center 20%;

                cursor: pointer;

            }

            .sliderBar dd span {

                color: #fff;

                width: 80px;

                height: 80px;

                line-height: 80px;

                display: block;

            }

            .sliderInfo {

                position: absolute;

                left: 90px;

                top: 0;

                width: 250px;

                background-color: #646577;

                padding: 0 10px;

                color: #FFFFFF;

                text-align: left;

                display: none;

            }

            .ftName:hover > a > span {

                background-color: coral;

            }

            .ftName:hover > .sliderInfo {

                display: block;

            }

        </style>

    </head>

    <body>

        <div class="sliderBar">

            <dl>

                <dd class="ftName">

                    <a href="#">

                        <span>包裹查询</span>

                    </a>

                    <div class="sliderInfo">

                        <p>批量查询跨境包裹物流派送信息，支持邮政、DHL、UPS、EMS、FedEX等服务</p>

                    </div>

                </dd>

                <dd class="ftName">

                    <a href="#">

                        <span>进口个人<br>额度查询</span>

                    </a>

                    <div class="sliderInfo">

                        <p>查询通过进口跨境电商渠道购买，已用额度</p>

                    </div>

                </dd>

                <dd class="ftName">

                    <a href="#">

                        <span>快邮在线</span>

                    </a>

                    <div class="sliderInfo">

                        <p>快邮在线物流综合服务平台为电商及外贸企业提供物流、通关、金融等服务</p>

                    </div>

                </dd>

            </dl>

        </div>

    </body>

</html>

[刘阳Java]_CSS菜单侧边栏制作的更多相关文章

  1. [刘阳Java]_CSS普通菜单制作

    简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...

  2. [刘阳Java]_CSS鼠标悬停

    小白在学习前端技术时候,一定会在刚开始的时候学习CSS2和CSS3的相关知识.这篇内容给大家介绍一个CSS鼠标悬停的效果.大家可以先看下面的效果图,然后我们在说一下实现的效果要求吧 上图效果非常简单和 ...

  3. [刘阳Java]_CSS图片画廊

    图片画廊也是一种比较经典的案例.本节文章主要简单给大家介绍了CSS2实现图片画廊,采取的实现思路 ul放置图片 li标签里面嵌套a标签 a标签里面嵌套两个图片的标签 通过简单的伪类来实现图片预览效果 ...

  4. [刘阳Java]_CSS数字分页效果

    先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...

  5. [刘阳Java]_酷炫视频播放器制作_JS篇

    此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...

  6. [刘阳Java]_酷炫视频播放器制作_界面篇

    今天开始分享一篇酷炫播放器制作,包括界面+JS.整个案例非常类似腾讯视频,优酷视频,爱奇艺视频.我们先看一下效果图,然后这篇文章主要界面篇 是不是效果比较酷炫,那么我接着来给大家说一下这个界面设计思路 ...

  7. [刘阳Java]_Spring常用注解介绍_第6讲

    Spring的注解是在Spring2.5的版本中引入的,目的简化XML配置.在企业开发过程中使用注解的频率非常高,但是学习注解的前提是大家一定要对Spring基于XML配置要熟悉,这是我个人建议,因为 ...

  8. [刘阳Java]_什么是EasyUI_第1讲

    jQuery EasyUI在Java后台开发中用得还是比较多.当然客观来讲虽然前端技术的发展,很多后台界面设计都植入了前端技术的框架.但是这篇文章我个人觉得也不会妨碍我们对jQuery EasyUI的 ...

  9. [刘阳Java]_MyBatis_动态SQL标签用法_第7讲

    1.MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. 2.MyBatis中用于实现动态SQL的元素主要有 if choose(when,otherwi ...

随机推荐

  1. 超轻量AI引擎MindSpore Lite

    超轻量AI引擎MindSpore Lite 揭秘一下端上的AI引擎:MindSpore Lite. MindSpore Lite是MindSpore全场景AI框架的端侧引擎,目前MindSpore L ...

  2. CodeGen API分析

    CodeGen API分析 作为使用命令行界面的替代方法,开发人员可以使用核心CodeGen环境编写自定义工具或实用程序来生成代码,从而将CodeGen更紧密地集成到开发环境中. 为了实现这一点,Co ...

  3. 基于TensorRT的BERT实时自然语言理解（上）

    基于TensorRT的BERT实时自然语言理解(上) 大规模语言模型(LSLMs)如BERT.GPT-2和XL-Net为许多自然语言理解(NLU)任务带来了最先进的精准飞跃.自2018年10月发布以来 ...

  4. MySQL 5.7.33 超级详细下载安装配置测试教程（可以安装成功版）

    目录 1.引言及注意事项 (1) 引言: (2) 注意: 2.MySQL下载 3.配置环境变量 4.配置my.ini文件(重点) 5.安装MySQL(重点) 6.设置密码 7.测试MySQL是否安装成 ...

  5. httprunner 2.5.7 下.env 文件环境变量的使用及debugtalk的使用，对test的参数化及执行

    一.httprunner 2.5.7 下.env  文件的使用 1..env 文件配置如下: 2.debugtalk.py 编写如下: 在debugtalk.py中增加开始和结束执行语句: 3.需要做 ...

  6. vulhub-struts2-s2-007

    0x00 漏洞原理   当配置了验证规则 <ActionName>-validation.xml 时,若类型验证转换出错,后端默认会将用户提交的表单值通过字符串拼接,然后执行一次 OGNL ...

  7. windows10环境下gcc环境变量的配置

    1.首先打开控制面板-系统和安全-系统-高级系统设置,打开环境变量 2.在用户变量里找到Path,点击编辑,点击新建,找到Qt的tools安装目录并将目录复制进去保存,我的目录是C:\Qt\Qt5.9 ...

  8. 29.qt quick-在QML中调用C++类

    1.Qml调用C++类 Qt QML模块提供了一组API,用来将C++类扩展QML中.您可以编写扩展来添加自己的QML类型,扩展现有的Qt类型,或调用无法从普通QML代码访问的C/C++函数本章将学习 ...

  9. csp-s模拟测试57(10.2)「天空龙」·「巨神兵」·「太阳神」

    题目是古埃及神话??? A. 天空龙 傻逼模拟,看来没有滑天下之大稽QAQ,也没有打错快读(大雾...) B. 巨神兵 难度爆增,一脸懵比..... 60分状压: 因为是求有向图,关于有向图好像拓扑用 ...

  10. 【模板】 RMQ求区间最值

    RMQ RMQ简单来说就是求区间的最大值(最小值) 核心算法:动态规划 RMQ(以下以求最大值为例) F[i,j]表示 从 i 开始 到i+2j -1这个区间中的最大值 状态转移方程 F[i,j]=m ...