HTML5系列代码:放大的菜单

    技术2023-09-24  75

    list-style 简写属性在一个声明中设置所有的列表属性。该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。可以按顺序设置如下属性:list-style-typelist-style-positionlist-style-image可以不设置其中的某个值,比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。 <!DOCTYPEHTML> <html> <head> <meta charset="utf-8"> <title>缩放元素</title> <style type="text/css"> ul { margin-top:30px; list-style:none; line-height:25px; font-family:Arial; font-weight:bold; } li { width:120px; float:left; margin:2px; border:1px solid #ccc; background-color:#e4e4e4; text-align:left; } li:hover{ background-color:#999; /* 深灰色 */ } a{ display:block; padding:5px 10px; color:#333; text-decoration:none; } a:hover{ background-color:#f90; color:#FFF; /* 变形方式:缩放 */ -webkit-transform:scale(0.8,-1.5); /* 兼容webkit内核 */ -moz-transform:scale(0.8,-1.5); /* 兼容gecko内核 */ -o-transform:scale(0.8,-1.5); /* 兼容presto内核 */ -ms-transform:scale(0.8,-1.5); /* 兼容IE9 */ transform:scale(0.8,-1.5); /* 标准写法 */ } </style> </head> <body> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </body> </html>
    Processed: 0.008, SQL: 9