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);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
-ms-transform:rotate(30deg);
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>
转载请注明原文地址:https://ipadbbs.8miu.com/read-44758.html