列表样式css,列表样式英文

简述 css列表样式属性及取值情况

ulli/li/ul有序

ullo/lo/ul无序

属性：list-style

list-style-type：设置列表项标志的类型（none就是前面没有小圆点）

list-style-image：将图象设置为列表项标志。

list-style-position：设置列表中列表项标志的位置  

相关问答

Q1: css怎样设置下拉列表(select)样式？

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:

html

head

style

.div1{

width:600px;

height:200px;

font-size:13px;

}

.div select{

width:200px;

}

.div select option{

width:150px;

height:30px;

}

/head

body

div class='div1'

select

option value="volvo"Volvo/option

option value="saab"Saab/option

option value="opel"Opel/option

option value="audi"Audi/option

/select

/div

/body

/html

Q2: css选择器 列表样式

举一个简单的ul，li的列表例子，实现如下效果：

常规写法（使用last-child选择器）：

写法2（使用not选择器）:

写法2（使用+选择器）:

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

Q3: 怎样用CSS定制列表样式

比如：在HTML中，

nav class="list1" style="width:150px;"

ul

liaAmmy/a/li

liaBob/a/li

liaCancy/a/li

liaOther/a

ul

liaAmmy/a/li

liaBob/a/li

liaCancy/a/li

liaTom/a/li

/ul

/li

/ul

/nav

nav class="list2"

ul

liaAmmy/a/li

liaBob/a/li

liaCancy/a/li

liaTom/a/li

/ul

/nav

nav class="multi_drop_menu"

ul

liachina/a

ul

liaAdress/a/li

liaJob/a/li

liaFamily/a/li

liaName/a

ul

liaAmmy/a/li

liaBob/a/li

liaCancy/a/li

liaTom/a/li

/ul

/li

/ul

/li

liaFrance/a/li

liaEnglish/a/li

liaAmerica/a

ul

liaAdress/a/li

liaJob/a/li

liaFamily/a/li

liaName/a

ul

liaAmmy/a/li

liaBob/a/li

liaCancy/a/li

liaTom/a/li

/ul

/li

/ul

/li

/ul

/nav

br

nav class="multi_drop_menu vertical"

ul

liachina/a/li

liaFrance/a/li

liaEnglish/a/li

liaAmerica/a

ul

liaAdress/a/li

liaJob/a/li

liaFamily/a/li

liaName/a

ul

liaAmmy/a/li

liaBob/a/li

liaCancy/a/li

liaTom/a/li

/ul

/li

/ul

/li

/ul

/nav

在CSS中，

nav{ margin:50px;}

.list1 ul{ border:1px #000 solid; padding:10px; border-radius:3px;}

.list1 li{ list-style-type:none;}

.list1 li+li a{ border-top:1px #000 solid;}

.list1 a{ display:block; text-decoration:none; font:Arial, Helvetica, sans-serif; font-weight:400; background:#999; color:#000; font-size:2em; padding:3px 10px;}

.list1 a:hover{ color:#09F;}

.list1 li ul{ opacity:0; visibility:hidden; transition:3s all;}

.list1 li:hover ul{ opacity:1; visibility:visible;}

.list2 ul{overflow:hidden;}

.list2 li{ float:left; list-style-type:none; background:#CCC;}

.list2 li+li a{ border-left:1px #000 solid;}

.list2 a{ display:block; text-decoration:none; color:#000; font-size:2em; padding:10px 30px;}

.list2 a:hover{ color:#09F;}

/*添加视觉样式*/

.multi_drop_menu{ font:2em Arial, Helvetica, sans-serif;}

.multi_drop_menu a{ display:block; color:#fff; background:#063; text-decoration:none; padding:.5em 1em; border-width:3px; border-color:transparent;}

.multi_drop_menu li:hover a{ color:#06F; background:#CCC;}

.multi_drop_menu a:active{ color:#FFF; background:#333;}

.multi_drop_menu li ul{ width:9em;}

.multi_drop_menu li li a{ border-right-style:none; border-top-style:solid; color:#333; background:#6F0;}

/*添加功能样式*/

.multi_drop_menu *{ padding:0px; margin:0px;}

.multi_drop_menu ul{ float:left;}

.multi_drop_menu li{ float:left; list-style-type:none; position:relative;}

.multi_drop_menu li a{ display:block; border-right-style:solid; background-clip:padding-box; text-decoration:none;}

.multi_drop_menu li:last-child a{ border-right-style:none;}

.multi_drop_menu li ul{ display:none; position:absolute; left:0px; top:100%; z-index:99;}

.multi_drop_menu li:hover ul{ display:block;}

.multi_drop_menu li li{ float:none;}

.multi_drop_menu li li ul{ display:none; position:absolute; left:100%; top:0px;}

.multi_drop_menu.vertical{ width:8em;}

.multi_drop_menu.vertical li a{ border-right-style:none; border-top-style:solid;}

.multi_drop_menu.vertical li li a{ border-left-style:solid;}

.multi_drop_menu.vertical ul, .multi_drop_menu.vertical li { float:none;}

.multi_drop_menu.vertical li ul{ left:100%; top:0px;}