HTML5系列代码:倾斜的菜单

    技术2023-10-08  79

    text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。 <!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:skew(30deg,-10deg); /* 兼容webkit内核 */ -moz-transform:skew(30deg,-10deg); /* 兼容gecko内核 */ -o-transform:skew(30deg,-10deg); /* 兼容presto内核 */ -ms-transform:skew(30deg,-10deg); /* 兼容IE9 */ transform:skew(30deg,-10deg); /* 标准写法 */ } </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.014, SQL: 9