有序列表跟无序列表的嵌套

最新推荐文章于 2024-04-17 14:29:26 发布

辐_射

最新推荐文章于 2024-04-17 14:29:26 发布

阅读量7.7k

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/L1585931143/article/details/103038222

版权

html+css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>有序列表跟无序列表的嵌套</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="mr-box">
    <div class="mr-bg">
        <!-- 无序列表 -->
        <ul class="mr-row">
            <li class="pic">
                商品分类
                <!-- 有序列表 -->
                <ol>
                    <li>女装 /内衣</li>
                    <li>男装 /运动户外</li>
                    <li>女鞋 /男鞋 /箱包</li>
                    <li>化妆品 /个人护理</li>
                    <li>腕表 /饰品 /眼镜</li>
                    <li>手机 /数码 /办公</li>
                    <li>零食 /食品 /茶酒</li>
                    <li> 生鲜水果</li>
                    <li>生活电器</li>
                </ol>
            </li>
            <li class="pic">春节特卖
                <!-- 无序列表 -->
                <ul class="mr-coll">
                    <li>服装服饰</li>
                    <li>母婴会场</li>
                    <li>数码家电</li>
                    <li>家纺家居</li>
                    <li>美妆会场</li>
                    <li>汽车特卖</li>
                    <li>进口尖货</li>
                    <li>医药保健</li>

                </ul>
            </li>
            <li class="pic">会员</li>
            <li class="pic">电器城</li>
            <li class="pic">天猫会员</li>
        </ul>
    </div>
</div>
</body>
</html>

@charset "utf-8";
/**css document*/
* { /*通配选择器，清除默认样式*/
    margin: 0;
    padding: 0;
    list-style: none;
}

#mr-box { /*id选选择器，设置边框样式*/
    width: 1097px;
    height: 541px;
    margin: 0 auto;
    border: 2px solid rgb(255, 0, 0);
}

.mr-bg { /*类选择器，设置居中背景样式*/
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    background: url("../images/2.jpg") no-repeat bottom/1000px 463px;
}

.mr-bg .mr-row { /*包含选择器，设置横向导航栏背景样式*/
    width: 1000px;
    height: 38px;
    background: rgb(221, 39, 39);
}

.mr-row .pic { /*包含选择器，设置横向导航栏字体样式*/
    width: 160px;
    height: 38px;
    float: left;
    padding-left: 20px;
    line-height: 38px;
    position: relative;
}

.mr-row .pic:first-child { /*伪类选择器，设置导航栏第1项样式*/
    margin-left: 35px;
}

.mr-row .pic:hover { /*包含选择器，设置横向导航栏鼠标悬停样式*/
    background: rgb(224, 61, 61);
}

/**-- 第1列横向导航栏内坚向导航栏 --**/
ol { /*设置有序列表隐藏导航栏样式*/
    width: 180px;
    height: 343px;
    font-size: 14px;
    background: rgb(254, 209, 203);
    float: left;
    position: absolute;
    left: 0;
    display: none; /*默认隐藏该样式内容*/
}

ol li { /*包含选择器，设置字体缩进*/
    text-indent: 35px;
}

ol li:hover { /*鼠标悬停显示样式背景*/
    background: rgb(255, 255, 255);
}

.pic:hover ol { /*鼠标悬停显示隐藏有序列表标签*/
    display: block;
}

/** 春节特卖样式 **/
.mr-coll { /*设置春节特卖隐藏导航栏样式*/
    width: 185px;
    height: 432px;
    background: rgb(254, 218, 214);
    position: absolute;
    left: 0;
}

.mr-coll li { /*设置春节特卖隐藏导航栏样式*/
    width: 153px;
    height: 32px;
    border: 1px solid rgb(203, 12, 16);
    border-radius: 10px;
    line-height: 32px;
    text-align: center;
    margin: 15px auto;
}

.mr-coll li:hover { /*设置春节特卖隐藏导航栏鼠标划过样式*/
    background: rgb(203, 12, 16);
}

辐_射

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
有序列表跟无序列表的嵌套

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>有序列表跟无序列表的嵌套</title> <link href="css/style.css" type="text/css" rel="styl...
复制链接

扫一扫