扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
ulli/li/ul有序
专注于为中小企业提供网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业平陆免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
ullo/lo/ul无序
属性:list-style
list-style-type:设置列表项标志的类型(none就是前面没有小圆点)
list-style-image:将图象设置为列表项标志。
list-style-position:设置列表中列表项标志的位置
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
举一个简单的ul,li的列表例子,实现如下效果:
常规写法(使用last-child选择器):
写法2(使用not选择器):
写法2(使用+选择器):
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
比如:在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;}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流