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

<!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);
}

有序列表跟无序列表的嵌套相关推荐

有序列表、无序列表、定义列表
有序列表.无序列表.定义列表三种列表标签和语义标签语义 <u1></u1> 无序列表 <o1></o1> 有序列表 <d1></ ...
draft.js_如何使用快捷方式在Draft.js中创建有序列表和无序列表
draft.js by Andrey Semin 通过安德烈·塞米(Andrey Semin) 如何使用快捷方式在Draft.js中创建有序列表和无序列表 (How to create ordered ...
有序列表和无序列表的不同类型
大家可曾想过有序列表和无序列表除了默认类型,是否还有其它的类型呢? 虽然不常用,但也做了一篇总结给大家做参考. 无序列表 UL (unorder list的缩写) 定义:无序列表是一个项目的列表,此列 ...
有序列表、无序列表、自定义列表
有序列表.无序列表.自定义列表 1.有序列表 <ol type="A" start="3"><li>有 ...
html的基本操作和基本标签：标题，有序列表和无序列表等
本文介绍了,一些html的基本操作和基本标签:标题,有序列表和无序列表,段落,超链接,下划线 ,粗体 ,斜体等等,当然其中还介绍了每个标签的相应属性.在使用每个标签时,都会有注释解释,方便理解. HT ...
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
文章目录有序列表无序列表自定义列表(重点) 总结有序列表有序列表即为有排列顺序的列表,其各个列表项会按照-定的顺序排列定义. 在HTML标签中, 标签用于定义有序列表,列表排序以数字来显示, ...
HTML之有序列表、无序列表
目录有序列表无序列表有序列表有序列表(可表示步骤,顺序,排名等)(两个元素,二者之间为父子关系,li必须包裹在ol内,是order list,list item缩写.w3c标准:ol内只能嵌套 ...
html标签(2)--有序列表与无序列表
有一些内容形式,用div来实现非常麻烦,也不适合例如一些表格形式无序列表 ul 代表列表 li 代表列表中的项 list-style 控制列表的样式有序列表 ol 代表列表 li 代表列表中的项 ...
html有序列表和无序列表
编写有序列表,代码如下: <html> <h2>数字显示</h2> <ol> <li>第一天</li> <li>第二 ...

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

有序列表跟无序列表的嵌套相关推荐

最新文章

热门文章