HTML5系列代码:旋转的菜单

    技术2023-09-21  113

    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。 <!DOCTYPE HTML> <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:rotate(30deg); /* 兼容webkit内核 */ -moz-transform:rotate(30deg); /* 兼容gecko内核 */ -o-transform:rotate(30deg); /* 兼容presto内核 */ -ms-transform:rotate(30deg); /* 兼容IE9 */ transform:rotate(30deg); /* 标准写法 */ } </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