2021-02-17

最新推荐文章于 2021-12-06 11:21:07 发布
最新推荐文章于 2021-12-06 11:21:07 发布
阅读量80 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46840701/article/details/113834002
版权

京东顶部导航条（CSS练习4）

效果截图
京东顶部导航条

代码部分

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/font-awesome.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body {
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            background-color: rgb(250, 246, 246);
        }

        .clearfix::before,
        .clearfix::after {
            counter-reset: '';
            display: table;
            clear: both;
        }

        .top-wrapper {
            width: 100%;
            background-color: #e3e4e5;
            /* 设置行高，使文字垂直居中 */
            height: 30px;
            line-height: 30px;
            border-bottom: 1px #ddd solid;
        }

        /* 设置内部容器样式 */
        .top {
            width: 1190px;
            margin: 0 auto;
            position: relative;
        }

        .top a.hl,
        .top a:hover {
            color: #f10125;
        }

        .top a,
        .top span,
        .top i {
            color: #999;
            text-decoration: none;
        }

        /* 设置导航条左侧元素 */
        .fl {
            float: left;
        }

        /* 地址小图标 */
        .fl .fa {
            color: #f10125;
        }

        /* 设置城市列表效果 */
        .fl .city-list {
            display: none; 
            width: 320px;
            height: 436px;
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            /* 设置绝对定位，使其不占据页面位置 */
            position: absolute;
            top: 30px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
        }

        /* 鼠标移入fl时。城市列表显示出来 */
        .fl:hover .city-list {
            display: block;
        }
        .current-city {
            padding: 0 10px;
            border: 1px solid transparent;
            position: relative;
            z-index: 1;
        }
        /* 移入后fl地址的效果 */
        .fl:hover .current-city{
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
            padding-bottom: 1px;
        }
        /* 左侧城市列表框 */
        .city {
            margin-top: 10px;
        }
        .citys{
            width: 300px;
            height: 190px;
            margin: 0 auto;
        }
        li{
            list-style: none;
            float: left;  
        }
        .city li {                  
            width: 60px;
            height: 24px;
            margin-top: 2px;
            
        }
        .city li a {
            padding: 3px 8px;
        }
        .city li a:hover{
            background-color: rgb(236, 234, 234);
        }

        /* 地区专享版本和Available Site */
        .area{
            height: 90px;
        }
        .country p,
        .area p{
            color: #999;
            margin: 0 15px;
        }
        .country a .word{
            margin-left: 16px;
        }
        .country li,
        .area li{
            width: 130px;
            margin-left: 15px;
            height: 26px;            
        }
        .country li{
            position: relative;
        }

        /* 设置图标 */
        .country li .log{
            width: 16px;
            height: 14px;
            background-image: url(./img/06/1.png);
            background-repeat: no-repeat;   
            position: absolute;
            top: 8px;
        }
        .country li .log2{
            background-position: -20px 0;   
        }
        .country li .log3{
            background-position: 0 -17px;   
        }
        .country li .log4{
            background-position: -40px 0;   
        }
        .country li .log5{
            background-position: -20px -17px;   
        }

        /* 设置分割线 */
        .split{
            width: 262px;
            margin: 8px 0 3px 16px;
            border-bottom: 1px dotted #eee;
        }    

        /* 设置导航条右侧元素 */
        .fr {
            float: right;
        }
        .fr li {
            float: left;
            padding: 0 10px;
        }
        /* .fr #fr-first{
            text-align: left;
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        } */

        /* 设置分割线 */
        .fr .line {
            width: 1px;
            height: 10px;
            padding: 0;
            background-color: #999;
            margin: 12px 0;
        }

        /* 我的京东列表框 */
        .my .myjd-list{
            display: none;
            width: 300px;           
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            /* 设置绝对定位，使其不占据页面位置 */
            position: absolute;
            top: 30px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
        }
        .my .myjd{        
            padding: 0 5px;  
            border: 1px solid transparent;  
            position: relative;
            z-index: 1;
        }
        .my:hover .myjd-list{
            display: block;
        }
        .my:hover .myjd{
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
            padding-bottom: 1px;
        }
        
        .myjd-list-first{
            overflow: hidden;
            margin-top: 10px;
            ;
        }
        .myjd-list-last{
            overflow: hidden;
            margin-bottom: 10px;
        }
        .myjd-list-split{
            width: 100%;
            margin: 10px 0;
            border-bottom: 1px dotted #eee;
        }
        .myjd-list-menu{
            width: 110px;
            height: 26px;
            float: left;
            padding: 0px 8px;
            margin-left:6px;
        }
    </style>
</head>

<body>
    <!-- 创建外围容器 -->
    <div class="top-wrapper">
        <!-- 创建内部容器 -->
        <div class="top clearfix">
            <!-- 左侧菜单 -->
            <div class="fl">
                <div class="current-city">
                    <i class="fa fa-map-marker"></i>&nbsp;
                    <a href="javascript:;">北京</a>
                </div>
                <div class="city-list">
                    <div class="city">
                        <div class="citys">
                            <li><a href="javascript:;">北京</a></li>
                            <li><a href="javascript:;">上海</a></li>
                            <li><a href="javascript:;">天津</a></li>
                            <li><a href="javascript:;">重庆</a></li>
                            <li><a href="javascript:;">河北</a></li>
                            <li><a href="javascript:;">山西</a></li>
                            <li><a href="javascript:;">河南</a></li>
                            <li><a href="javascript:;">辽宁</a></li>
                            <li><a href="javascript:;">吉林</a></li>
                            <li><a href="javascript:;">黑龙江</a></li>
                            <li><a href="javascript:;">内蒙古</a></li>
                            <li><a href="javascript:;">江苏</a></li>
                            <li><a href="javascript:;">山东</a></li>
                            <li><a href="javascript:;">安徽</a></li>
                            <li><a href="javascript:;">浙江</a></li>
                            <li><a href="javascript:;">福建</a></li>
                            <li><a href="javascript:;">湖北</a></li>
                            <li><a href="javascript:;">湖南</a></li>
                            <li><a href="javascript:;">广东</a></li>
                            <li><a href="javascript:;">广西</a></li>
                            <li><a href="javascript:;">江西</a></li>
                            <li><a href="javascript:;">四川</a></li>
                            <li><a href="javascript:;">海南</a></li>
                            <li><a href="javascript:;">贵州</a></li>
                            <li><a href="javascript:;">云南</a></li>
                            <li><a href="javascript:;">西藏</a></li>
                            <li><a href="javascript:;">陕西</a></li>
                            <li><a href="javascript:;">甘肃</a></li>
                            <li><a href="javascript:;">青海</a></li>
                            <li><a href="javascript:;">宁夏</a></li>
                            <li><a href="javascript:;">新疆</a></li>
                            <li><a href="javascript:;">港澳</a></li>
                            <li><a href="javascript:;">台湾</a></li>
                            <li><a href="javascript:;">钓鱼岛</a></li>
                            <li><a href="javascript:;">海外</a></li>
                        </div>
                    </div>
                    <div class="split"></div>
                    <div class="area">
                        <p>地区专享版本</p>
                        <li><a href="javascript:;">中国港澳</a></li>
                        <li><a href="javascript:;">中国台湾</a></li>
                        <li><a href="javascript:;">京东全球</a></li>
                    </div>
                    <div class="split"></div>
                    <div class="country">
                        <p>Available Sites</p>
                        <li><a href="javascript:;"><div class="log log1"></div><div class="word">Global Site</div></a></li>
                        <li><a href="javascript:;"><div class="log log2"></div><div class="word">Сайт России</div></a></li>
                        <li><a href="javascript:;"><div class="log log3"></div><div class="word">Situs Indonesia</div></a></li>
                        <li><a href="javascript:;"><div class="log log4"></div><div class="word">Sitio de España</div></a></li>
                        <li><a href="javascript:;"><div class="log log5"></div><div class="word">เว็บไซต์ประเทศไทย</div></a></li>
                    </div>
                </div>
            </div>

            <!-- 右侧菜单 -->
            <ul class="fr">
                <li>
                    <a href="javascript:;">你好，请登录</a>
                    <a class="hl" href="javascript:;">免费注册</a>
                </li>
                <!-- 分割线 -->
                <li class="line"></li>
                <li><a href="javascript:;">我的订单</a></li>
                <li class="line"></li>
                <li class="my">
                    <div class="myjd">
                        <a href="javascript:;">我的京东&nbsp;<i class="fa fa-angle-down"></i></a>                  
                    </div>
                    <div class="myjd-list">
                        <div class="myjd-list-first">
                            <div class="myjd-list-menu"><a href="javascript:;">待处理订单</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">消息</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">返修退换货</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">我的问答</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">降价商品</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">我的关注</a></div>                            
                        </div>
                        <div class="myjd-list-split"></div>
                        <div class="myjd-list-last">
                            <div class="myjd-list-menu"><a href="javascript:;">我的京东</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">我的优惠券</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">我的白条</a></div>
                            <div class="myjd-list-menu"><a href="javascript:;">我的理财</a></div>
                        </div>
                    </div>
                </li>
                <li class="line"></li>
                <li><a href="javascript:;">京东会员</a></li>
                <li class="line"></li>
                <li>
                    <a class="hl" href="javascript:;">企业采购&nbsp;<i class="fa fa-angle-down"></i></a>                  
                </li>
                <li class="line"></li>
                <li>
                    <span>客户服务&nbsp;<i class="fa fa-angle-down"></i></span>
                    
                </li>
                <li class="line"></li>
                <li>
                    <span>网址导航</span>
                    <i class="fa fa-angle-down"></i>
                </li>
                <li class="line"></li>
                <span>手机京东</span>
            </ul>
        </div>
    </div>
</body>
</html>
weixin_46840701
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CVE-2021-42278域内权限提升
include_voidmain的博客
03-16 4930
0x01 漏洞背景 前些日子的靶场中涉及到了域内提权，当时刚好爆出CVE-2022-42278这个域内提权漏洞，正好下载下来了POC试了试，确实不错，于是打算看看这个只需一个域用户，就能获取域控权限的漏洞怎么回事，便有了这篇文章。 0x02 环境搭建 在这里搭建了一个简单的内网环境，主机AD_USER将445端口暴露在外，并且存在ms17_010，hacker通过AD_USER的445端口进入域内，随后通过CVE-2021-42287拿下AD。 环境详情： 主机IP Hacker192.168.80.12
2021-03-17
m0_56206427的博客
03-17 1340
如何在阿里云服务器部署项目，用到阿里的负载均衡服务，查了一些资料。由此记录一下，方便以后再次使用： 第一步：创建负载均衡实例官方教程链接：创建负载均衡实例点击创建负载均衡实例，选择负载均衡规格，输入实例名称(给负载均衡起个小名)，点击去购买，对勾购买协议，点击去开通。![这两天准备在阿里云服务器部署项目，用到阿里的负载均衡服务，查了一些资料。由此记录一下，方便以后再次使用： 第一步：创建负载均衡实例 官方教程链接：创建负载均衡实例 点击创建负载均衡实例，选择负载均衡规格，输入实例名称（给负载均衡起个小名儿）
CVE-2021-22205——Gitlab 远程命令执行漏洞复现
LiBai'S BLOG
11-10 8734
CVE-2021-22205Vuln Impact影响版本环境Fofa语法漏洞利用脚本反弹ShellEXP Vuln Impact An issue has been discovered in GitLab CE/EE affecting all versions starting from 11.9. GitLab was not properly validating image files that were passed to a file parser which resulted in a .
2021-03-15
weixin_44902539的博客
03-15 1185
好网站 https://blog.csdn.net/u013317445/article/details/88196373?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-6.control&dist_request_id=1328641.48931.16157665162059593&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-
2021-01-02
shine_tom的博客
01-02 1224
[root@localhost doc]# man echo [root@localhost doc]# help echo echo: echo [-neE] [arg …] Write arguments to the standard output. Display the ARGs on the standard output followed by a newline. Options: -n do not append a newline -e enable interpretatio
2021-03-01
brokedream的博客
03-01 915
#include<bits/stdc++.h> using namespace std; struct node { int val; int sum; }e[100005]; int main() { int n, k; int t; int box[100005] = {0}; int f[100005] = {0}; cin >> n >> k; int mx = 0; for(int i = 0 ; i < n ; i ++) {
2021-05-05
樊金良的博客
05-05 680
你需要努力，fighting！
2021-02-22
chocolate2018的博客
02-23 8240
jacinto 内核驱动 – 5 3.2.2.13 OSPI / QSPI 介绍 八进制串行外设接口(OSPI)是一个具有x8 IO线的SPI模块。四串行外围接口(QSPI)有x4 IO线。这些控制器主要用于接口八进制或四倍SPI flashes。OSPjI向后兼容QSPI。这些模块也可以在双(x2)和单(x1)模式下工作。 TI soc上的OSPI和QSPI控制器支持内存映射IO接口，这为访问外部SPI闪存的数据提供了直接接口，从而简化了软件需求。这些控制器只在主模式下工作。 支持设备 在各种TI soc
漏洞预警：gitlab命令执行（CVE-2021-22205）
热门推荐
weixin_43526443的博客
12-06 6万+
——D&X安全实验室 目录 Part1 漏洞描述 Part2 危害等级 Part3 漏洞影响 Part4 漏洞分析及验证 （1)使用vulhub搭建环境。 2)利用脚本 3)查看回显 Part5 修复建议 Part1 漏洞描述 GitLab是美国GitLab公司的一款使用Ruby on Rails开发的、自托管的、Git（版本控制系统）项目仓库应用程序。 由于 GitLab 没有正确验证传递给文件解析器的图像文件...
java中怎么把2021-02-01T23:17:25+0800转成date呢
qq_43153224的博客
04-09 846
java中怎么把2021-02-01T23:17:25+0800转成date呢 上代码 public static Date dealDateFormatReverse(String oldDateStr) { DateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ssZ"); try { Date date = df.parse(oldDateStr); ret
2021-02-17-示例
02-20
在"2021-02-17-example-main"这个文件中，可能包含了如何使用这些属性的实例。 【HTML链接与导航】 使用`<a>`标签可以创建超链接，通过`href`属性指定目标URL。这使得用户可以跳转到其他页面或资源。例如，`访问...
2021-02-17-devnight
02-18
2021-02-17-devnight
算法基础 第8章 广度优先搜索-2021-02-17.pdf
02-17
### 广度优先搜索(BFS)详解 #### 一、广度优先搜索概念与应用场景 **广度优先搜索**(Breadth-First Search, BFS)是一种用于遍历或搜索图的算法。它从图的根节点开始（选择任意节点作为起点），然后遍历其所有相邻...
第3章 第2节 树及二叉树(C++版)-2021-02-17.pdf
02-17
### 二叉树基本概念与性质 #### 二叉树定义 二叉树(binary tree, 简称 BT) 是一种特殊的数据结构，其特点在于每个节点最多只有两个子节点，这两个子节点分别被称为左子节点(left child) 和右子节点(right child)。...
Pipeline-Trigger-2021-02-17T02-48-26.754Z：为工具链创建：https：console.bluemix.netdevopstoolchainsde40e8bd-6be9-42f5-8da7-7fb38180c495？env_id = ibm au-syd
02-17
标题中的“Pipeline-Trigger-2021-02-17T02-48-26.754Z”很可能是一个自动化构建或持续集成（CI/CD）过程的标识符，它包含了时间戳，表明这个过程是在2021年2月17日的凌晨2点48分触发的。"为工具链创建"暗示了这是一...
App4UITestToolint-tests-Empty-TC-Add-Tools-2021-02-17T05-34-14.638Z：为工具链创建：https：cloud.ibm.comdevopstoolchains3f55dd38-f15a-4900-a0bc-483dd2327d59？env_id = ibm eu-de
02-17
【App4UITestToolint-tests-Empty-TC-Add-Tools-2021-02-17T05-34-14.638Z：为工具链创建】是一个关于自动化UI测试的项目，特别是针对IBM Cloud DevOps Services中的工具链功能。这个项目的目的是为了创建和配置一个...
Pipeline-Trigger-2021-02-17T22-52-04.656Z：为工具链创建：https：dev.console.test.cloud.ibm.comdevopstoolchains33a90a25-ab62-4d90-a177-6978cc4b1bce？env_id = ibm：ys1：us-south
02-18
标题中的“Pipeline-Trigger-2021-02-17T22-52-04.656Z”很可能是一个自动化构建或持续集成（CI/CD）过程的标识符，其中包含了时间戳，表明这是一个在特定时间触发的事件。这个事件可能与IBM Cloud DevOps工具链相关...
rtcreportingd_2021-07-17-17-52-02_messageLog.ips
07-23
rtcreportingd_2021-07-17-17-52-02_messageLog.ips
leetcode2sumc-2021-LeetCode-02_Add_Two_Numbers:2021-LeetCode-02_Add_Two
07-06
2021-LeetCode-02_Add_Two_Numbers 这是著名的反向链表问题的“相加两个数”的简单解决方案。 如果您愿意，请随时从我的 Github 存储库链接下载并修改 XCode Playground 文件 我会定期不断地解决尽可能多的问题，以...
已知data = [ ('2021-01-01 08:00', 15), ('2021-01-01 12:00', 18), ('2021-01-01 16:00', 20), ('2021-01-02 08:00', 14), ('2021-01-02 12:00', 17), ('2021-01-02 16:00', 19) ]请写出代码对data实现指数平滑
最新发布
07-12
2021-01-02 12:00:00 17 16.562500 2021-01-02 16:00:00 19 17.781250 ``` 在上述代码中，我们使用`pd.DataFrame`将data转换为DataFrame，并将时间戳列设置为索引。然后，使用`ewm`函数对数据列进行指数平滑，其中`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值