京东导航栏

最新推荐文章于 2024-05-18 20:42:18 发布

w18789476022

最新推荐文章于 2024-05-18 20:42:18 发布

阅读量426

点赞数

分类专栏： HTML5CSS3笔记设计代码文章标签： css

本文链接：https://blog.csdn.net/w18789476022/article/details/109686275

版权

博客探讨了京东网站导航栏中省份选择部分的CSS实现细节，特别是如何通过CSS实现div上边框的部分掩盖效果，以创建独特的视觉体验。

摘要由CSDN通过智能技术生成

未解决问题：此处显示省份的div的上边框应部分掩盖。
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../jd-iconfonts/iconfont.css">
    <link rel="stylesheet" href="../../css/css/all.css">
    <style>
        body {
   
            font: 12px/1.5 Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b体, sans-serif
        }
       a ,span{
   
            text-decoration: none;
            color: #999999;
        }
        #topnav {
   
            background-color: #e3e4e5;
        }

        .topnav {
   
            width: 1190px;
            height: 30px;
            line-height: 30px;
            margin: auto;
        }

        .topnav li {
   
            display: inline;
        }

        .topnav a.location::before {
   
            content: '\e698';
            font-family: "iconfont";
            color: #f10215;

        }

      
        .topnav a:hover {
   
            color: #f10215;
        }

        .topnav .left {
   
            float: left;
            padding-left:10px;
            
        }