HTML5系列代码:移动的菜单

    技术2023-10-13  72

    margin-top 属性设置元素的上外边距。注释:允许使用负值。 <!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:translate(-10px); /* 兼容webkit内核 */ -moz-transform:translate(-10px); /* 兼容gecko内核 */ -o-transform:translate(-10px); /* 兼容presto内核 */ -ms-transform:translate(-10px); /* 兼容IE9 */ transform:translate(-10px); /* 标准写法 */ } </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.013, SQL: 9