原生css实现简易的网页左侧二级卡片（防京东二级卡片）

最新推荐文章于 2022-06-30 15:53:37 发布

季后的风

最新推荐文章于 2022-06-30 15:53:37 发布

阅读量302

点赞数

分类专栏：网页布局文章标签： css html5

本文链接：https://blog.csdn.net/qq_40708840/article/details/107141866

版权

网页布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生css实现简易的网页左侧二级卡片（防京东二级卡片）

1：html布局，代码如下：

<!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/index_demo.css">
</head>
<body>
   <div class="menu">
        <div class="nav_two">
            <ul>
                <li class="parent">
                    <span>家用电器</span>
                    <div class="detail">家用电器</div>
                </li>
                <li class="parent">
                    <span>手机/运营商/数码</span>
                    <div class="detail">家用电器</div>
                </li>
                <li class="parent">
                    <span>电脑/办公</span>
                    <div class="detail">家用电器</div>
                </li>
                <li class="parent">
                    <span>家具/家具/家装/厨具</span>
                    <div class="detail">家用电器</div>
                </li>
                <li class="parent">
                    <span>美妆/个人清洁/宠物</span>
                    <div class="detail">家用电器</div>
                </li>
            </ul>
        </div>

        
   </div>
</body>
</html>

2：css代码：

.menu{
    width: 100%;
    height: 480px;
}


.nav_two{
    /* float: left; */
    margin-left: 100px;
    width: 190px;
    height: 480px;
    background-color: white;
   

}
.nav_two li{
    list-style-type: none;
    width: 190px;
    margin-left: 0px;
    padding-left: 10px;
}

.nav_two .detail{
    /* 设置隐藏 */
    display: none;
    
    background-color: aqua;
    position: absolute;
    top: 10px;
    left: 300px;
    width: calc(100vw - 190px - 190px - 200px);
    height: 480px;
    
}
.nav_two .parent{
    /* float: left; */
    margin-top: 10px;
    
}


.nav_two .parent:hover{
    background-color: #666;
}
/* 显示 */
.nav_two .parent:hover .detail{
    display: block;
}

季后的风

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生css实现简易的网页左侧二级卡片（防京东二级卡片）

原生css实现简易的网页左侧二级卡片（防京东二级卡片）1：html布局，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级卡片</title> &
复制链接

扫一扫

专栏目录