css学习，控制列表章节

来源：互联网发布：java中四舍五入的方法编辑：程序博客网时间：2024/04/28 20:19

列表类型：

无序列表<ul>

有序列表<ol>

定义列表<dl>:dl是一种特殊的列表形式，成对出现，列表中每个元素的标题使用<dt>ddd</dt> 后面紧随<dd>dddd</dd>用于描述列表中元素的内容。

一般dd元素会在dt的下一列显示，为了实现水平显示的效果，可以如下，定义

#box dt{
width:250px;
height:20px;
float:left;
margin-top:5px;
margin-left:10px;
}
#box dd{
width:70px;
height:20px;
float:left;
margin-top:5px;
text-align:center;
}

改变项目样式，设置li的list-style-type属性，list-style-type：circle,decimal,Disc(实心圆列表）lower-alpha，lower-roman，none，square，upper-alpha，upper-roman

实现图片符号，使用定制的图像符号，可在列表项的左边添加填充，为图片留出所需的空间，然后将符号图像作为背景图像应用与列表项，

实现代码如下：

#box li{

width：300px；

height：20px；

margin-top;5px;

padding-leftL25px;

float:left;

background-image:url(images/7101.gif);

background-repeat:no-repeat;

background-position:12px 4px;

list-style-type:none;

}

实现代码：

#box{
width:120px;
font-size:12px;
font-family:"宋体";
}
#box ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#box li{
border-bottom:#ed9f9f solid 1px;

}
#box li a{
display:block;
padding:5px 5px 5px 9px;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711525;
}
#box li a:link{
background-color:#c11136;
color:#ffffff;
}
#box li a:visited{
background-color:#c111136;
color:#ffffff;
}
#box li a:hover{
background-color:#990020;
color:#ffff00;
}

列表项横向显示只要添加

#box li{

float：left；

}

新增的颜色标准 HSL colors如：background-color:hst(240,100%，50%）分别为色调，饱和度，亮度

HSLA，A为透明度属性，取值范围0--1

opacity属性即透明度，如opacity：0.75；

补充，在dt元素后们可以有多个dd元素

0 0