(附加二)层叠样式表CSS

纯css实现多级折叠菜单折叠树效果1、运⽤checkbox的checked值来判断下级栏⽬是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执⾏你的CSS。

当有⼦菜单时，菜单项右侧有向下的箭头，当收起菜单项时，箭头朝上。

图⽚可以⾃⼰替换。

2、效果图3、代码⽚段<ol class="tree"><li><label for="folder1" class="folderOne">泽元框架</label> <input type="checkbox" id="folder1" /><ol><li><label for="subfolder1"class="folderTwo">开发规范</label> <input type="checkbox" id="subfolder1" /><ol><li class="file folderThree"><a href="#">常见界⾯错误举例</a></li><li class="file folderThree"><a href="#">关于发⾏报告对BUG管理提出…</a></li><li class="file folderThree"><a href="#">插件内部JAVA包命名规范</a></li></ol></li><li class="file folderTwo"><a href="#">概述</a></li><li class="file folderTwo"><a href="#">服务器集群</a></li><li class="file folderTwo"><a href="#">模板</a></li><li class="file folderTwo"><a href="#">安全机制</a></li></ol></li><li><label for="folder2" class="folderOne" >ZCMS</label> <input type="checkbox" id="folder2" /><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li><label for="subfolder2" class="folderTwo">实时数据</label> <input type="checkbox" id="subfolder2" /><ol><li class="file folderThree"><a href="#">实时数据</a></li><li class="file folderThree"><a href="#">实时数据</a></li><li class="file folderThree"><a href="#">实时数据</a></li></ol></li></ol></li><li><label for="folder3" class="folderOne">ZAS</label> <input type="checkbox" id="folder3" /><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li class="file folderTwo"><a href="#">实时数据</a></li></ol></li><li><label for="folder4" class="folderOne">ZHTML标签</label> <input type="checkbox" id="folder4"/><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li class="file folderTwo"><a href="#">实时数据</a></li></ol></li><li><label for="folder5" class="folderOne">UI框架API⼿册</label> <input type="checkbox" id="folder5"/><ol><li class="file folderTwo"><a href="#">实时数据</a></li><li class="file folderTwo"><a href="#">实时数据</a></li></ol></li></ol><style type="text/css">.tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}/*隐藏input*/.tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}/*所有菜单项设置统⼀样式*/.tree li {position: relative;list-style: none;}/*⼀级菜单加下边线*/.tree>li{border-bottom: 1px solid #d9d9d9;}/*给有⼦菜单的菜单项添加背景图标*/.tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;background: url(../../images/cp-detail-arrow-b.png) no-repeat right center;background-position:95% 50%;white-space:nowrap;overflow:hidden;text-ov .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}/*清除所有展开的⼦菜单的display*/.tree li input + ol{display: none;}/*当input被选中时，给所有展开的⼦菜单设置样式*/.tree input:checked + ol {padding-left:14px;height: auto;display: block;}.tree input:checked + ol > li { height: auto;}/*末层菜单为A标签，设置样式*/.tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}.tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;}/*不同层级的菜单字体⼤⼩不同*/.tree .folderOne{font-size: 18px;}.tree .folderTwo{font-size:16px;}.tree .folderThree{font-size:14px;}</style><script type="text/javascript">$(document).ready(function() {//每个有⼦菜单的菜单项添加点击事件$(".tree label").click(function(){//获取当前菜单旁边input的check状态var isChecked = $(this).next("input[type='checkbox']").is(':checked');//展开和收齐的不同状态下更换右侧⼩图标if(isChecked){$(this).css("background-image","url(../images/cp-detail-arrow-b.png)");}else{$(this).css("background-image","url(../images/cp-detail-arrow-t.png)");}});});</script>下⾯介绍下CSS 菜单折叠先给⼤家展⽰效果图：如上，假设⼀级菜单是 div，⼆级菜单是 ul。

CSS列表样式自定义方法CSS（层叠样式表）是一种用于定义网页布局和外观的语言。

使用CSS，我们可以更改列表的样式，以使其与网页的整体风格相匹配。

本文将介绍一些常用的CSS列表样式自定义方法。

一、使用内置列表样式CSS提供了一些内置的列表样式，包括无序列表（ul）和有序列表（ol）。

1. 无序列表样式：通过设置列表项（li）的样式（list-style-type）属性，我们可以更改无序列表的样式。

常见的样式选项包括：- none：不显示任何符号。

- disc：显示为实心圆点。

- circle：显示为空心圆点。

- square：显示为方块。

例如，可以使用以下CSS代码将无序列表的样式更改为方块：```ul {list-style-type: square;}```2. 有序列表样式：有序列表的样式可以通过设置列表项（li）的样式属性（list-style-type）进行更改。

常见的样式选项包括：- decimal：按数字顺序显示。

- lower-alpha：按小写字母顺序显示。

- upper-alpha：按大写字母顺序显示。

- lower-roman：按小写罗马数字显示。

- upper-roman：按大写罗马数字显示。

例如，可以使用以下CSS代码将有序列表的样式更改为小写字母：```ol {list-style-type: lower-alpha;}```二、使用自定义图像作为列表符号除了使用内置的列表样式外，我们还可以使用自定义图像作为列表项的符号。

这需要使用CSS的background-image属性。

1. 准备图像：首先，我们需要准备一个用作列表符号的图像，可以是PNG、JPEG或GIF格式。

确保图像的大小适合作为列表符号，并上传至服务器。

2. 设置背景图像：然后，使用CSS的background-image属性将图像设置为列表项的背景图像。

可以使用以下CSS代码来设置背景图像：```ul {list-style-image: url("path/to/image.png");}```请将"path/to/image.png"替换为实际图像文件的路径。

第五节 CSS 层叠样式表） （层叠样式表）
1
复习4-1 复习
HTML 标记一般配对使用，不区分大小写 标记一般配对使用， 标记都具有属性。 标记都具有属性。属性提供关于网页上 HTML 元素的附 加信息 <元素名 [属性＝“值”] …> 内容 </元素名 ： 元素名 属性 属性＝ 元素名>： 元素名 <font> 文字 </font> <元素名 [属性＝“值”] … >：<img src=“…”> 元素名 属性 属性＝ ： <元素名 ：<br> 元素名>： 元素名 META 标记放置在网页的标题处以提供关于页面的信息。 标记放置在网页的标题处以提供关于页面的信息。 搜索引擎常会用到这些信息
alt=“..” border=“..”>
表格标记： 表格标记：<TABLE>、<TR>、<TD> 、 、 表单标记： 表单标记：<FORM action=“url” method=“get/post”>
INPUT元素 元素
</FORM>
3
复习4-3 复习
代码阅读
<TABLE width="200" border="1" align="center" > <CAPTION align="bottom">我的表格 我的表格</CAPTION> 我的表格 <TR bgcolor="yellow"> <TH>1</TH> <TH>2</TH> </TR> <TR align="center"> <TD rowspan="2">3</TD> <TD align="right">4</TD> </TR> <TR> <TD align="right">5</TD> </TR> </TABLE>

水平位置：设置水平方向的位置，可以“左对齐“右对齐”、“居中”。还可以设置数值与单位结合表示位置的方式，比较常用的是像素单位。
垂直位置：可以选择“顶部”、“底部”、“居中”。还可以设置数值和单位结合表示位置的方式。
3、区块样式设置
在CSS规则定义”对话框左侧选择“区块”项，可以在右边区域设置CSS样式的区块格式。
层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 < head> 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。
变量：在英文种，大写字母的字号一般比较大，采用“变量”中的“小型大写字母”设置，可以缩小大写字母。
颜色：设置文字的色彩。
2、背景样式的设置
在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后，有了更加灵活的设置。
在CSS规则定义”对话框左侧选择“背景”项，可以在右边区域设置CSS样式的背景格式。
清除：规定对象的一侧不许有层。可以通过选择“左对齐”、“右对齐”，选择不允许出现层的一侧。如果在清除层的一侧有层，对象将自动移到层的下面。“两者”是指左右都不允许出现层。“无”是不限制层的出现。
“填充”和“边界”：如果对象设置了边框，“填充”是指边框和其中内容之间的空白区域；“边界”是指边框外侧的空白区域。
a:hover 设定鼠标放置在链接文字之上时，文字的外观。
3、为新建CSS样式输入或选择名称、标记或选择器，其中：