前端开发-HTML+CSS实现京东官网左侧导航条列表

最新推荐文章于 2022-12-19 17:51:21 发布

果冻儿upupup

最新推荐文章于 2022-12-19 17:51:21 发布

阅读量1.8k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/Jelly_11/article/details/109749142

版权

本文通过HTML5和CSS3技术详细讲解如何实现京东官网风格的左侧导航条列表，涵盖布局、样式和交互效果。

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

实现京东左侧导航条列表：html5+css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东左侧导航条列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        /*设置body*/
        body{
    
            /*设置网页背景，便于查看*/
            background-color:silver;
        }
        /*设置菜单外部容器*/
        .left-nav{
    
            /*设置宽度*/
            width: 190px;
            /*设置高度*/
            height: 450px;
            /*设置背景颜色*/
            background-color:snow;
            /*设置padding*/
            padding: 10px 0px;
            /*便于查看*/
            margin: 50px auto;
        }
        /*设置菜单内部的item*/
        .left-nav .item{
    
            height: 25px; 
            /*将文字垂直居中*/
            line-height: 25px; 
            /*设置内边距 将文字向右移动*/
            padding-left: 18px;
        }
        /*设置鼠标移入的状态*/
        .item:hover{
    
            background-color: #d9d9d9;
        }
        /*设置超链接样式*/
        .item a{
    
            /*设置字体大小*/
            font-size: 14px;
            /*设置字体颜色*/
            color: #333;
            /*去除下划线*/
            text-decoration: none;
        }
        /*设置超链接鼠标移入的状态*/
        .item a:hover{
    
            color: #c81623;
        }
        /*设置/的样式*/
        .item span{
    
            font-size: 12px;
            padding: 0px 2px;
        }

    </style>
</head>
<body>
    <!--创建一个外部容器 nav:定义导航连接的部分 div：定义文档中的分区或节 ul：定义无序列表 -->
    <!--nav(div)  div(div)  ul(li) -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>
        <div class="item">
            <a href="#">手机</a><span>/</span><a href="#">运营商</a><span>/</span><a href="#">数码</a